search

alphagov / govuk_publishing_components

A gem to document and distribute frontend components for GOV.UK applications
https://components.publishing.service.gov.uk
MIT License
65 stars 20 forks source link

Accessible colour palette for charts #1886

Closed statshan closed 2 years ago

statshan commented 3 years ago

Hello I would like to talk to someone about creating an accessible colour palette for government analysts and statisticians to use when creating basic bar charts/line charts/pie charts.

There is a colour palette in use on GOV.UK for when the bar chart/table toggle is used but I have been told the colour palette used for this was made for text, not charts and therefore might not be accessible.

I have lots of government statisticians asking me for help on this and it would be so much easier if I could direct them to an accessible palette rather than directing them to resources that allow them to pick and build their own accessible palette.

It would also help to make charts produced across government more consistent.

And it would ensure no one ends up picking an inaccessible palette either through ignorance or simply not having the time to check the colours they have picked are accessible.

Thank you.

nacnudus commented 3 years ago

The Government Statistical Service publishes good advice about accessible use of colour in graphs, but doesn't endorse any particular palate. I'm sure they'd be willing to discuss options.

statshan commented 3 years ago

Aha, I am the Government Statistical Service! I am trying to add to this guidance. 😊

From: Duncan Garmonsway notifications@github.com Sent: 21 January 2021 15:59 To: alphagov/govuk_publishing_components govuk_publishing_components@noreply.github.com Cc: Thomas, Hannah Hannah.D.Thomas@ons.gov.uk; Author author@noreply.github.com Subject: Re: [alphagov/govuk_publishing_components] Accessible colour palette for charts (#1886)

The Government Statistical Service publishes good advice about accessible use of colour in graphshttps://eur03.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgss.civilservice.gov.uk%2Fpolicy-store%2Fintroduction-to-data-visualisation%2F%23section-9&data=04%7C01%7CHannah.D.Thomas%40ons.gov.uk%7C90b2d7e15bc84164a53e08d8be258560%7C078807bfce824688bce00d811684dc46%7C0%7C0%7C637468415645956085%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C3000&sdata=7YZPPvjQK%2FAI6vmCL6hGgo4kRY2Gr6GKgiOqiQbxAmQ%3D&reserved=0, but doesn't endorse any particular palate. I'm sure they'd be willing to discuss options.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHubhttps://eur03.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2Falphagov%2Fgovuk_publishing_components%2Fissues%2F1886%23issuecomment-764744667&data=04%7C01%7CHannah.D.Thomas%40ons.gov.uk%7C90b2d7e15bc84164a53e08d8be258560%7C078807bfce824688bce00d811684dc46%7C0%7C0%7C637468415645956085%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C3000&sdata=NyGxh5G%2B63sic%2FZ3zz4ZoYj%2FN70JL3%2FZ37eEDUnUbbo%3D&reserved=0, or unsubscribehttps://eur03.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2Fnotifications%2Funsubscribe-auth%2FASRP64ABWLSW7YDJ2S47MPLS3BFNPANCNFSM4WM56JEA&data=04%7C01%7CHannah.D.Thomas%40ons.gov.uk%7C90b2d7e15bc84164a53e08d8be258560%7C078807bfce824688bce00d811684dc46%7C0%7C0%7C637468415645966070%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C3000&sdata=R7Zp9DA22VUulyAaYDlesF2iqXEhfdlLxx0NDh4113Q%3D&reserved=0.

nacnudus commented 3 years ago

Oops, sorry @statshan! I ought to pay closer attention to email signatures :facepalm:

edwardhorsford commented 3 years ago

I worked on GOV.UK Performance when it first launched and came up with a set of colours to use. Back then it had a lot more graphs of various types.

It's a tricky area - there’s a very limited range what is both high-contrast enough, has sufficient contrast between each colour, and can be somewhat distinguished if seen by people with colour vision issues. You end up limited to 3-4 colours - any more and you risk things not being distinguishable. Each additional colour you add is a compromise and means all the colours get less accessible.

One way we tackled this was to directly label the charts - so even seen in greyscale the data can still be read.

Other things we did:

There's a few screenshots of our old styles on my website. Our main colours were a teal, a pink, and a blue. But all the graphs would still be readable even in greyscale.

Dean-A-Smith commented 3 years ago

Hi @statshan. You mentioned the colour palette used for bar charts in GOV.UK publications wasn't intended for this purpose, and so might not be accessible. Are you able to be more specific about where there might be problems with that palette?

I'm not from GDS, but have an interest in this, as I'm suggesting we move our own internal chart colour scheme closer to the GOV.UK palette.

In case it's useful to anyone, I listed out the GOV.UK charts colour palette in this thread: https://github.com/alphagov/govuk-design-system-backlog/issues/16#issuecomment-726753721

statshan commented 3 years ago

Hiya. I spoke to @nacnudus about this a while back. In the email I had from him he said: The GOV.UK palette is documented in the Design System, and the colours chosen for various elements of charts are in this css file. Unfortunately, the palette has been designed for text rather than charts, and I doubt that the colours work as well as the many other accessible palettes such as Viridis and ColorBrewer. If you find that they aren't good enough, I could pass that on to the designers.

Which suggested to me that the colour palette chosen for the bar charts on GOV.UK is not the best?

jon-kirwan commented 2 years ago

Hi @statshan - will this issue be resolved by the changes to the colour palette in https://github.com/alphagov/govuk_publishing_components/issues/2676 (and therefore we can close this issue)? Thanks

jon-kirwan commented 2 years ago

Hi @statshan - I just wanted to follow up with you on this issue to see if we can now close it. I'm fairly sure it's been resolved by the recent colour palette change in https://github.com/alphagov/govuk_publishing_components/issues/2676 and would be much appreciated if you could confirm? Thank you.

statshan commented 2 years ago

Hiya, The only related query I had to this (apologies I cannot find which thread I mentioned this on) - was an update to the guidance about using colour in charts.

There is guidance within the Whitehall editor about how to use the shortcode for charts - I think it would be good to mention on there that 4 stacks or 4 categories in a cluster is the advised limit. You could also say - there are 6 colours in the palette if you need to go up to 6. If you go over 6 you will just get black for every extra stack or category. Would also be good to link to the colours guidance on the Analysis Function website and mention the palette is based on this. (Link: https://analysisfunction.civilservice.gov.uk/policy-store/data-visualisation-colours-in-charts/)

I also think it would be good to mention this on other GOV.UK guidance/the design system. Like on this webpage: https://design-system.service.gov.uk/styles/colour/ - it would be good to mention charts and this new colour palette.

And on this page under "Graphs and charts" - 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: https://analysisfunction.civilservice.gov.uk/policy-store/?keyword=&area=data-visualisation&doctype=&submit=Go)

Thanks!

jon-kirwan commented 2 years ago

Hi @statshan, for both updates / issues:

statshan commented 2 years ago

ok if they are the appropriate places for those requests then all good to close this one. Thanks!