Colour

[govuk-design-system]

Use this issue to discuss this style in the GOV.UK Design System.

[timpaul]

There's a pull request here to update the GOV.UK colour palette

[owenm6]

Looks like the colour page is missing the button colour. Can create an issue, but didn't know whether this was a deliberate choice or mistake.

[NickColley]

Talking about which colours contrast well with each other:

x-gov chat:

It would be nice if they listed the acceptable combinations to save you and everyone else testing them yourselves

[accessiblewebuk]

Assuming there aren't too many colours in the overall palette, it would be best to show all possible allowable combinations

[joelanman]

alternatively use the function for everything, either way you don't have to think about which method to use for which colour:

govuk-colour('error')
govuk-colour('focus')
govuk-colour('black')

I wonder if the variable name approach is just more expected to our users.

[abbott567]

There is an issue with $grey-4 (f8f8f8) in that it doesn't show up at all under compression. So all of our DWP equipment that our staff use essentially stream a desktop from a server somewhere and grey-4 just shows as white. The issue came to light when testing the tab component as the background colour of the tabs is grey-4 and doesn't show up at all. I have raised this issue in #100 also. Is there a need for grey-4 at all? Unlike the govuk-blue and link-colour etc there seems to be no semantic use for grey-4. So I wonder if it needs a warning or to be removed so people don't add it to their design and unknowingly introduce usability issues.

[tribute3108]

#a1acb2 - used for footer top border - doesn't seem to be defined anywhere as a variable. Can anyone enlighten me please?

[fofr]

Like @owenm6, I'm wondering why the button green is missing from the colours list.

#00823b is missing. There is only a dark green, #006435.

[amyhupe]

Hi @peteryates

Thanks for your comment. I work in the GOV.UK Design System team

We are aware of this issue and are currently making a number of changes
to the Design System and Frontend to make sure it's WCAG 2.1 AA compliant. We'll be releasing an update containing these changes within the next week.

If you can hold fire until then, the new version should fix your issues. If you need any help with updating, you can get in touch with the team on #govuk-design-system on Slack or by emailing govuk-design-system-support@digital.cabinet-office.gov.uk

I hope that helps.

Amy

[emma-cuthbert]

Yesterday I observed a user research session with a member of DWP staff who has dyslexia and problems with short-term memory. She said she finds it very difficult to read text on a white background (her words: "it jumbles everything up for me") and much prefers grey. She specifically mentioned the grey background we use in the footer of gov.uk pages as being much clearer for her.

[tomyems]

The Home Office Design System, which is used for internal products, uses a grey background for this reason. (Source: https://design.homeoffice.gov.uk/styles/colour)

[sarawilcox]

The NHS design system uses a pale grey background because:

• it reduces overall page glare
• the British Dyslexia Association recommends dark text on a light, but not white, background
• components with important information, like callouts, stand out

(NHS design system colour page)

[jlarmstrongiv]

Would it be possible to add tints and shades like the USWDS?

[joelanman]

@jlarmstrongiv sorry for the delay, it would be good to know about what context users need it in - can you share any details?

[jlarmstrongiv]

@joelanman sure, here is a previous discussion on the topic uswds/uswds#2255 I’m curious what you think

[querkmachine]

Having lighter and darker shades of our colour palette will be necessary if and when we get around to tackling #177, though whether we provide a full gamut of colours or only tweak the ones that need tweaking is not something that's been discussed yet.

Relatedly, we already use darkened shades of departmental colours when we need to provide sufficient contrast for text on white.