1.4.11 Non-text Contrast (AA)
What WCAG says:
“The visual presentation of [user interface components and graphics] have a contrast ratio of at least 3:1 against adjacent colours” (with exceptions)
Understanding 1.4.11 Non-text Contrast
What this means
Important visual information that is not text (for example, form controls, icons and charts) needs a contrast ratio of at least 3:1 with its surroundings. This applies unless:
- the style is a default for the browser or device, or
- it is “essential” that the information is presented with low contrast
Why it matters
People with visual impairments may not be able to see graphical information with poor contrast.
What to check
Check that any important information not conveyed through text has a contrast ratio of at least 3:1 against its surroundings.
For a colour generated using the page’s code, the colour is likely to be findable using your browser’s developer tools. Otherwise, colours can be checked using a colour picker tool such as Colour Contrast Analyser. It is best to test this criterion manually as it is not covered by most common automated test tools.
How to test in detail for 1.4.11 Non-text contrast
Good example
The selected state of radio buttons on the GOV.UK Design System uses a large black spot on a white background, making it very clear to see:

Common mistakes
Low contrast form field
The following form field is difficult to see. A form field should be clearly identified by using a high contrast border or by having a different enough colour to its surroundings.

Low contrast focus indicator
An orange focus indicator on a white page has insufficient contrast to be able to see it easily.

Related success criteria
- 1.4.1 Use of Colour covers elements being identified by colour alone.
- 1.4.3 Contrast (Minimum) covers the contrast of text.
- 2.4.7 Focus Visible covers focus indicators being visible, but 1.4.11 Non-text Contrast determines how visible they should be.
Useful links
- Understanding 1.4.11 Non-text Contrast has several visual examples of good and bad practice.
- WebAim Contrast Checker is a free online tool that can be used for checking contrast.