New colour palette - we want your input, how are you using govuk-colour("light-grey") #f3f2f1

[CharlotteDowns]

We are working on introducing more of the updated colour palette to our components.

About this work

We have already updated some components to adopt Blue Tint 95% RGB 244 248 251 #F4F8FB instead of govuk-colour("light-grey") #f3f2f1, these include:

• Cookie banner
• GOV.UK footer
• Service navigation

We are currently reviewing components that use govuk-colour("light-grey") #f3f2f1 to establish whether there is a strong rationale to update them to Blue Tint 95%.

Components that we are reviewing include:

• Accordion - hover state
• Button - secondary button
• File upload - improved component
• Pagination - hover state
• Summary list - card titles
• Tabs - non selected tab
• Task list - hover state
• Text input - prefix and suffix

What we're looking for

We're currently looking for:

• examples of things in your services that use govuk-colour("light-grey") #f3f2f1: screenshots, prototypes, links to live services
• review of our affected components with the new colour applied
• proposals for a strategy of when to use and when not to use Blue Tint 95% RGB 244 248 251 #F4F8FB

Other ways you can give feedback

• If you’d prefer to give feedback to the Design System team by email
• If you'd prefer to give feedback via the #govuk-design-system or by DM-ing me on UK Government Digital slack

[CharlotteDowns]

Accordion - hover state

govuk-colour("light-grey") #f3f2f1	Blue Tint 95% RGB 244 248 251 #F4F8FB

[CharlotteDowns]

Button - secondary button

govuk-colour("light-grey") #f3f2f1	Blue Tint 95% RGB 244 248 251 #F4F8FB

In context with Primary button (note: updated colours for Primary buttons are still being worked on)

govuk-colour("light-grey") #f3f2f1	Blue Tint 95% RGB 244 248 251 #F4F8FB

[CharlotteDowns]

File upload - improved component

govuk-colour("light-grey") #f3f2f1	Blue Tint 95% RGB 244 248 251 #F4F8FB

[CharlotteDowns]

I've made a suggestion to the Blue tint 95% example about what a light blue secondary button might look on hover too.

[adamsilver]

Do you think the button on the right is harder to spot now that it has the same colour as the "no file chosen" box above?

[armstrongb]

... I suppose rounded corners in this instance would give some differential cues to button vs drop area but it would be pretty light but I agree, matching tints here isn't helpful.

[CharlotteDowns]

Pagination - hover state

govuk-colour("light-grey") #f3f2f1	Blue Tint 95% RGB 244 248 251 #F4F8FB

[CharlotteDowns]

Summary list - card titles

govuk-colour("light-grey") #f3f2f1	Blue Tint 95% RGB 244 248 251 #F4F8FB

[CharlotteDowns]

Tabs - non selected tab

govuk-colour("light-grey") #f3f2f1	Blue Tint 95% RGB 244 248 251 #F4F8FB

[CharlotteDowns]

Task list - hover state

govuk-colour("light-grey") #f3f2f1	Blue Tint 95% RGB 244 248 251 #F4F8FB

[selfthinker]

Is the hover state missing for the #f3f2f1 version?

[CharlotteDowns]

@selfthinker changed, thank you

[CharlotteDowns]

Text input - prefix and suffix

govuk-colour("light-grey") #f3f2f1	Blue Tint 95% RGB 244 248 251 #F4F8FB

[CharlotteDowns]

General comments from Slack

Is there a distinction to be made between it's usage as a background e.g. the cookie banner background and something that has interaction e.g. the secondary button or showing hover state?

Thats [the changes are] really hard to see for me (am colour blind)

For me personally the blue is less visible than the grey for demarcating the bounds or state of the controls - it just fades into the white.

[DannyPayne-CH]

Given the light-blue (1.07:1) has a reduced contrast against white then the existing grey (1.12:1), is there not a risk that we are potentially making some of the UI less distinguishable, and therefore less accessible to users? In the majority of the instances above (tabs, pagination, secondary button) the new UI looks harder to see than the old, which feels like a step backwards.

[armstrongb]

It would be nice if as part of this work in adopting the light blue we could make the secondary button more defined but I think that is to deviate from the blue-95.

[charlesrt]

As per Slack, really interesting challenge to tackle.

Tinting really removes saturation from a colour and in this instance has the unintended consequence of reducing its lightness which will make it harder for people to see relative to white (calculators may vary but I think it's 1.06:1 compared to the light grey at 1.11:1) which might be losing sight of 'this is for everyone'.

As this rolls out further the palettes application will also be quite muted which might not have the same impact of differentiation the refresh is aiming for.

If at all possible it would be really interesting to see what can be achieved with a more nuanced adjustment to colour which might be less programatic in approach but could yield improved results.

For example, only increasing the lightness of the $govuk-brand-colour to 95% respects and maintains the saturation whilst achieving a similar contrast relative to white (I make it 1.12:1). I've attached an example for visibility.

I'd be interested to see how something like this works across components as a replacement for "light-grey" but when it comes to these things it'll likely require a lot of fine tuning of the entire palette to create a harmonious colour system that scales.

If there's a way to get more involved I'd love to.

[DannyPayne-CH]

Great suggestion. I saw a video a few years ago by James Sullivan that talked about developing accessible colour palettes (https://www.youtube.com/watch?v=ZDjCO9gmlzY) that's really worth a watch if you've not seen it.

It explains how he discovered that using the LAB colour space instead of HEX, RGB or HSL allowed him to make a direct correlation between the lightness value and the WCAG colour contrast ratio. (apparently the lightness in LAB behaves differently to the lightness in HSL. No idea why.)

So, if we wanted to ensure that the new palette had the same colour contrast values as the last palette, we could achieve this by converting to the LAB colour space and aligning the Lightness values (effectively what you've done above, Charles, but using LAB instead of HSL)

[timothystock]

Inclined to agree on this, as with others - that the 95% tint needs revising to something that maintains a workable level of contrast with its surroundings - and a 95% tint struggles on a white background. The suggestion(s) here seem a good idea for moving forward.

[CharlotteDowns]

Some examples in our components library follow
Some tables: https://components.publishing.service.gov.uk/component-guide/table
Print link hover: https://components.publishing.service.gov.uk/component-guide/print_link
Some email signup callouts: https://components.publishing.service.gov.uk/component-guide/signup_link
Devolved nations callout: https://components.publishing.service.gov.uk/component-guide/devolved_nations
Hover states on some subscription buttons: https://components.publishing.service.gov.uk/component-guide/subscription_links
Step by step headers: https://components.publishing.service.gov.uk/component-guide/step_by_step_nav_header
Intervention callouts: https://components.publishing.service.gov.uk/component-guide/intervention
Some share links: https://components.publishing.service.gov.uk/component-guide/share_links/with_square_icons_and_flexbox/preview

[murrlipp]

When services are not hosted on GOV.UK, the guidance is to not use GOV.UK headers or footers. I believe most departments (MOJ, DWP, HO off the top of my head) have created their own headers and/or footers to account for this. As such, there are (presumably) a lot of services out there that don't heavily feature the new, blue branding, so as not to appear as though they are hosted on GOV.UK.

My concern would be that the current govuk-colour("light-grey") is neutral, and feels cohesive when used with a variety of different header/footer/brand colours across departments. If it's changed to a light blue across all of these services, it could:

1. weaken the distinction that blue = GOV.UK
2. create styling conflicts in existing services

This would be the case across multiple departments and potentially cause a lot of work for people to make whatever changes they feel necessary to make their services/products look more cohesive again.

[CharlotteDowns]

Good point, thank you for raising that context.

[martinwake]

At DWP we had exactly this issue when the new footer rolled out, because our in-house footer component inherited its colour from the GOV.UK component. We hadn't previously specified a colour for non-GOVUK services: it was basically "GOVUK footer minus coat of arms and copyright notice".

However people working on internal services began coming to us and asking why their footers had changed colour. So we had to make a choice of following GOV.UK (even for non-govuk services), along with any future colour changes, or isolating our internal service components from the GOV.UK branding and making a choice on colour. We did the second one, and wrote it up here and here.

[jonhurrell]

Just echoing the contrast issues that are already raised here, and the wider context use of govuk components, for non-gov domain services. It'd be great if this change goes through, you allow an easy reassignment of the colour value (decouple the colour from the var naming, to a more scoped brand value name abstraction).

The agents screens/devices we've seen at DWP are so washed with badly calibrated colour profiles, that the light blue will be less perceivable than the almost imperceptible light grey we have now.

[CharlotteDowns]

I’ve had a rough count. I reckon there’s about 7 things we use light grey for on Notify. I reckon 2 might work with a light blue instead.

There’s also some places where we’ve kept something similar to the old light grey, because the current one doesn’t have enough contrast in my opinion. Selected examples

Example of light grey used as-is, probably wouldn’t move to blue

Having looked at it I think this kind of thing (a placeholder for content that’s loading) still makes more sense in grey, rather than blue

[robertdeniszczyc2]

I've run through the screenshots on this thread on a lower-spec monitor and compared with a higher spec "retina" display.

With the colour setting on the low spec monitor set to 11500K, the Blue Tint 95% becomes invisible, especially on the buttons.

It cannot be assumed all users are viewing GOVUK on a high end retina-level display, and there will be users with lower spec monitors with less dynamic colour range. A device such as a lower spec monitor coupled with potential colour blindness and/or visual impairments makes this change a severe regression in usability.

If the background of a footer looks to be the same colour as the main page content background it's not ideal, but for a button, anything actionable, or important this could cause usability issues for the service.

[CharlotteDowns]

Thank you for doing this investigation @robertdeniszczyc2, it's really useful

[CharlotteDowns]

Next steps

Thanks to all that helped us build a rationale and position on using Blue Tint 95% RGB 244 248 251 #F4F8FB instead of govuk-colour("light-grey") #f3f2f1.

Our decision

Based on feedback, particularly those that raise that it makes components harder to use outside of the brand context, we have made the decision to not apply the Blue Tint 95% RGB 244 248 251 #F4F8FB to anymore of our components at this stage.

The light grey (although still very light) seems to be easier to distinguish than the light blue against white. We could introduce complimentary border styles like we do with the Service navigation component and Cookie banner component but in most of these instances that would not improve the design and give more affordance to things we want to step back in the design.