Change colour palette in graphs to match GSS guidance

[lfdebrux]

Raising on behalf of @statshan, please direct all questions to them!

I'm cross-posting this issue on the GOV.UK Design System, https://github.com/alphagov/govuk-design-system/issues/2099, for visibility.

The request is to change the colour palette used for charts and graphs created using govspeak, to use the colour palette in the newly minted GSS guidance.

I believe the code to change is in the _charts.scss file from magna charta:

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

It should just be a case of changing some of those colours to use the hex values from the guidance? (I could be wrong though).

I understand you're tracking this internally as well, but if it's possible to keep this ticket updated for visibility that would be much appreciated.

[jon-kirwan]

Hi @statshan 👋 - just wanted to ask you a couple of clarifications and questions before I work on these changes:

• From the description above, it seems like I should replace the colour palette with those from the GSS guidance palette options which are -

Colour	Hex code
Dark blue	#12436D
Orange	#F46A25
Dark pink	#801650
Turquoise	#28A197

• For contrasting colours I've selected the following (which seem to have the highest contrast ratio)

Colour	Hex code	Contrast ratio
White	#FFFFFF	10.24
Dark blue	#12436D	3.38
White	#FFFFFF	9.77
Dark blue	#12436D	3.23

• The existing palette has 8 choices (reduced to 4 with these changes). You can see these colour palette options on the chart with colours example. If there are more than 4 bars then each subsequent bar is added as black (you can see this in the same example on the 9th bar for 'Pineapples') - I guess my question is will 4 colours be enough or should I repeat the colours if there are more than 4 bars?

[statshan]

Hi just to say I have seen this and am really happy changes will be made in line with our guidance! I am mad busy this week trying to get a new website ready for launch, but will reply properly next week! Hope that's ok, thanks again!

[jon-kirwan]

That's absolutely fine. Look forward to hearing from you next week and thanks for the update!

[jon-kirwan]

Hi statshan, just wanted to see if you've had a chance to review the revised palette and questions above? No worries if not and let me know if you have any questions or I can provide any further information? Thanks, Jon.

[statshan]

Hiya @jon-kirwan this is first thing on my list next week!

[statshan]

Hi @jon-kirwan just looking at this properly now - sorry for the delay!

The four colour codes you have listed are the correct colours.

Our best practice guidance states that in bar charts you should only use a maximum of 4 categories that need different colours, i.e. four stacks in a stacked bar chart or 4 groups per cluster in a clustered bar chart. This is why we only list 4 colours in our categorical colour palette guidance.

But, I am not 100% we want to completely restrict people on GOV.UK to 4 colours.

In my understanding, in terms of stacked and clustered bar charts, accessibility of colours basically depends on adjacent colours having a 3 to 1 or greater colour contrast ratio. Obviously there are other issues, like matching the colour of the bar to the legend. But we can't really fix this when using more than two colours. And because there is the option to toggle to a table view I think this is OK (as I understand it!).

So we can make 8 colours available, as long as the adjacent colours have a 3 to 1 contrast ratio.

It would obviously be great if the first four colours were the colours in our guidance (that you've listed). (Also it would be great if somewhere in the markdown guidance on the backend of GOV.UK Whitehall editor we could say something like "Best practice is to only use four different colours in your bar charts" and point to our data visualisation guidance. )

For the extra 4 colours I am guessing you can choose what goes best with the first 4 colours and ensure adjacent colours have a 3 to 1 or greater colour contrast ratio.

I hope that all makes sense! Happy to chat if that would be easier.

[jon-kirwan]

Thanks @statshan - I've now created a new pull request for these changes which includes screenshots of the new colour variations.

The guidance for the component has also been updated to indicate best practice.

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

(I will also add a ticket to our back log to see about updating the guidance for Whitehall publisher)

[statshan]

Great thank, just looking through. Will people still be able to have charts with more than 5 categories? Where the 5th and 6th, 7th, 8th will all be black?

[jon-kirwan]

That is correct. Charts with 5 bars will have no accessibility issues but any subsequent bars (6+) will be in black and have contrast issues. Unfortunately, I found that I'm unable to use any other colours from the existing palette since all have a contrast ratio below 3 next to the 4th colour, Turquoise, #28A197. However, if you have any additional colours to provide, that complement the new colour palette, I can add these in.

Otherwise, we've added the guidance for the component to suggest a maximum of 4 bars (and that 5, at a push, will still be okay). We will also update the markdown guidance in publisher and when this is due to go live would put out a note to publishers and departments to check graphs for any problems.

[statshan]

Hiya, OK I think we definitely need to sort something as we don't want to stumble into a situation where people have 8 categories and 4 of them are coloured black. And people will still do this if they can, regardless of what the guidance says. This would be worse than the current situation and we definitely don't want to make things worse!

We could move the turquoise to second place and put the orange in 4th place? Is there a colour in your existing palette that has a 3 to 1 contrast ratio with the white background and the orange?

I'd have a look but I am not sure what colours you are working off. Could you send me a link so I know I am looking at the right place?

If it'd be easier to have a chat about this I would be happy to! Thanks!

[jon-kirwan]

This is a bit tricky. Unfortunately, the current palette doesn't have the necessary contrast between adjacent colours. I've tried quite a few variations but have struggled to find colours with a 3 to 1 contrast ratio.

The current palette:

Hex code
#1d70b8
#28a197
#00703c
#85994b
#ffdd00
#f47738
#d4351c
#912b88
#0b0c0c

I've come across this page Government Analysis Function > Guidance hub > Data visualisation: charts and specifically this example chart with a palette of 8 colours (which includes the 4 colours from the new palette). This is closer but I still can't get all colours to be accessible e.g.

Hex code
#12436d
#f46A25
#801650
#28a197
#660066
#bfbfbf
#ffc000
#6699ff

To keep a palette of 9 colours (with a default colour of #0b0c0c), I think, the new palette will need to be developed further to add another 4 complimentary colours.

[statshan]

Hi @jon-kirwan - I think I have found a palette where all the colours have at least a 3 to 1 contrast ratio with a white background and with adjacent colours. I have 8 colours. Although, the last 2 don't look the nicest with the others! So I am tempted to say we limit the bar charts to 6. Is there any way of knowing how they are used across GOV.UK and whether many people use more than 6?

12436D

28A197

801650

F4GA25

3D3D3D

A285D1

8B0000

B78C01

[statshan]

I think I will ask on the content community Basecamp now and my other networks to see if I can get some feedback on how the bar charts are used.

[jon-kirwan]

Hi @statshan - that's great. Thanks for adding the new colours and asking about this on Basecamp.

Unfortunately, from what I've been able find out, it's fairly difficult to generate a report to find out how they are used.

Let's wait a few more days to see what information we can find out from the Basecamp thread and then we can make a decision on whether to add the full palette above, or only 6, and tailor the guidance accordingly.

[statshan]

Hey, OK I am away from 5th to 15th June. There's not been much response yet and not likely to be this week with the bank holidays.

I think we would be OK to go with 6 stacks/clusters. And to edit the Whitehall guidance on how to use the HTML charts, stating that a maximum of 4 would be best practice - and linking to the data vis guidance on the Analysis Function website: https://analysisfunction.civilservice.gov.uk/policy-store/?keyword=&area=data-visualisation&doctype=&submit=Go

[jon-kirwan]

Hi, just thought I'd check in and see if there had been any further responses?

If not, I think 6 colours (7 with the fallback) seems fairly safe in which case we'll proceed with the change and update the departments to notify them of when we plan to make the change.

[statshan]

Hi - nope no further responses. I think good to go ahead with the 6 colour palette.

[jon-kirwan]

Scheduled to be merged / released 25 Jul at 10:00.

[statshan]

Great, thanks for letting me know!

From: Jon Kirwan @.> Sent: 11 July 2022 14:43 To: alphagov/govuk_publishing_components @.> Cc: Thomas, Hannah @.>; Mention @.> Subject: Re: [alphagov/govuk_publishing_components] Change colour palette in graphs to match GSS guidance (Issue #2676)

Caution: This email originated from outside of the organisation. Do not click links or open attachments unless you recognise the sender and know the content is safe.

Scheduled to be merged / released 25 Jul at 10:00.

- 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%2F2676%23issuecomment-1180427356&data=05%7C01%7Channah.d.thomas%40ons.gov.uk%7C72dbe34cdbcb4edff04008da63435104%7C078807bfce824688bce00d811684dc46%7C0%7C0%7C637931438071425009%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C3000%7C%7C%7C&sdata=2BsOdxrlvHrs%2B1dByl05lK0tSk1SXsz4zD1cONUNkhQ%3D&reserved=0, or unsubscribehttps://eur03.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2Fnotifications%2Funsubscribe-auth%2FASRP64AE72VODC4EWCAHB7DVTQQHNANCNFSM5QL7I5MQ&data=05%7C01%7Channah.d.thomas%40ons.gov.uk%7C72dbe34cdbcb4edff04008da63435104%7C078807bfce824688bce00d811684dc46%7C0%7C0%7C637931438071425009%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C3000%7C%7C%7C&sdata=RQufgbiLGD0JlX0giiGnjszYIUkXbWW%2BJ0EP6j2Rczg%3D&reserved=0. You are receiving this because you were mentioned.Message ID: @.**@.>>