search

alphagov / govuk-design-system

One place for service teams to find styles, components and patterns for designing government services.
https://www.gov.uk/design-system
MIT License
511 stars 232 forks source link

Changing the colour palette used for graphs on GOV.UK/Design System #2099

Open statshan opened 2 years ago

statshan commented 2 years ago

Context

The colours used in the existing charts that can be built using Govspeak do not meet the colour contrast requirements for adjacent colours (as set out in WCAG 2.1). The Analysis Function Support Team have developed accessible colour palettes to use with charts and would love to see these implemented in the charts created using Govspeak.

I have published a webpage showing the types of tables and charts that can be built using Govspeak.

Alternatives

In general statistics producers who use GOV.UK to publish content are frustrated with the technical capability they have to publish charts. Only horizontal bar charts can be created using Govspeak so they are very limited in what they can do in HTML. Many teams are still creating charts as images and then publishing them as PNGs, JPEGs or (at best) SVGs. Sometimes they publish a mix of charts created as images and charts created using Govspeak, sometimes all their charts are images.

When it comes to colours, if they use the horizontal bar charts available in Govspeak they have no way of changing the colours. When they create charts as images they can choose whatever colours they want.

This either leads to a mix of colour palettes being used (which isn't great), or they align all their charts with the Govspeak colour palette, which also isn't great as the adjacent colours do not meet the contrast requirements for adjacent colours, set out in WCAG 2.1.

Additional information (if applicable)

Making the Govspeak charts meet the contrast requirements set out in WCAG 2.1 won't make things 100% perfect for all users but it will definitely be an improvement for any users with access needs related to seeing adjacent colours. It is also a legal requirement.

The colour palettes we have created are available within this colours guidance (it is still technically in draft but should be signed off by the end of this week).

lfdebrux commented 2 years ago

Hi @statshan,

Thanks for raising this issue, and thanks for sharing your work in this space!

This looks like quite a complex issue, and it's going to want changes in two or three different spaces:

  1. Changing the colours govspeak uses for graphs
  2. Adding guidance to the GOV.UK Design System about the colour palette to use for charts and graphs

For number 1, I'd suggest maybe raising an issue against these lines in the govspeak library:

https://github.com/alphagov/govuk_publishing_components/blob/5c2c81a85d42de15664fe50a54a94e3db73ea0ae/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_charts.scss#L32-L33

We can explore number 2 though! I don't think any guidance changes have to happen before any implementation changes in number 1, they can happen at the same time or completely independently. And it looks like the GSS already has great guidance available, so I would think that if we did end up adding guidance to our site would mainly point people at that.

edwardhorsford commented 2 years ago

When I worked on the Performance Platform for GOV.UK, I came up with a set of colours to be used for charts - trying to optimise for legibility whilst considering colour blindness - I should try to dig out these colours. I don't think GovSpeak is making use of those colours.

One thing we always tried to do - directly label the data - so that it wasn't necessary to have colour vision at all to be able to see the labeled series.

statshan commented 2 years ago

Hiya - yes directly labelling the data is the best thing to do but not really feasible with stacked or clustered bar charts. Also, my understanding was, even if you do directly label the data you should still make sure adjacent colours meet the required contrast level whenever possible?

statshan commented 2 years ago

@lfdebrux hi I am not sure how I raise an issue against those lines? Sorry I don't use GitHub a lot!

statshan commented 2 years ago

Also @lfdebrux sorry - when you mentioned pointing to the GSS guidance that would be great - do you know what sort of timeline that would have though? And would that be pointing to it from this page: https://design-system.service.gov.uk/styles/colour/ Thanks!

lfdebrux commented 2 years ago

@lfdebrux hi I am not sure how I raise an issue against those lines? Sorry I don't use GitHub a lot!

No worries, I've taken the liberty of doing so for you, feel free to add comments to the issue as needed:

https://github.com/alphagov/govuk_publishing_components/issues/2676

lfdebrux commented 2 years ago

Also @lfdebrux sorry - when you mentioned pointing to the GSS guidance that would be great - do you know what sort of timeline that would have though? And would that be pointing to it from this page: https://design-system.service.gov.uk/styles/colour/ Thanks!

I'm afraid I can't give any firm details at this point; we need to get the ticket triaged and prioritised first. We'll try and keep this ticket updated however as we do.

jon-kirwan commented 2 years ago

Hi, just adding an update here that the colour palette for Govspeak charts, in govuk_publishing_components, has now been updated and changes merged (not fully released yet but will be very soon).

https://github.com/alphagov/govuk_publishing_components/pull/2782 https://github.com/alphagov/govuk_publishing_components/issues/2676

statshan commented 2 years ago

That's great thanks, I will keep an eye out for when the colours go live! Will anything be updated in terms of the guidance? E.g. on this page: https://design-system.service.gov.uk/styles/colour/

Feels like it should mention chart colours?

Thanks again!

statshan commented 2 years ago

Just adding this more detailed request to this thread:

I think it would be good to mention the changes to the GOV.UK charts on other GOV.UK guidance and the design system.

For example on this design system webpage - it would be good to mention charts and the new colour palette that exists for them. And to flag up the palette comes from Analysis Function guidance.

And on this guidance page under "Graphs and charts" - it would be good to mention that the markdown charts have adopted the Analysis Function colour palette. And advise that if you are making SVGs or other image of charts it would be good to use the Analysis Function guidance on colour and on data vis in general.

Here is a link to all our data vis guidance in case that is useful.