1.4.11 Non-text Contrast
Published
0
min read
This covers the visual parts of interactive elements and any graphic needed to understand the content. It was added in WCAG 2.1 and sits at Level AA.
What this actually covers
This is broader than most designers expect. It's not just icons.
Icons that convey meaning - navigation, status indicators, action icons, icon-only buttons. If removing the icon would lose information, it needs 3:1.
Input field borders. The outline that tells users where a text input is. If your input is only distinguishable from the background by its border, that border needs 3:1. Light grey borders (#CCCCCC) on white (#FFFFFF) give you 1.6:1 - well below the threshold.
Checkboxes and radio buttons. The visual boundary that identifies the control, in both checked and unchecked states.
Toggle switches. The track, the thumb, and any state indicators. Users need to identify the component and tell which state it's in.
Focus indicators. The outline or highlight showing which element has keyboard focus.
Button boundaries. If a button is distinguished from the background by its border or fill colour (not just its text label), that visual boundary needs 3:1.
Charts and data visualisations. Individual bars, lines, segments, and data points that users need to distinguish.
Custom controls. Sliders, steppers, progress bars, tabs - any component where the visual design is what tells users it's interactive.
What's exempt
Decorative graphics that don't convey information. Inactive/disabled controls. Browser or OS default controls you haven't styled. Logos and brand marks, which the W3C treats as essential to their meaning.
That logo exemption has a limit. If you choose to show a logo with low contrast, for example faded until someone hovers over it, the W3C says it is not exempt.
Text is covered separately by 1.4.3 and 1.4.6, not by this criterion.
Why 3:1 and not 4.5:1
Non-text elements are usually simpler shapes than letterforms - a border, a filled region, an icon. Simpler shapes are easier to perceive at lower contrast. 3:1 is the ISO 9241-3 baseline for normal vision. Text contrast adds a 1.5x multiplier for moderate vision loss, but non-text elements don't need that extra factor because the shapes are less detailed.
3:1 is still a floor, not a target. If you can exceed it, your controls will be easier to spot for everyone.
Things to watch for
State changes. A checkbox that passes in its unchecked state might break in its checked state. Test every interactive state: default, hover, active, focus, selected, error.
Colour-only state indicators. A toggle that changes from grey to green doesn't help colour-blind users if both states have similar luminance against the background. The difference needs to work through brightness, not just hue.
Subtle input fields. Borderless inputs or inputs with very light borders are a common failure. If the border is the only visual cue that an input exists, it has to pass 3:1. A lot of "modern" form designs break here.
Icon colour on hover/active states. Icons that change colour on interaction still need 3:1 in every state. A hover state that lightens an icon on a light background can drop below the threshold.
In Perception
Perception detects icon elements automatically and tests their contrast alongside text in every scan. In version 1.4.2, larger graphics and logos are not tested.
For complex backgrounds, Perception uses dominant colour detection to test against what users actually see.
Pro users can change the icon detection size, which is 64px by default. Anything larger counts as a graphic and is left out of the scan, reducing noise in design system work.
Sources
Related
1.4.3 Contrast (Minimum) - 4.5:1 for text at Level AA.
1.4.6 Contrast (Enhanced) - 7:1 for text at Level AAA.
Text size - Why font size affects readability and when Perception flags small text.