1.4.11 Non-text Contrast

Level: AA | Principle: Perceivable | Since: WCAG 2.1 | Automation: Manual

What This Means

User interface components (buttons, form inputs, focus indicators) and meaningful graphical objects (icons, chart segments) must have at least a 3:1 contrast ratio against adjacent colors. Without sufficient contrast, users may not perceive interactive elements or understand visual information.

This applies to the visual boundary or state indicator of a component, not the text within it (text contrast is covered by 1.4.3).

Who This Affects

Users with low vision — may not see low-contrast borders, icons, or focus rings
Older adults — contrast sensitivity declines with age
Users with color vision deficiency — some color combinations are indistinguishable
Everyone in poor lighting conditions — low contrast UI disappears in bright sunlight

Common Pitfalls

1. Form inputs with no visible border

/* Bad: light gray border on white = ~1.5:1 ratio */
input {
  border: 1px solid #ccc;
  background: #fff;
}

/* Good: darker border = 3:1+ ratio */
input {
  border: 1px solid #767676;
  background: #fff;
}

2. Custom checkboxes with insufficient contrast

<!-- Bad: light blue checkbox on white background -->
<span class="checkbox" style="border: 2px solid #aad4ff;"></span>

<!-- Good: sufficient contrast border -->
<span class="checkbox" style="border: 2px solid #0057a8;"></span>

3. Icons conveying meaning without enough contrast

<!-- Bad: light gray icon on white -->
<svg fill="#bbb" aria-label="Warning">...</svg>

<!-- Good: sufficient contrast -->
<svg fill="#6d6d6d" aria-label="Warning">...</svg>

4. Focus indicator too faint

/* Bad: barely visible focus ring */
button:focus {
  outline: 2px solid #d0d0d0;
}

/* Good: clearly visible focus ring */
button:focus {
  outline: 2px solid #0050b3;
}

How to Fix

Ensure all UI component boundaries meet 3:1

/* Good: button with sufficient contrast border and background */
.btn {
  background: #0066cc;
  color: #fff;
  border: none;
  padding: 0.5rem 1rem;
}

/* Good: input with visible boundary */
.input {
  border: 1px solid #595959;
  border-radius: 4px;
  padding: 0.5rem;
}

Chart segments need distinguishable contrast

<!-- Good: use patterns in addition to color for chart segments -->
<svg>
  <rect fill="#0066cc" />
  <rect fill="#cc6600" />
  <!-- Each fill contrasts 3:1+ against the white background -->
</svg>

How to Test

Identify all UI components (buttons, form inputs, toggles, checkboxes, sliders) and meaningful graphical objects (icons, chart segments).
Open DevTools (F12) and use the eyedropper tool to sample the component's border or fill color and the adjacent background color.
Calculate the contrast ratio between the two colors using the DevTools color picker or a contrast calculator. The minimum is 3:1.
Check focus indicators, selected states, and hover states for sufficient contrast as well.
Inspect icons that convey meaning (warning, success, navigation) for 3:1 contrast against their background.
Pass: All UI component boundaries, meaningful icons, and graphical objects have at least a 3:1 contrast ratio against adjacent colors.
Fail: Any button border, form input boundary, focus ring, or meaningful icon falls below 3:1 contrast against its background.

axe-core Rules

No automated axe-core rules. This criterion requires manual testing.

Tools

Check your UI component colors with the A11y Scan Contrast Checker — the 3:1 ratio for non-text elements uses the AA Large Text threshold.