Colour contrast issue with blue links on white or light grey

[selfthinker]

This issue is from the accessibility audit of the Design System website by DAC in July 2024.

DAC's description

• Page: Type scale – GOV.UK Design System
• WCAG reference: 1.4.6 Contrast (Enhanced) (Level AAA)
• Issue ID: DAC_Colour_Contrast_Text_01 and DAC_Colour_Contrast_Text_02

Blue on light grey

The colour contrast on the blue link text against the grey background failed to meet the expected ratio to pass WCAG 2.2 AAA. The expected ratio for colour contrast with text should be at least 7:1, however the colour contrast ratio for text within this element is 4.87:1. This may be problematic for visually impaired users.

Foreground: #1D70B8
Background: #F8F8F8
Font Size: 19px
Ratio: 4.87:1

Current code:

<p class="govuk-body">
  Read the <a href="https://github.com/alphagov/govuk-frontend/releases/tag/v5.4.1" class="govuk-link">full release notes</a> to see what’s changed.
</p>

Blue on white

The colour contrast on the blue link text against the white background failed to meet the expected ratio to pass WCAG 2.2 AAA. The expected ratio for colour contrast with text should be at least 7:1, however the colour contrast ratio for text within this element is 5.17:1. This may be problematic for visually impaired users.

Foreground: #1D70B8
Background: #FFFFFF
Font Size: 19px
Ratio: 5.17:1

Current code:

<p class="govuk-body">
  The GOV.UK Design System helps teams that work on government services follow the <a class="govuk-link" href="https://www.gov.uk/guidance/government-design-principles">Government Design Principles</a> and <a class="govuk-link" href="https://www.gov.uk/service-manual">GOV.UK Service
Manual</a>.
  This website also follows the <a class="govuk-link" href="https://www.gov.uk/guidance/style-guide">style guide</a> and <a class="govuk-link" href="https://www.gov.uk/guidance/content-design">content design guidance</a> used by GOV.UK.
</p>

DAC's proposed solution

For sites to meet AAA, they must comply with WCAG 2.2 checkpoint 1.4.6 for colour contrast.
As far as contrast ratio is concerned, it must at least be:

1. if text is not bold and its size is less than 18pt/24px/1.5em/150%: 7:1 for AAA level
2. if text is not bold and its size is at least 18pt/24px/1.5em/150%: 4.5:1 for AAA level
3. if text is bold and its size is less than 14pt/19px/1.2em/118%: 7:1 for AAA level
4. if text is bold and its size is at least 14pt/19px/1.2em/118%: 4.5:1 for AAA level

Thoughts on solution

This is a known issue (see links under 'related issues').
Making the link colour darker would mean it's harder to distinguish from the surrounding text, which is also an accessibility issue. For that reason we have previously never "fixed" this.

Due to potential upcoming work on colours, we should revisit that decision then.
Related to that, we had checked all of our colour combinations against the upcoming WCAG 3 APCA calculation. That would be worth sharing with the people working on said project.

Related issues

• Links on grey have low colour contrast govuk_publishing_components#3862
• Problems with New Transport font for vision impaired users govuk-frontend#2755
• Typography govuk-design-system-backlog#64 (comment)

Additional instances

Blue links on white are the standard, so happen on all pages. Blue links on grey only happen sometimes.
If we wanted to fix this, we'd need to check under which circumstances links can be on light grey and fix all of those instances.

Needed roles

Designer

[selfthinker]

We have decided not to do anything about this at the moment because we plan to work on colours in general soon as part of an upcoming project. As part of that project we will keep this and other colour considerations (like APCA) in mind.