Dashes in a Contents list have insufficient contrast

[hiten-livi]

Bug Report

What is the issue?

An accessibility audit of our site has flagged the following non-compliance with WCAG Level AA: 1.4.11 Non-text Contrast. The contrast ratio of the dashes / bullet points in a contents list (https://service-manual.nhs.uk/design-system/components/contents-list) is 1.83:1

WCAG Success Criterion Success Criterion 1.4.11 Non-text Contrast (Level AA): The visual presentation of the following have a contrast ratio of at least 3:1 against adjacent color(s): User Interface Components: Visual information required to identify user interface components and states, except for inactive components or where the appearance of the component is determined by the user agent and not modified by the author; Graphical Objects: Parts of graphics required to understand the content, except when a particular presentation of graphics is essential to the information being conveyed.

WCAG Sufficient technique G207: Ensuring that a contrast ratio of 3:1 is provided for icons

What steps are required to reproduce the issue?

Go to any site that contents lists, e.g.: https://service-manual.nhs.uk/design-system/components/contents-list

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

[anandamaryon1]

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

I've copied your comment over to a new issue on our design system backlog (https://github.com/nhsuk/nhsuk-service-manual-community-backlog/issues/508) so that we can work on this.

We agree that it'd be clearer if the dashes had better contrast to our page background. We will also need to look into other components that show a similar issue, eg. the breadcrumbs dividers.

I'll close this issue now, as we'll be tracking it in the new issue on the design system.