WCAG 1.4.11 Non-text Contrast

Success criterion 1.4.11 makes sure people with low vision can see the parts of a page they need to use and understand: where a form field is, what an icon shows, which option is selected, where keyboard focus is. It was added in WCAG 2.1, is level AA and part of EN 301 549 (clause 9.1.4.11).

What the criterion requires

The visual presentation of the following must have a contrast ratio of at least 3:1 against adjacent colour(s):

• User interface components: the visual information needed to identify a component and its states — the border of a text field, the outline of a checkbox, the check mark itself, the indicator of the selected tab, the focus indicator;
• Graphical objects: the parts of graphics needed to understand the content — the lines and bars of a chart, the parts of an icon that carry meaning.

Exceptions:

• inactive components (for example a disabled button);
• components whose appearance is determined by the browser and not modified by the author;
• graphics where a particular presentation is essential (for example a photograph or a heat map, where changing the colours would change the information).

Text is not covered here — it falls under 1.4.3.

Typical failures on an online shop

• light grey borders on input fields (#ddd on white is well below 3:1) with no other cue;
• custom checkboxes, radio buttons and size selectors whose selected state is a pale tint;
• icon-only buttons (search, cart, wishlist) in a light brand colour;
• a custom focus ring in a light colour, or outline: none with a barely visible replacement;
• star ratings with pale empty stars and slightly darker full stars;
• chart lines in the account dashboard that are too light against the background.

How to check it

Automated: no automated rule in our checker maps to this criterion. axe-core measures text contrast, but it cannot identify which borders, icons or states are needed to understand a component. This needs a manual check.

By hand: for each form field, button, icon and state (default, hover, focus, selected, error), take the colour of the essential part and the colour next to it, and measure them in a contrast checker. The ratio must be at least 3:1. Tab through the page to check every focus indicator.

How to fix it

• Darken input borders and icon colours in the theme until they reach 3:1 against the background.
• Show selected states with a clear border, check mark or fill, not only a pale tint.
• Use a focus indicator with at least 3:1 contrast against the adjacent colours, for example a 2 px dark outline with an offset.
• Add direct labels or patterns to charts if the colours cannot all reach 3:1.

Related criteria

• 1.4.3 Contrast (Minimum) — 4.5:1 for text.
• 1.4.1 Use of Color — colour must not be the only cue.
• Contrast checker — measure two colours.

Frequently asked questions

Do form field borders need 3:1 contrast?

If the border is the only visual cue that shows where the field is, yes: it needs 3:1 against the adjacent colour. A field with a clearly contrasting background fill can rely on that instead.

Do disabled buttons need 3:1 contrast?

No. Inactive (disabled) user interface components are exempt, as are controls whose look comes from the browser and was not changed by the author.

Does 1.4.11 apply to icons?

Yes, if the icon is needed to understand the content or to identify a control — for example a cart, search or close icon without a text label. Purely decorative icons are not covered.

Can an automated tool check non-text contrast?

Not reliably. Our checker measures text contrast, but borders, icons, focus rings and chart parts need to be checked by hand with a contrast checker.