Success Criteria

WCAG 1.4.11 Non-text Contrast

Success Criterion 1.4.11 requires a contrast ratio of at least 3:1 for the visual boundaries of user interface components and for graphical objects required to understand the content, against their adjacent colors. It's a Level AA criterion under Guideline 1.4 (Distinguishable), added in WCAG 2.1 — the non-text counterpart to 1.4.3's text contrast requirement.

What this covers that 1.4.3 doesn't

1.4.3 is specifically about text. This criterion fills the gap for everything else that carries visual meaning but isn't text:

• Form field borders and states — an input's outline needs enough contrast against its background to actually be perceivable as a distinct, interactive element, not just a barely-visible sliver
• Icons that convey meaning without accompanying text (a trash-can icon, a checkmark)
• Focus indicators — the outline shown when a keyboard user tabs to an element needs sufficient contrast to actually be visible
• Graph and chart elements — bars, lines, and data points needed to understand the data

What's exempt

Purely decorative graphics that don't need to be distinguished to understand the content, logos, and inactive/disabled UI components are all exempt — the same logic as 1.4.3's exemptions for incidental and decorative content.

Why this matters as much as text contrast

A beautifully-contrasted paragraph of text is no help if the "Submit" button's border is nearly invisible against the page background, or if a required field's error-state outline is too subtle to notice. This criterion exists because interface structure — knowing where one component ends and another begins, seeing that a control is focused — is just as essential to perceiving a page correctly as reading its text is, and low-vision users are affected by insufficient UI contrast in exactly the way they're affected by insufficient text contrast.

Practical guidance

Check the same way you'd check text contrast — measure the actual color values of a component's border/icon against its immediate background using a real contrast calculator, don't estimate visually. Design systems with very light, subtle borders (a common minimalist aesthetic choice) are the most frequent source of failures here.

Common questions

What is WCAG 1.4.11?

A Level AA criterion requiring at least 3:1 contrast for the visual boundaries of active UI components and for parts of graphics needed to understand content.

What does 1.4.11 apply to?

Form-field borders, button edges, focus indicators, toggle states, and meaningful icon or chart elements — not decorative graphics or inactive components.

How is 1.4.11 different from 1.4.3?

1.4.3 covers text contrast (4.5:1 / 3:1); 1.4.11 covers non-text visual elements like controls and graphics at 3:1.