nhsuk/nhsuk-frontend

Link vs body text colour contrast

hiten-livi opened this issue · 1 comments

Bug Report

What is the issue?

An accessibility audit of our site has flagged the following non-compliance with WCAG Level A: 1.4.1 Use of Colour.
The contrast ratio of Links ($nhsuk-link-color) to Body Text (#212b32) is 2.26:1

WCAG Success Criterion
Success Criterion 1.4.1 Use of Colour (Level A): Colour is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element.

WCAG Sufficient technique
G183: Using a contrast ratio of 3:1 with surrounding text and providing additional visual cues on hover for links or controls where color alone is used to identify them

What steps are required to reproduce the issue?

Go to any site that uses links, e.g.:
https://www.nhs.uk/

What was the environment where this issue occurred?

Can be observed on all desktop devices including macOS Sonoma and Windows 11.

Is there anything else you think would be useful in recreating the issue?

This is a core NHS style component; flagging this issue for your consideration

Hi @hiten-livi thank you for sharing your findings.

The link text is distinguished by an underline and therefore doesn't rely solely on colour to communicate that it's a link. Our link stying has been through a number of accessibility audits before and passed.

I've copied your comment over to our issue on typography styling (nhsuk/nhsuk-service-manual-community-backlog#1) to make sure we're monitoring this.