Define a Home Office colour palette

[LaurencePiercy]

We are designing numerous services which use colour.

We need colour to distinguish between different categories and actions. This helps our users to understand these categories or actions.

To enable the design community to establish a consistent and accessible colour palette, please add examples below.

We are looking for examples which demonstrate the range and uses of colours in Home Office services.

If you are unable to screenshot your service, please add examples of the colours with a non-disclosing narrative description to help us understand the design rationale for colour use.

[LaurencePiercy]

#291

[guermanc]

Discussion on colour should hopefully help up address #351

[LaurencePiercy]

Just consolidating a little:

• Background colour
• The colour of features (like radios and text boxes). These are currently white, background is grey.
• Tab colours (contrast with background and other features)
• Alert box colours (contrast with background and other features)
• Error colours (contrast with background and other features)
• Links (contrast with coloured components, like tab and alert)

[isobelseacombe]

I would add buttons to this colour review. We need secondary buttons that have the right level of contrast on the Home Office grey background (see #291)

[isobelseacombe]

• Colour contrast of hint text on the grey background

[danibergho]

Entity Search (DSA) Colour usage examples

• Colour used in data tables, to help users search through and identify information they wish to further investigate
• Components with colour used include tags, labelling and error messages
• We have seen in research that use of colour has helped our users to navigate through large quantities of information to find key characteristics or important features they are looking for

Examples:

1. Presenting characteristics on information cards using tags, example below as shown on design system: https://design-system.service.gov.uk/components/tag/

We chose to use these tags as it allowed us to seperate out the characteristics from the rest of the information, and highlight the information to users.
.

2. Error messages within drop down

Grey box used to seperate nested content, and error message therefore shown on the grey background in red. Red chosen to highlight the error that the user needs to investigate. In this example, blue is also used for the hyperlink button to fix this error.

.

3. Presenting severity levels of harm types:

Colours used: red #d4351c, orange #f47738, yellow #ffdd00.
Colours chosen as research showed users understood these to represent severity levels and easily understood red to show higher level of harm, so high priority to investigate.
Text labels were also used for each harm level to allow wider range of users who may not be able to understand colour labels to make use of them.

[LaurencePiercy]

Just to confirm, background colour for the service is white?

[danibergho]

Yes background is white for the page, but there is some drop down content contained within a grey box

[elliot-butler-ho]

A couple of component designs with improved accessible colours exist in our styles and components figma file, including the secondary button #291 and labels / tags #43 . Although looks like these tag / labels designs were removed from the design system itself?

[LaurencePiercy]

Yes, they were removed from our design system because they were superseded by the gov.uk tags (as per Dani's example above). I think tags are back in scope for this review, because of the contrast issues we have against a grey background. (which is specific to our HO context)

[elliot-butler-ho]

In Manage Asylum Claim, I've also been looking at a tag colour to replace the existing grey from the GOV.UK design system https://design-system.service.gov.uk/components/tag/. We have two tag states (where a document is either submitted or not submitted). To replace the grey, I opted for a white background with 1px black border, which is based on one of the tag designs in Home Office figma file.

[LaurencePiercy]

#43

[Richard592]

Laurence,

There is a related discussion to colour use on the Alerts component that Ounie, Ananda and I have contributed here: #358
Essentially the tint colours fail accessibility when used in conjunction with the HO grey background and when links are presented within them.

Generally for me colour is 'less is more' for all good accessibility reasons and should only be supplementing the design presentation and not the only means of communicating information. There is also a consistency element between GOV.UK and HO palettes that needs to be maintained where practical.

There was a fair amount of colour usage within the Callisto project before I left it, so hopefully that team will contribute some useful insights too.

[mikieet6]

Hi there, these are the colours we've been using on the ASL project. We use them on the tag components to highlight the status of various things in lists. The badges might contain different text based on the context, but the colours are used to indicate these themes:

• Positive: Things that are completed with a positive outcome
• Neutral: Things that are still in progress/incomplete
• Negative: Things that are resolved with a negative outcome
• Changed: Things that have been changed since the previous submission
• Comment: Things that have had new comments added since the previous submission

[willrichards]

This is the current state of tags in the Central Operations Platform. At present only the top three (dark-grey, white, dark-blue) are planned to be used. We need to review all other tags now that we have changed from the GOV.UK design system to the Home Office design system.

[guermanc]

Accessibility of Tags

Colour

• Colour can be used on tags, but only if the text also supports the meaning conveyed by that colour. You cannot change the text of a tag and rely on colour to designate a category or severity, for example.

However, if the tags do not require a user to accurately perceive a specific colour, you may use colour as a category and change the text within it, as long as:

• the colour of the tag has a contrast ratio of 3:1 against all other tag colours, as this counts as an alternative visual distinction
• the colour of the tag has a contrast ratio of 3:1 against the adjacent page background colour
• the colour of the text within the tag has a contrast ratio of 4.5:1 or 3:1 for large scale text against the tag colour
• the meaning of the tag colour can be programmatically determined, that is, available for assistive technologies such as screen readers

Sizing

• users should be able to resize text up to 200% without any problems, such as truncated text or overlap with other content
• users should be able to magnify the page up to 400% and tags will reflow correctly and not add horizontal scrolling
• no loss of content or functionality happens when a user changes line height, letter or word spacing

Position and styling

• the visual presentation of tags matches the programmatic implementation, so that someone using a screen readers or removing CSS encounters tags alongside whatever content they are supposed to be tagging

Additional considerations

Things that are not WCAG failures but should be considered:

• when considering progressive enhancement, tags should still make sense with the CSS switched off
• some screen readers may interpret all capital text as being an acronym, and read out each individual letter
• ensure that you use clear and understandable content

[isobelseacombe]

Work in progress in the design system working group:

• Developing content to explain the design decisions for the grey background
• Reviewing the consistency and accessibility of colours on published styles and components on the design system

To do:

• Develop a colour palette for Home Office Design system that works on the grey background and aligns with the GOV.UK colour palette
• Update existing components with the agreed colour palette
• Update Figma design system file with the agreed colour palette

[tomyems]

I'd like to propose changing the hint text grey from 505a5f to 4e505f. This will increase the contrast with the page background from 6.26 (505a5f) to 7.05 (4e505f), and therefore meet WCAG 2.1 AAA.

Current:

Proposed:

I'd also like to propose changing the error message red from d4351c to a1151c. This will increase the contrast with the page background from 4.30 (d4351c) to 7.04 (aa1151c), and therefore meet WCAG 2.1 AAA.

Current:

Proposed:

[tomyems]

We can achieve AA compliance by just shifting the red component from 212 to 205 (that is from d4351c to cd351c). This is very low risk. There's some concern about the darker red not being perceptible in low contrast environments.

The change is (almost) imperceptible :)

[tomyems]

Deadline for response to changing the red to cd351c is 19 January.

[FlorrieA]

Hi there! On the new red, would cd351c be the new red for all instances going forward where red is used in Home Office services, or just in instances where it is used on error messages?? Thank you

[tomyems]

Good question, where were you expecting to use it? CD351C achieved 4.5 contrast with the light grey background, which was the reason behind changing it.

The other reds in the design system say for alerts and expandable banners are different anyway. They also have a different context, as they are backgrounds with text on top of it, and will be reviewed separately.

[FlorrieA]

Thanks @tomyems. It's for a banner and an alert so it sounds like moving to CD351C on these perhaps isn't appropriate at this point. I'll use the GOV.UK red (and any other shades in GOV.UK Design System) where text is on top of it or we have a white background but use CD351C for error messages on a grey background in that case, but let me know if you'd suggest otherwise.

[Richard592]

So, was there push back on A70000? I'm happy with the very low risk move to CD351C if it improves contrast. Go go go.

[tomyems]

I believe CD351C is lower risk than A70000. There's less change to the colour. I was a bit worried about making the green and blue components 0. Keeping the green and blue components also means there's less change to the red component to achieve sufficient contrast.

[andymarshall-35]

Appreciate I'm over a year late to the party, but raising this issue again, in case the newer APCA guidelines has any place to revisit this one (see below comment - #355 (comment) )

[larab-codes]

Findings related to the use of tinted backgrounds in an enterprise system.

About the system

The system supports a range of users all with different requirements, many of them are on it for the majority of their working day.
The system is not based on either the Home Office or the Gov.uk design system, however, it is slowly moving towards the Gov.uk one.
Ultimately, that means the interface background is pure white, with black text. Many users report that they suffer eye strain as a result. Dyslexic users are worse affected by the stark black on white text as it causes the text to 'dance', making it even harder to read and digest it. It is estimated that as much as 10% of the general population experience some degree of dyslexia.

Users also struggled with understanding the page hierarchy. As part of their job, they need to consider and view vast amounts of information, often across multiple systems. To help with this we introduced 'overview' screens that collated information from different areas of the system onto one screen. We provided several ways to customise their view, accordions, filters and content areas bounded by background tints - all of which tested well in usability testing.

Background tints

The addition of the background tints helped by

• Grouping related information
• Making scanning the page easier
• Reinforcing with accordions were open (the tinted background content was revealed when they were open) and which were not
• Softening the stark black and white 'dancing text' issue for dyslexic users
• Addressing some of the eye strain issues

The proposed design shows part of the screen, the filters are shown, and the first accordion is closed but the subsequent two are open. The revealed content is grouped with tinted backgrounds. Most content is blue, but on certain complex summaries, there is also a yellow section showing further information.

Response

The overall response to the proposed design was positive in usability research, with users saying that it made their job easier. We tested with users a range of users, some of whom said they had dyslexia.
Dyslexic users also told us that a tinted background of any colour helped them with the 'dancing text' issue. But it's worth noting that a lot of dyslexic users choose peach as their preferred background colour. The colours proposed in our design worked better with the existing colour scheme and were also effective.
It is however best practice to allow users to customise their own technology, so try to make sure your solution is compatible with the tools your users have access to. In our case, the system did not allow them to customise their view without complicated workarounds.

[tomyems]

Purple

The Home Office has updated it's purple to #723382, so the design system should follow suit.

[tomyems]

P.S. there is an internal DDaT purple which is currently #8F23B3 (the current one published) we believe that this has remained and not been updated when the Home Office purple was updated to #723382 in 2021.

[andymarshall-35]

Is there any merit in reviewing the Home Office colour palette against the APCA guidelines?
I appreciate the need to pass WCAG2.2 AA / AAA compliance, but as I understand it, APCA offers a more realistic approach to colour contrast / readability (plus, future proofs us for WCAG3).
It also offers more granular success criteria for contrast ratios based on the text size and weight, as well as picking up on some false positives that the standard contrast ratios miss.
(It also distinguishes between foreground vs background colours (ie dark on light is not the same as light on dark) not presenting the same, but I don't imagine this is so important as we don't have an implemented dark mode)

For anyone who's not familiar with APCA, start here - https://ruitina.com/apca-accessible-colour-contrast/
More info / testing tools here - https://www.myndex.com/APCA/
Clearer testing tool here - https://www.achecks.org/apca-wcag-3-accessible-colour-contrast-checker/

Using the above example of the revised red error color:
.govuk-body (19px on small and large screens, and 400 weight) for the proposed revised red used for errors (#CD351C) on the HO light grey, doesn't pass:

whereas the alternative #A70000 does pass at that size and weight:

Unless theres a good reason we're not adopting APCA at this stage of course - still very new here!

[tomyems]

We haven't actually implemented the change yet #489 - to be honest this was a quick fix, to reduce friction with testing to at least meet AA. The colour palette needs some closer attention and more detailed work.

[andymarshall-35]

Fair enough - a quick fix is still better than nothing!

The APCA tools aren't that easy to use, and not widely adopted in plugins / extensions yet, so running the colour palette thru this won't be a quick task, but definitely worthwhile if / when we do have a proper review of the colour palette.
I've also been looking at the X-Gov Dark Mode topic (alphagov/govuk-design-system-backlog#177) that may or may not become relevant to this task, as the whole dark text on light bg vs light text on dark bg can be tested too.

[mollyhayne1]

Styling of GOV.UK tabs

Component: https://design-system.service.gov.uk/components/tabs/

Do we have a colour palate we can apply to tabs used in an internal system? I've noticed the styling of the GOV.UK tabs component is consistent with HO styling when using the #F5F5F5 background. There is a low contrast with the inactive tabs, and a white background on the active tab.

Example:

I’ve seen some internal services using this GOV.UK styling, but others have used override classes to adapt it. On our internal caseworking service we have used override classes to:

• remove the white background
• make the background color of inactive tabs darker (#cbcbcb)

Example:

We want to make sure our designs are consistent with other internal services across the Home Office. Do we have any standard override classes / styling that we can apply to ensure this?