Non-Text Contrast: Icons, Focus Indicators, and the 3:1 Rule

The text on your checkout passes contrast at 4.5:1, and the scan says so. But the border of the card number field is a pale grey on white, the close button on the modal is a thin grey X, and the focus ring around the submit button is barely visible. A low-vision user cannot see where to type, what to close, or where they are.

What 1.4.11 covers that 1.4.3 does not

Success Criterion 1.4.11, Non-text Contrast, arrived with WCAG 2.1 and it is the criterion most teams have never heard of. It requires a contrast ratio of at least 3:1 for the visual information needed to identify user interface components and states, and for parts of graphics needed to understand content. That means input borders, checkbox fills, toggle states, icons that carry meaning on their own, and focus indicators. Text contrast is 1.4.3 at 4.5:1. Non-text contrast is the separate rule for everything that is not text.

The exemptions matter. Inactive components are exempt, so a greyed-out disabled button does not have to pass. Logos are exempt. Pure decoration is exempt. What is not exempt is anything a user has to see to operate the page: the edge of the field they type in, the state of the toggle they just flipped, the ring that shows where keyboard focus sits. A border that is #E0E0E0 on white fails, and it fails on the page your text contrast check just passed.

The three places it fails most

Form fields first. A borderless input with a light grey underline looks clean in a design mock and disappears for a low-vision user. The fix is a border that clears 3:1 against the page background, measured with a contrast checker, not by eye. Placeholder text is not exempt, and it is usually the lowest-contrast text on the page, so do not rely on it to identify the field.

Focus indicators second. The default browser outline is often 2:1 or worse on a white background, and teams that remove the outline for aesthetics and replace it with nothing have removed the only signal a keyboard user has. A focus ring has to clear 3:1 against both the component and the page behind it. Our post on zoom and text size, Zoom to 200 Percent: What Breaks When Text Gets Bigger, covers the sibling problem of layout at larger text.

Meaningful icons third. A close X, a warning triangle, a status dot: if the icon is the only thing communicating the meaning, its contrast has to clear 3:1. Icons paired with text are covered by the text contrast rule, but an icon standing alone is a graphical object under 1.4.11. Chart series are the same: five pastel slices that only differ by color fail, because color is the only thing separating them.

How to measure it without guessing

Open the WebAIM Contrast Checker or your browser inspector and measure the border color against the adjacent background, not against the field fill. For a focus ring, measure the ring against both the component it surrounds and the page behind it. For a toggle, measure each state separately: the on state and the off state can pass or fail independently, and a toggle that only changes color between states fails twice, once for contrast and once for relying on color alone.

Fix at the component level, not page by page. The input border, the icon button, and the focus ring are each defined once in the theme, and fixing the component fixes every page that uses it. The audit that finds forty 1.4.11 failures is usually finding four components, and that is a better afternoon than it looks. The comparison that frames the whole standard is Section 508 vs WCAG 2.1: What Federal Buyers Actually Ask For.

Frequently asked questions

What contrast ratio does non-text contrast require?

At least 3:1 against adjacent colors, for user interface components, their states, and graphical objects needed to understand content. Text still needs 4.5:1 under 1.4.3.

Are disabled buttons exempt from non-text contrast?

Yes. Inactive components are explicitly exempt from 1.4.11. But a control that looks disabled and low-contrast yet is actually operable is a real failure, not an exemption.

Does the focus indicator have to meet 3:1?

Yes. The focus ring must reach 3:1 against adjacent colors, and in practice it needs to clear that bar against both the component it surrounds and the page behind it.

What about icons next to text labels?

An icon paired with a text label is covered by the text contrast rule. An icon standing alone, carrying meaning by itself, is a graphical object under 1.4.11 and needs 3:1.