Level AA · WCAG 2.1
1.4.11 Non-text Contrast
The parts of a control that identify it — borders, icons, focus rings, chart lines — need 3:1 contrast against what is next to them.
Partly automated Some failures are detectable, others need judgement.
How it fails in practice
An input whose border is a 1.4:1 grey, so the field is invisible against the card it sits on. A toggle whose “off” state is a pale track on white.
How to fix it
Treat control boundaries as content, not decoration. If removing the border would make the control unfindable, the border has to meet 3:1.
At a glance
- Level
- Level AA — the level EN 301 549 requires, and therefore the level the BFSG and the EAA are measured against.
- Principle
- Perceivable
- Guideline
- 1.4 Distinguishable
- Added in
- WCAG 2.1
- EN 301 549
- 9.1.4.11
- Automated check
- Partly automated
How to test it by hand
- Find every control recognised by its shape rather than its text: input borders, checkboxes, radio buttons, toggles, icon buttons — and the focus indicator.
- Measure the colour that identifies each one against the colour next to it. It needs 3:1; a text field whose only boundary is a pale grey border is the classic failure.
- Do the same for graphics that carry meaning: the lines and segments of a chart, an icon that is the only label.
- Check every state: checked and unchecked, on and off, focus, hover and error.
In code
/* 1.54:1 — the field disappears on white */
.input { border: 1px solid #d0d0d0; }
/* 1.36:1 */
.toggle[aria-checked="false"] { background: #dddddd; }/* 3.45:1 */
.input { border: 1px solid #8a8a8a; }
/* 3.45:1 */
.toggle[aria-checked="false"] { background: #8a8a8a; }Partly automated
How far an automated check gets
A tool finds some failures here and cannot see the rest. A clean automated result means the checks that exist found nothing — not that the criterion is met. This is the gap that makes a green scan look like an accessible site, and it is where the keyboard agent, the agents still in development and a human reviewer do the remaining work.
Related criteria
Other criteria under the same guideline.
Further reading
-
Contrast checker
Free color contrast checker: test text (1.4.3), icons and controls (1.4.11) and links against WCAG 2.2 – and get the nearest colour that passes.
-
Non-text contrast
UI components, their states and graphics needed to understand content must stand out at 3:1 or more against adjacent colours (WCAG 1.4.11, Level AA).
Find out which criteria your site fails
We scan up to 100 pages against WCAG 2.2 AA, send the keyboard agent through the page you name and email you the report — free, once, no strings.