WCAG 1.4.11 Non-text Contrast — Testing Guide

WCAG 1.4.11 Non-text Contrast (Level AA) extends contrast requirements beyond text. UI components (buttons, form borders, focus indicators) and graphical objects essential for understanding must have

WCAG 1.4.11 Non-text Contrast (Level AA) extends contrast requirements beyond text. UI components (buttons, form borders, focus indicators) and graphical objects essential for understanding must have 3:1 contrast against adjacent colors. It catches the visual elements that 1.4.3 (text contrast) misses.

What 1.4.11 requires

3:1 minimum contrast ratio for:

1. User interface components: button boundaries, form field borders, focus indicators, state indicators (checked/unchecked)
2. Graphical objects: icons and visual elements that convey information

Exceptions:

• Decorative elements (no information)
• Components for which the specific appearance is essential (brand logos)
• Components inactive (disabled) — though still good practice
• Elements with flat visual design where color-only distinguishing is essential and no other AA-compliant design is available

Common violations

1. Flat-design buttons

Borderless button with text on colored background. The button itself has no boundary. Component invisible to low-vision user.

Fix: Border, subtle shadow, or background change on hover/focus. 3:1 against page background.

2. Form field with only bottom border

Material design minimalist. Bottom border is 1px, light gray on white. Fails 3:1.

Fix: Darker border. Or full border on focus.

3. Focus indicator too similar to surrounding

Focus ring is light blue on light background. Fails.

Fix: High-contrast focus. Outline-style, 2-3px, 3:1+ against adjacent.

4. Checkbox / radio states

Unchecked vs checked indicator too similar. User cannot see state.

Fix: Distinct visual difference: fill, size change, explicit checkmark icon.

5. Icon-only buttons

Icon is brand color. Background is brand secondary. Icon fails 3:1 against background.

Fix: Increase contrast of icon relative to background. Or add text label.

6. Chart elements

Line chart with colored lines on white background. Lines below 3:1 against white.

Fix: Darker saturated colors. Pattern differentiation (dashed, dotted) in addition to color.

Testing

Automated

• axe-core flags non-text contrast for interactive elements
• Lighthouse accessibility audit
• Stark (design tool and browser) pre-release

Manual

• Chrome DevTools: computed color + contrast ratio for any pixel
• Colour Contrast Analyser (TPGi): sample any two pixels
• Screenshot + Pixelmator / Photoshop color picker

Fix approaches

CSS with accessible defaults

:root {
  --border-default: #4b5563;  /* 7:1 on white, passes easily */
  --border-focus: #1d4ed8;    /* 7:1, visible focus */
  --shadow-default: 0 1px 2px rgba(0,0,0,0.2);
}
button {
  border: 1px solid var(--border-default);
}
button:focus-visible {
  outline: 3px solid var(--border-focus);
  outline-offset: 2px;
}

Design system mandate

Every UI component validated against non-text contrast rule in the design system. No component approved without AA compliance.

Dark mode

Verify both themes separately. A border that passes on light may fail on dark (or vice versa).

How SUSA checks

SUSA's accessibility_user persona runs axe-core (web) or accessibility scanner (Android) on every discovered screen. Violations include:

• Buttons with low-contrast borders
• Focus indicators below 3:1
• Form fields with subtle borders
• State-distinguishing elements below 3:1

Findings include the element selector, measured ratio, suggested minimum, and screenshot.

susatest-agent test myapp.apk --persona accessibility_user --wcag-level AA

Subtle but important

1.4.11 is often missed because it is not about text. Designers pass 1.4.3 for body copy, then fail 1.4.11 for the buttons next to it. Both matter.

Low-vision users rely on visible boundaries. Make them visible.