Give meaningful icons 3:1 contrast
Not every graphic is in scope, and G207 says which ones are. If an icon is required to understand the content, it needs a contrast ratio of at least 3:1 against its background. The technique is written for solid-color icons on solid or gradient backgrounds. This is a sufficient technique for 1.4.11 Non-text Contrast at Level AA, scoped by W3C to the graphical-object half of that rule rather than to interface components. Two details save arguments later. On a gradient, measure against the least contrasting adjacent color first, and where part of the background falls below 3:1, treat the overlapping part of the icon as gone and check whether what remains is still recognizable. And when an icon sits inside a colored shape, the shape's contrast against the page is not the measurement. The white icon inside the orange circle is what carries the information.
How we find it in an audit
Our reviewers list the icons that carry meaning on their own, which mostly means icon-only controls and status symbols, then measure each against what sits behind it. Icons over photographs and gradients get sampled at several points. Judgment enters where a gradient makes part of an icon disappear, because the question is then whether the shape still reads.
How affected users experience it
A toolbar of pale grey icons on white is a toolbar that some people simply never see. They do not experience it as low contrast. They experience it as a feature the site does not have, so they never look for the export button and never ask why it is missing. Older readers and people with low vision lose the same controls, silently, and nobody reports it.
Passes vs. fails
Passes
The same icons at #6b6b6b on white, clearing 5:1, or placed on contrasting button surfaces that clear 3:1.
Fails
An icon-only toolbar drawn in #bbbbbb on white, around 1.9:1, so several readers will never know the export feature is there.
Other ways to satisfy this rule
6 guides on this site are filed under 1.4.11 Non-text Contrast. W3C lists this one as sufficient for that rule when used for making graphical content understandable, so the condition is part of the test rather than a footnote to it.
- C40sufficientBuild focus indicators that work on any background
- G174sufficientOffer a working switch to high-contrast view
- G195sufficientShip a clearly visible custom focus indicator
- G209sufficientSeparate adjoining chart colors with real contrast
- F78failureNever remove the keyboard focus outline with CSS
This guide is our interpretation of W3C technique G207: Ensuring that a contrast ratio of 3:1 is provided for icons. W3C publishes its techniques as guidance rather than as the standard, and says so on every one of them. The success criterion is what conformance is measured against, and a technique is one documented way to meet it.