Skip to main content

The WCAG Primer is intended for use by the UK cross government accessibility community.

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:

Selected radio button
Four radio buttons showing UK countries. Wales is selected.

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.

Search box
A dark grey search field on a darker grey background.

Low contrast focus indicator

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

Orange focus indicator
Password field surrounded by an orange border on a white background.