1.4.11 Non-text Contrast

Level AA · added in WCAG 2.1

The visual parts you need to identify controls, their states, and key parts of graphics must have at least 3:1 contrast against adjacent colors.

Who it helps

People with low vision need to see where a text field is, whether a checkbox is checked, and what has focus. Faint borders and pale icons can make controls invisible to them.

How to meet it

Give form field borders, or whatever identifies the field, at least 3:1 contrast against the background, for example #767676 on white (4.54:1).
Make sure meaningful icons, such as a search or close icon without text, have at least 3:1 against their background.
Make focus indicators and state cues, such as a checked checkbox or a selected tab, at least 3:1 against adjacent colors.
In charts, give the lines, bars and segments that carry meaning 3:1 contrast against the background. Where segments touch, separate them with borders.
Two exceptions apply: disabled (inactive) components, and browser-default controls whose look you have not changed.
A button with a text label does not need a high-contrast background or border if the text itself identifies it; the text falls under 1.4.3.

Examples

Fails:A text input border of #ccc on #fff is 1.61:1, below 3:1

input[type="text"] {
  background: #fff;
  border: 1px solid #ccc;
}

Fails:The default focus outline is replaced with a pale ring: #e0e0e0 on #fff is 1.32:1

button:focus {
  outline: none;
  box-shadow: 0 0 0 2px #e0e0e0;
}

Passes:A darker border: #767676 on #fff is 4.54:1

input[type="text"] {
  background: #fff;
  border: 1px solid #767676;
}

Passes:A solid focus outline: #1a5fb4 on #fff is 6.29:1

button:focus-visible {
  outline: 2px solid #1a5fb4;
  outline-offset: 2px;
}

Can a scanner detect this?

axe-core has no rule for non-text contrast. Deciding which borders, icons and graphic parts matter takes human judgment. Check each component, in each state, with a color contrast checker.

No automated rule tests this criterion. Check it by hand.

Common mistakes

Using a light gray border such as #ddd on white for text inputs, which is about 1.4:1.
Removing the browser's focus outline and replacing it with a faint color change.
Showing a toggle's on and off states with two similar colors that differ by less than 3:1.
Testing a chart's colors only against the background, not against neighboring segments that touch.

Official W3C explanation of 1.4.11

Check your own page

See which automated WCAG checks your page fails, with the failing elements and how to fix them.

Reviewed November 2, 2026