Non-text contrast quiz
Non-text contrast practice
Swipe right if it passes WCAG, left if it fails. Or use the buttons or your arrow keys.
The rule in plain words
WCAG 1.4.11 Non-text Contrast
People need to see a control to use it. The parts that identify a control, and its state, need enough contrast against what is next to them.
That covers text field borders, checkbox and radio outlines, switch tracks, icon-only buttons and meaningful parts of charts.
| What | Needs |
|---|---|
| Visual boundary or state of a control | 3:1 |
| Meaningful graphics like icons and chart lines | 3:1 |
Exceptions people miss
- Disabled and other inactive controls.
- Controls whose look comes from the browser and was not changed by the site.
- Boundaries that are not needed to find the control, like a button that is already clear from its text label.
Common mistakes
- Hairline field borders like #E5E7EB on white, about 1.2:1.
- Borderless fields with a fill that is barely darker than the page.
- Pale off state switch tracks that make the switch disappear.
- Light gray icons on icon-only buttons.
Your turn
Is your own site accessible or not?
Axeazy scans your real pages for WCAG issues like the ones in this deck and opens code fixes, not an overlay. Free scan in 60 seconds, no credit card.
Questions
Non-text contrast, answered
Do input fields need a border?
They need something people can see. A border, an underline or a fill works, as long as it reaches 3:1 against the surrounding background.
Does 1.4.11 apply to icons?
Yes, when the icon is needed to understand the content or the control, like an icon-only Share button.
Does placeholder text count as a field boundary?
No. The field itself must be visible. Placeholder text is a separate text contrast question under 1.4.3.