Colour

[govuk-design-system]

trafficstars

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.

[36degrees]

After using the colour palette I'm wondering if all the colours should be mapped to a variable name?

As this is an implementation detail, would you mind moving this discussion to an issue on the Frontend repo?

[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.

[alaricking]

We had an accessibility review on a service we launched at Crown Commercial Service, where they flagged and failed the contrast between the focus colour (yellow) #FFBF47 and background colour (white) #FFFFFF; citing the ratio should be 3:1 (currently its 1.6:1).

Worth noting that there were no strong complaints from users during testing though.

[NickColley]

@alaricking thanks for letting us know, we're doing some work on that very soon: https://github.com/alphagov/govuk-frontend/issues/1137

[benchilds]

I think the link to the Organisation colour file needs updating? The Colours page at https://design-system.service.gov.uk/styles/colour/ has a link to https://github.com/alphagov/govuk-frontend/blob/master/src/settings/_colours-organisations.scss that throws a 404. It looks like the link should be https://github.com/alphagov/govuk-frontend/blob/master/src/govuk/settings/_colours-organisations.scss.

• Old: https://github.com/alphagov/govuk-frontend/blob/master/src/settings/_colours-organisations.scss
• New: https://github.com/alphagov/govuk-frontend/blob/master/src/govuk/settings/_colours-organisations.scss

[36degrees]

Thanks for pointing that out, @benchilds – I've raised an issue for it.

[36degrees]

@benchilds the broken link has now been fixed – thanks again.

[peteryates]

In addition to @alaricking's comment above we've had the results back from our DAC (Digital Accessibility Centre) report and there was a problem raised by them regarding our focus colour choice.

To quote the report directly:

Medium priority

Low colour contrast ratio (focus indicator) The focus indicator fails colour contrast

WCAG Reference:

Success Criterion 1.4.11 Non-text Contrast (Level AA)

Understanding Non-text Contrast | How to Meet Non-text Contrast

Issue ID: DAC- Low colour contrast ratio (focus indicator) Screen Shot:

The current visible focus indicator colour does not meet the required ratio of 3:1 for AA standard. This may be problematic for visually impaired users. The current ratio is 1.64:1. This is consistent throughout the service where this colour has been used as the focus indicator.

Code ref(s)

Colour contrast analyst comments: “The color combination found for the link highlighting mechanism did not pass the ratio of 3:1 against adjacent colours.”

Solution

Ensure the colour contrast ratio for adjacent colour meet the minimum required ratio of 3:1.

[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 [email protected]

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 https://github.com/uswds/uswds/issues/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.