WCAG Non-text Contrast (UI Components & Graphics)

Success Criterion 1.4.11 covers everything that is not text — buttons, icons, focus indicators, charts. The threshold is 3:1.

Last updated: May 2026

At a glance

Threshold: 3:1
Applies to: UI component boundaries, focus indicators, graphical objects
Exempt: Decorative graphics, inactive components, content under user control
Common failure: 1px borders that disappear at low contrast

Success Criterion 1.4.11 — Non-text Contrast was added in WCAG 2.1 to cover everything that conveys meaning *without* being text: form-field borders, button outlines, focus rings, toggle states, chart bars, and icons that carry information. The threshold is 3:1, and this is the criterion that fails most often in real-world audits.

What "UI component" means

A UI component is any element a user interacts with — buttons, links, inputs, sliders, switches, tabs. The criterion applies to the *boundaries* that identify the component as interactive: input borders, button outlines, slider thumbs.

It does not apply to internal decoration (hover halos, ripple effects) unless those decorations are the only thing conveying state.

Focus indicators are non-text

A keyboard focus ring must hit 3:1 against the background. The browser default outline (Chrome’s 2-pixel ring) is generally fine on white but routinely fails on colored surfaces. If you outline: none and replace it, your replacement must meet 3:1.

WCAG 2.2 added SC 2.4.13 (Focus Appearance) which goes further — focus rings must be at least 2 CSS pixels thick and have 3:1 contrast against both the focused element and its background. This is even stricter than 1.4.11 alone.

Charts and infographics

When a chart distinguishes data series by color alone, those colors need 3:1 contrast against each other (and against the chart background). Adding patterns, labels, or shape variation provides redundant encoding for color-blind users — but the 3:1 rule still applies to the colors.

Frequently asked questions

Does the rule apply to placeholder text?

Placeholder text is *text* and falls under 1.4.3 (4.5:1 for AA). The 3:1 non-text rule covers the input *border*, not the placeholder.

What about icons inside buttons?

If the icon is the only thing identifying the action, it must meet 3:1 against its background. Icons paired with a text label are typically considered decorative — the text is what conveys meaning.

How do I check focus-ring contrast?

Trigger focus on the element, sample the ring color, then check against both the surface inside the focused element and the surrounding page background. The contrast checker above handles this — paste the ring hex against the lower-contrast of the two surfaces.