Fix legibility of links on light blue

[CharlotteDowns]

What

Fix known issue with legibility of normal link blue when used on light blue background.

Why

To make the text more legible and to make the contrast similar to what it was before the colour changes.

Who needs to work on this

Designer, developer

Who needs to review this

Designer, accessibility specialist

Done when

• Choose a colour value from the new palette
• Review solution against accessibility criteria
• Identify options to move forward
• Gain consensus from the wider team of which option we collectively favour
• Share our preference and other options with the community for review
• Communicate colour choice with other squads

[CharlotteDowns]

For the Service navigation component we used a 10% shade of GOV.UK Brand colour: #1d70b8 for links on the light grey background (now light blue).

Although #1d70b8 passes all WCAG criteria for contrast we used APCA as an enhanced method to detect usability issues with legibility of the font at different weights.

However, in the new brand proposal the Blue shade 25% is the closest available colour to the 10% shade we were using. This provides improved contrast for 'Link to background' contrast but fails for 'Link to body text' contrast.

However as we use an underline to distinguish the link this provides the visual distinction, outside of contrast, to allow a user to know that this is a link alongside body text.

[CharlotteDowns]

@selfthinker shared a colour accessibility reference sheet to help with determining which WCAG criteria would inhibit us from moving forward with a colour.

[CharlotteDowns]

Deciding on which squad will make the changes to the system once we confirm the whole of this squad is happy with the approach.

Kerb ball

The Service navigation component doesn't use underlines when the navigation items are links and the component has the capability for non link items to be present in #0b0c0c alongside link items.

As a result we have to consider other options to not cause a WCAG non-compliance issue:

Option 1

Revert link colour back to #1d70b8 in spite of conflicting user feedback about legibility

Option 2

Underline links in all cases on 95% tint backgrounds

Option 3

Ask the brand team for a 10% shade of the brand blue (#1a65a6)

Option 4

Solve this with guidance. Ask users not to add non-link navigation items

Option 5

Deprecate non-link text being available alongside links

Update: I have scheduled a post to the team's main channel to go out at 9am on the 6 Nov 25 with a request for thoughts

[CharlotteDowns]

We have the OK from the Brand team to add Blue Shade 10% to our palette (Option 3) as long as this gets reflected in the Brand Guidelines v1.1.

Note: we also need to communicate how we've changed the web palette to meet our needs back to the brand team via a document (to do, create a new issue and Google document)

[CharlotteDowns]

Team consensus from slack voting exercise and thread.

Option 4 received 3 votes
Option 5 received 3 votes
Option 2 received 1 vote

[CharlotteDowns]

Message drafted to share with the community:

Links on light blue backgrounds - Our decision
We have been reviewing the colours of links on light blue backgrounds, for example, in the Cookie banner and Service navigation component to improve legibility.

Currently we use a 10% shade of the GOV.UK primary blue (link colour) on the Service navigation component. Our intent as part of Fix legibility of links on light blue #6376 is to apply this same method to other light blue background components.

[calvin-lau-sig7]

@ImranH-GDS has scheduled this to post to the community either 14 Nov or week commencing 17 Nov.