Home WCAG

WCAG 1.4.11 Non-text Contrast

User-interface components and graphical objects required to understand the content must have a contrast ratio of at least 3:1 against adjacent colours. Level AA; the criterion that catches under-styled focus rings, icon-only buttons, and chart strokes.

Normative spec
https://www.w3.org/TR/WCAG22/#non-text-contrast
Last verified
Byline
Editorial team

What this Level AA criterion requires

A 3:1 minimum contrast ratio between two categories of non-text visual:

  1. UI components — the visible boundary of a control (button border, input border, focus ring, checkbox tick, slider track).
  2. Graphical objects — parts of an image or chart that the user needs to perceive to understand the content (a line in a chart, a callout in a diagram).

The 3:1 floor was added in WCAG 2.1 (2018) and is unchanged in 2.2. It is a floor, not a target; many design systems aim for 4.5:1 on UI boundaries to leave headroom.

Why 3:1 specifically

The 4.5:1 floor for body text in /wcag/2.2/aa/1.4.3 covers small letterforms with thin strokes. UI shapes — borders, ticks, ring outlines — are usually thicker and less ambiguous, so a lower floor suffices. The 3:1 number traces back to the WCAG 2.0 Understanding text contrast calibration: 3:1 corresponds to about 20/40 vision unaided.

What is and is not in scope

In scope:

  • Button borders and focus rings.
  • Input and select borders.
  • Checkbox and radio borders, and the tick / dot when checked.
  • Toggle/switch tracks and thumbs.
  • Tabs and accordion separators that signal which is selected.
  • Chart lines, axis ticks, legends.
  • Map markers, route lines.
  • Required-field markers (red asterisk).

Out of scope:

  • Decorative elements (a background pattern that adds no meaning).
  • Logos and brand marks (per the same exception as 1.4.3).
  • Inactive/disabled UI components, if an adjacent perceivable component conveys the same meaning.

Common failure modes

  • Light grey 1-pixel borders on white. A #E5E7EB border on white = 1.36:1; fails by a wide margin.
  • Focus ring at brand colour on a brand-coloured button. The ring may meet 4.5:1 against the background but only 1.5:1 against the button itself. The criterion checks both adjacencies.
  • Chart with gainsboro and lightgrey series. Two adjacent light-grey lines fail against each other.
  • Toggle off-state and track at the same tone. The thumb must contrast with the track; the track must contrast with the page.
  • Required-field asterisk in #FF6B6B. That tone gives about 3.0:1 on white; technically passes but stops at the boundary. Pick #D9534F or darker.

What a passing implementation looks like

A user with mild contrast sensitivity can identify every active control without squinting. Focus rings stand out on every button, link, input, and custom control under typical office lighting. Chart series are distinguishable without colour-only encoding (also a 1.4.1 Use of Color concern).

Authoring patterns

:where(button, .btn, [role="button"]) {
  border: 1px solid var(--c-fg);  /* assume --c-fg has 4.5:1 on bg */
}
:where(input, select, textarea) {
  border: 1px solid var(--c-border-strong);
}
.focus-ring:focus-visible {
  outline: 3px solid var(--c-brand-primary);
  outline-offset: 2px;
}

For charts, prefer at least two perceptual dimensions per series (line style + colour, or pattern + colour). Doubling cues helps both contrast-impaired and colour-blind users.

Verification

Automated checkers detect contrast for unambiguous border / adjacency pairs. They cannot reliably detect:

  • A border that fades into a gradient.
  • A chart line whose contrast varies along its length against a background image.
  • An icon whose meaning is implicit and can be lost without a perceivable boundary.

Manual review is required for these. About 22% of 1.4.11 violations are detectable by automated tools per the Deque axe-core docs.

The APCA-W3 prototype proposed for WCAG 3 will replace the 3:1 / 4.5:1 floors with a perceptual metric; until WCAG 3 reaches CR (target 2026), 1.4.11 remains the operative AA rule.

Forced-colors mode

In forced-colors: active (Windows High Contrast and OS equivalents), the user agent overrides author colours. Author borders may collapse; use the system colour keywords:

@media (forced-colors: active) {
  .btn { border: 2px solid CanvasText; }
  .focus-ring:focus-visible { outline-color: Highlight; }
}

About 4% of Windows users enable High Contrast at any given time (Microsoft Inclusive Design 2023 telemetry); about 12% of users with low vision use it as their primary default.

Cross-engine support

The criterion is platform-agnostic. The relevant CSS primitives — outline-color, system-colour keywords, currentColor — reached interop in 2020 across Chromium, WebKit, and Gecko.

Further reading