1.4.11 Non-text Contrast
Visual parts of controls and meaningful graphics need a contrast ratio of at least 3:1 against adjacent colours.
Level AAPrinciple 1: Perceivable
What does it mean?
Users need to see where a control is and what state it is in. Borders of form fields, checkboxes, focus indicators, and icons that act as buttons need at least 3:1 contrast against the colours next to them. The same applies to parts of graphics that are needed to understand them, such as lines in a chart.
Exceptions: inactive (disabled) controls, controls whose appearance is left entirely to the browser, and graphics where the specific presentation is essential, such as logos, photos or heat maps. A control whose text label alone identifies it may not need a visible border at all.
Who does it help?
- People with low vision
- People with colour vision deficiency
- Keyboard users who need to see the focus indicator
- Older people
Common failures
- Light grey input borders that are almost invisible on white
- A focus outline removed or replaced by a faint colour change
- Checkboxes or toggles whose on and off states differ only by a low-contrast colour
- Chart lines or icons in pale colours on a white background
How we test it
- evidence Evidence: our scanner collects material such as screenshots, lists and measurements.
Test question: Borders of inputs, icons, focus indicators and chart parts at least 3:1 against their background.
A person decides every criterion. No criterion ever passes automatically.
How to fix it
input { border: 1px solid #cccccc; background: #ffffff; }
button:focus { outline: none; }input { border: 2px solid #767676; background: #ffffff; }
:focus-visible { outline: 3px solid #1a5fb4; outline-offset: 2px; }#cccccc on white is only 1.61:1; #767676 on white is 4.54:1, and the #1a5fb4 focus outline on white is 6.29:1, both above the 3:1 minimum.
Practical tips
- Never remove the focus outline without replacing it with something at least as visible.
Guides and patterns on this
- Contrast that everyone can readPale grey text may look refined, but many people struggle to read it, and on a phone in bright sunlight everybody does. Here are the ratios WCAG 2.2 sets and how to lock them into your design.
- TabsOne panel of several, arrow keys switch between tabs.
- CarouselPause button, previous/next, slide labels, no forced autoplay.
Official source
How does your website do on this criterion?
The free check tests your home page automatically; the audit decides all 55 criteria.