alphagov / govuk-design-system-backlog

GOV.UK Design System Community Backlog
31 stars 2 forks source link

Colour #38

Open govuk-design-system opened 6 years ago

govuk-design-system commented 6 years ago

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

timpaul commented 6 years ago

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

owenm6 commented 6 years ago

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 commented 6 years ago

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 commented 6 years ago

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

joelanman commented 6 years ago

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 commented 6 years ago

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 commented 6 years ago

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 commented 6 years ago

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

fofr commented 6 years ago

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 commented 5 years ago

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 commented 5 years ago

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

benchilds commented 5 years ago

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.

36degrees commented 5 years ago

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

36degrees commented 5 years ago

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

peteryates commented 5 years ago

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:

Screenshot 2019-07-23 at 12 36 55

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 commented 5 years ago

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 commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

The NHS design system uses a pale grey background because:

(NHS design system colour page)

jlarmstrongiv commented 2 years ago

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

image

joelanman commented 2 years ago

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

jlarmstrongiv commented 2 years ago

@joelanman sure, here is a previous discussion on the topic https://github.com/uswds/uswds/issues/2255 I’m curious what you think

querkmachine commented 2 years ago

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.