WCAG Success CriterionSuccess 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 techniqueG207: Ensuring that a contrast ratio of 3:1 is provided for icons
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.
What
We've received the following feedback from an accessibility audit (https://github.com/nhsuk/nhsuk-frontend/issues/927):
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: