Level AAWCAG 2.1

1.4.11 Non-text Contrast

The visual presentation of user interface components and graphical objects has a contrast ratio of at least 3:1 against adjacent color(s), except where a specific presentation is essential or already governed by another requirement.

Last reviewed: September 9, 2026

Understanding 1.4.11

Text contrast rules alone don't help users with low vision perceive interactive controls, icons, or informational graphics that carry no text, such as form field borders, checkbox outlines, or chart segments. This criterion extends minimum contrast protection to those non-text visual elements so users can identify where controls are and what state they're in.

How to Meet It

Ensure the boundaries of active UI components (button borders, input outlines, custom checkboxes and toggles) have at least 3:1 contrast against their immediate background in both their default and focus/active states, and give meaningful graphical objects (icons that convey information, chart lines and segments) the same 3:1 ratio against adjacent colors. Purely decorative graphics and disabled controls are exempt.

Code Examples

INCORRECT

.text-input {
  border: 1px solid #cccccc; /* ~1.6:1 against white - fails */
  background: #ffffff;
}

CORRECT

.text-input {
  border: 1px solid #767676; /* ~4.5:1 against white - passes */
  background: #ffffff;
}

Frequently Asked Questions

Does this apply to disabled buttons?

No. WCAG explicitly exempts inactive or disabled user interface components, since they are not currently operable and their reduced visual prominence is often an intentional signal of that state.

Do keyboard focus indicators need to meet this too?

Yes. A visible focus indicator is itself a UI-component state, so the outline or highlight used to show keyboard focus needs at least 3:1 contrast against the adjacent background. This overlaps with the Focus Appearance criteria introduced in WCAG 2.2.

Related Success Criteria

1.4.1 Use of Color 1.4.2 Audio Control 1.4.3 Contrast (Minimum)1.4.4 Resize Text

Quick Facts

Criterion1.4.11
LevelAA
IntroducedWCAG 2.1

Automate Compliance

AccessiSight automatically scans and identifies 1.4.11 issues in your codebase.

Try Scanner Free