improve contrast of non-text component styling

[anandamaryon1]

What

We've received the following feedback from an accessibility audit (nhsuk/nhsuk-frontend#927):

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

This issue should look at improving the contrast of the contents list dashed but also consider other similar components. For example the breadcrumbs and table components.

Why

Improving the contrast will enhance the readability and therefore usability of some of our components that contain non-text elements with low contrast. Particularly for users with low vision.

Other information to support your proposal

Related to:

• Contents list #25
• Breadcrumbs #6
• Table #26
• Summary list #36
• Mini hub #86