DNM: Update GOV.UK Frontend to new colour palette

[dashouse]

GOV.UK colour palette update

Updated based on colour palette proposal from Mark Hurrell (Head of Design for GOV.UK)

• The current colour palette has been simplified to a set of core colours with specific usage
• The values of the core colours have also been updated
• Some of simplification has an effect on the design of components and core styles - for example the focus state of links have changed to always be $govuk-black on $govuk-yellow

New colour palette

// Brand colours
$govuk-blue: #1d70b8;
$govuk-green: #00703c;

// Standard palette, greys
$govuk-black: #0b0c0c;
$govuk-dark-grey: #6f777b;
$govuk-mid-grey: #b1b4b6;
$govuk-light-grey: #f3f2f1;
$govuk-white: #ffffff;

// UI colours
$govuk-red: #d4351c;
$govuk-light-blue: #5694ca;
$govuk-dark-blue: #265189;
$govuk-yellow: #ffdd00;

Visual examples in context of GOV.UK Frontend components

Preview changes

https://govuk-frontend-review-pr-611.herokuapp.com/

[dashouse]

This is a temporary change - Footer specific link colour will be updated later

[markhurrell]

just to add that the new blue has a 3.79:1 contrast with the body text colour, which means we won't need to underline blue links on white backgrounds to meet WCAG anymore
https://www.w3.org/TR/WCAG20-TECHS/G183.html

[edwardhorsford]

I have concerns with some of these changes with regards to accessibility. I'm not in favour of the changes to focus, link or error colours.

It would be good to get @aduggin's and other accessibility team members' views on the changes.

I don't think this should be merged without further discussion. If this isn't the right place to discuss the changes, let me know where and I can comment there instead.

Focus colour

This has reduced in contrast. It's gone from 1.64:1 down to 1.35:1.

What's the reasoning for changing it?

Link and error colours

Both drop the contrast a fair amount. They're just within WCAG AA, but generally more contrast is better. The lower contrast limits where these colours can be used.

Link contrast goes from 6.68:1 to 5.17:1
Error contrast goes from 7.12:1 to 4.86:1

The new link and error colours fail contrast requirements when paired with $panel-colour or many non-white backgrounds.

Example of a link used a table header:

Example from the design system:

It's unclear if the $panel-colour is also intended to change. If $govuk-light-grey is intended to replace $panel-colour, then the new link colour just works, though the error colour doesn't.

Visited links

It would be good to do some research around these. Many won't know what they mean, but some will. Is it a useful feature to these users? What do we gain by taking it away?

The changes are not so relevant for transactional services, but possibly very relevant to content-heavy / publication services.

Other changes

Glad to be moving away from the turquoise colour for the completion box. I'm slightly wary of this starting to look quite buttony though. If a service has smaller or less text, will it still work? (I suspect it's fine, but would be good to check).

Lightening the footer background seems sensible.

Focused link colours - no opinion.

Button colour - no opinion.

[NickColley]

With the visited colour being the same as the hover colour, could this cause confusion?

[joelanman]

The new focus colour looks like it has better contrast against the text, which is nice. However the contrast against the background white is lowered to 1.35:1. The old focus was 1.64:1 against white - both fail WCAG, but the new one is worse. (The new 2.1 WCAG guidance covers important graphics, as well as text).

This is a particular problem, for example, seeing that a checkbox has focus.

[markhurrell]

Hey all, overarching rationale to the changes; more contrast is better, but contrast between the background colours and text colours aren't the only factor - the text colours (black, blue, red and green) all need to have a high level of contrast from each other. At the moment, our colours have good contrast against white background, but awful contrast against each other. These changes are to fix that.

Link colour

The new link colour passes AA colour contrast against the background colours, but also passes contrast requirements against the text colour - 3:1 - which our current link colour fails. WCAG G183

The panel colour should be replaced by light-grey, so again that's fine.

Error colour

Do any of our patterns use the error colour on panels? I'm not aware that they do

Focus colour

@joelanman you're right, the colour focus colour for the checkboxes and select boxes doesn't have good contrast. I was wondering about having a sort of ghost :checked style on them when focussed

Visited colour

The previous visited colour was purple, which is definitely not an accessible difference from blue.

I'm interested in ideas for having something that is accessible - maybe using :visited::content selector to write (visited) after visited links - but I think that does need more thought and testing.

Until we've done that, having it the same colour as hover gives it a visual difference, and doesn't seem any accessible than the current visited state.

[36degrees]

I was wondering about having a sort of ghost :checked style on them when focussed

There are issues with this behaviour – unchecking a checkbox will leave the element focussed, which means you will have unchecked it but it will still appear as if it is checked (albeit in a 'ghosted' fashion) until you move the focus to another element on the page.

[joelanman]

The focus contrast issue affect other elements too - for example buttons, text inputs, upload.

I wonder if we should make our focus style just outline link text, instead of filling in the background. This would make it easier to provide a decent contrast focus style.

Is there value in filling in the background?

[joelanman]

the text colours (black, blue, red and green) all need to have a high level of contrast from each other.

I understand one case for this - if we choose to drop underlines for links in some places, then contrasting the link blue from the body text black is required.

Do we use green as a text colour? I can't think of a case myself.

Are there any other cases where it's important to contrast the text colours from each other?

[markhurrell]

Is there value in filling in the background?

my gut is its useful to make the focus style super garish, because unlike mouse or touch interactions it's not obvious where on screen the focus is. the current focus state is like a big neon highlighter! not sure an outline has the same impact

I haven't had time to dig into specific WCAG requirements for contrast. they might have more affordance (like the contrast between normal text and links not needing to be as extreme as the contrast between text and background colour)

Do we use green as a text colour? I can't think of a case myself.

true, I don't think we do. is there an issue with the green being too light though?

[dashouse]

Closing – This work will need to be redone as it was created before the frontend restructure and moving colours to sass maps.