1.4.11 Non-text Contrast

WCAG 2.2 · 1.4.11 AA Perceivable

What it requires

Visual information needed to identify user-interface components and their states, and meaningful parts of graphics, must have a contrast ratio of at least 3:1 against adjacent colours. This covers two things:

  • UI components — the visual boundary or indicator that lets you find and operate a control: a button edge, a text-input border, the checked tick of a checkbox, a focus ring, the track and thumb of a toggle. Only the part needed to perceive the control and its state must meet 3:1, not the whole component.
  • Graphical objects — parts of icons, charts, and diagrams that you must see to understand the content (for example, the lines in a line chart or the shape of a meaningful icon).

Pure decoration, inactive (disabled) controls, and parts under author control that convey no information are exempt. This criterion is about non-text contrast; text and images of text are covered by 1.4.3 instead.

When boundaries and indicators are too faint, people with low vision or moderately reduced contrast sensitivity — including many older users — cannot tell where a field begins, whether a checkbox is ticked, or which element has focus. Users in bright ambient light or on low-quality or dimmed displays are affected the same way. The result is missed controls, data-entry errors, and an inability to track keyboard position.

How to detect it

Manual and tooling checks
Check How
Control boundaries Sample the border/background of buttons, inputs, and selects with a colour picker; verify ≥ 3:1. Watch for borderless inputs that rely on a faint fill.
States Check checked/selected/error/expanded indicators — the tick, dot, or coloured outline that distinguishes a state must reach 3:1.
Focus indicator Tab through the page; the focus ring must contrast ≥ 3:1 with its background (also relevant to 1.4.11 alongside 2.4.7 / 2.4.13).
Graphics Inspect icons, chart lines, and data points that carry meaning against their adjacent colours.
Automated tools Limited. axe and similar reliably catch text contrast (1.4.3) but cannot judge which graphical parts are meaningful, so 1.4.11 needs manual review.

How to fix it

  1. Give every input and button a visible boundary that meets 3:1 against its background — a border, a distinct fill, or both.
  2. Make state indicators (ticks, focus rings, selected states) reach 3:1; don't rely on a subtle colour shift alone.
  3. Strengthen meaningful icon and chart colours; pair colour with shape or pattern.
  4. Re-test in each theme (light, dark, high-contrast) — a value that passes in one can fail in another.
<input
  type="text"
  id="email"
  /* visible 3:1 border, not a faint fill */
  style="border: 1px solid #595959; background: #fff;">

Copy-paste tests

Automated coverage

There is no fully automated axe-core rule that confirms 1.4.11. Contrast of UI components and graphical objects depends on visual intent, so this criterion needs manual review using the console check and steps below.

Run this in the browser console

console-1.4.11.js 
// Read-only: surfaces likely non-text-contrast suspects for human review.
const suspects = [...document.querySelectorAll(
  'input,select,textarea,button,[role=button],a,svg,hr,[class*=icon],[class*=border]'
)];
console.table(suspects.map(el => {
  const s = getComputedStyle(el);
  return {
    tag: el.tagName.toLowerCase(),
    border: s.borderColor + ' / ' + s.borderWidth,
    outline: s.outlineColor + ' / ' + s.outlineStyle,
    fill: s.fill,
    bg: s.backgroundColor,
    text: (el.textContent || '').trim().slice(0, 20)
  };
}));
suspects.forEach(el => { el.style.outline = '2px dashed magenta'; });
console.log('Review the', suspects.length, 'outlined elements for >= 3:1 contrast.');

What to check manually: confirm each control's boundary (border, focus indicator, or state change) actually reaches 3:1 against its adjacent background, and that meaningful parts of icons and graphics needed to understand them meet 3:1 too. No script can judge which visual edges are required for understanding.