WCAG 2.2 - Success Criterion
1.4.11 Non-text Contrast
Description
The visual presentation of user interface components and graphical objects must have a contrast ratio of at least 3:1 against adjacent colors. This applies to the visual boundaries and states of interactive elements such as buttons, form inputs, checkboxes, radio buttons, and focus indicators, as well as to meaningful parts of icons and charts. Low-vision users who do not rely on screen readers need sufficient contrast to see and identify interactive elements and understand data visualizations.
How To Test
- Identify all user interface components: buttons, text inputs, checkboxes, radio buttons, select menus, sliders, and custom controls.
- For each component, identify the visual boundary or indicator that marks its presence (e.g., border, background, icon).
- Use a contrast checking tool to measure the contrast ratio of that boundary against its adjacent color.
- Verify the ratio meets or exceeds 3:1.
- Check each interactive state: default, hover, focus, active, and error - all states must independently meet the threshold.
- Identify meaningful graphical objects such as chart segments, graph lines, and informational icons, and check their contrast.
- Pay specific attention to focus indicators, which are required to meet 3:1 under this criterion (and have additional requirements under 2.4.11 Focus Appearance in WCAG 2.2).
Testing Tools
- Color Contrast Analyser (CCA) — Free desktop app. Download from GitHub, install, use the eyedropper tool to measure contrast ratios on the demo. Read the ratio value and compare to AA (4.5:1) or AAA (7:1) standards.
- Lighthouse — Built into Chrome DevTools. Open DevTools (F12), go to Lighthouse tab, select "Accessibility", and run the audit. Review contrast violations and pass criteria in the results.
- axe DevTools — Browser extension for Chrome/Firefox. Install from official page, open DevTools, go to axe tab, run scan, and see detailed contrast violations with remediation advice.
Demo
UI controls use border: 1px solid #d0d0d0 - contrast ratio 1.54:1 against white. Users with low vision may not see the control boundary at all.
Same controls use border: 2px solid #767676 - contrast ratio 4.54:1 against white. The control boundary is clearly perceivable.
Code
Buttons use outline: 1px solid #f0f0f0 on white background - contrast ratio 1.08:1. When focused via keyboard Tab, the outline is nearly invisible.
Try tabbing through the buttons - the focus indicator is nearly imperceptible.
Buttons use outline: 3px solid #ffb81c on white background - contrast ratio 8.21:1. When focused via keyboard, the outline is immediately obvious.
Tab through the buttons - the focus outline is clearly visible and keyboard navigation is easy to follow.
Code
Icon buttons using light gray on white — contrast ratios 1.3–2.3:1. Found in 10 real-world audits (close buttons, menu icons, navigation arrows).
Same icons using darker colors — contrast ratio 4.5:1+. Clearly visible to all users.
Code
Custom radio buttons using #F1F1F3 border on white — contrast 1.13:1. Found in real-world checkout payment option audits.
Radio borders at 1.13:1 — virtually invisible. Users can't see which options exist.
Native radio inputs with accent-color — browser defaults meet contrast. Border visible at 3:1+.
Native radio inputs have built-in contrast. Use accent-color to brand while keeping accessibility.
Code
Fail Explanation
A failure occurs when a user interface component or graphical object does not achieve a 3:1 contrast ratio against its adjacent background. Common failures include text input borders that are too light against a white background (such as a very light grey border), custom checkboxes or radio buttons styled without sufficient contrast, icons used as controls whose graphical parts do not meet the threshold, and chart data elements (such as bars or lines) that do not contrast sufficiently against the chart background. Focus indicators - the visible outline shown when a component has keyboard focus - are also covered and frequently fail.
Pass Explanation
A passing implementation ensures that the visual boundaries of interactive components, their states (default, hover, focus, error), and meaningful graphical objects all meet the 3:1 contrast ratio requirement. Form fields have borders or other boundary indicators that are clearly distinguishable from the page background. Custom controls are designed with contrast-aware colors. Icons that convey information are checked against their backgrounds. Focus indicators are sufficiently thick and high-contrast to be visible.
Notes
This criterion was added in WCAG 2.1. It does not apply to disabled components, logos, or graphical elements that are purely decorative. The 3:1 threshold for non-text elements is lower than the 4.5:1 minimum for normal text, reflecting the generally larger size and simpler shapes of UI components compared to text glyphs.
Techniques
WCAG techniques used in this demo: G195, G207, G209
Suggested Solutions & References
Curated from 46 real-world audit findings and official WCAG guidance.
Official W3C / WAI
- Understanding SC 1.4.11: Non-text Contrast
- Technique G207: Ensuring 3:1 contrast for icons
- Technique G209: Sufficient contrast at UI component boundaries
- Technique G195: Using author-supplied visible focus indicator
Guides
- Sara Soueidan: A Guide to Designing Accessible Focus Indicators
- Smashing: Accessible Text Over Images