What this criterion requires
User interface components (their boundaries and states) and graphics required to understand content must have at least 3:1 contrast against adjacent colors.
Who it helps
People with low vision who cannot find a pale input border or read a low-contrast chart.
Example: fails vs passes
input { border: 1px solid #dddddd; } /* 1.3:1 against white */input { border: 1px solid #767676; } /* 4.5:1 - comfortably over the 3:1 bar */Controls, their states and meaningful graphics need 3:1 against adjacent colors - including the focus ring.
How to meet and fix it
- Give inputs, buttons, checkboxes and focus indicators 3:1 boundaries
- Check chart lines, icons and toggle states, not only text
Common failures auditors find
- Hairline pale-grey input borders
- Icon-only buttons below 3:1
- Focus rings invisible against the background
Automated scanning catches a share of these instantly - run a free check - and a manual audit covers the judgement calls a tool cannot make.
Sources
- W3C, Understanding 1.4.11: Non-text Contrast - w3.org/WAI
- W3C, How to Meet 1.4.11 (quick reference) - w3.org/WAI/quickref
Last updated . Reviewed by the EqualWeb accessibility team.
Does your site pass 1.4.11?
Run a free automated check now, or have certified IAAP/CPWA auditors test every criterion and document the result.