- Success Criterion 1.4.11
- Conformance level AA
1.4.11 · Non-text Contrast
Lesson overview · Non-text Contrast
In plain language
Controls and meaningful graphics (input borders, icons, focus outlines, chart lines) need 3:1 contrast against what's next to them.
Who it affects
Low-vision and color-blind people who need to perceive controls and meaningful graphics.
How to check
Use a contrast checker on input borders, checkboxes, icons, focus outlines, toggles, chart elements — including hover/checked/selected states.
Common misconception
People assume 1.4.3's text contrast rules cover everything. This is a separate rule for non-text elements, borders, icons, focus outlines, that has its own, lower 3:1 threshold.
Learn more
Scenarios in this lesson
- Focus Outline Removed With No Replacement Indicator
- Input Field Border With Contrast Too Low to See
- Checkbox or Radio Outline Too Faint When Unchecked
- Toggle Switch States Too Similar in Color to Tell Apart
- Focus Indicator Present but Below the Contrast Minimum
- Icon-Only Button Glyph With Contrast Too Low to See
- Star Rating Icons Where Filled and Empty Look Too Similar
- Chart Lines or Pie Slices With Contrast Too Low to See
- Slider Track or Progress Bar With Too-Low Contrast
- Selected-State Marker Too Faint to Notice
- Custom Scrollbar With Contrast Too Low to Locate
- Error Icon or Asterisk With Contrast Too Low to See
- Ghost Button on a Photo With Contrast Below the Minimum
- Dropdown Caret or Control Icon Invisible Against Its Background
- Map or Drawing Tool Controls With Too-Low Contrast
- Carousel Dots With Contrast Too Low to Distinguish
- Hover or Pressed State That Drops Below Contrast Minimum
- Focus Indicator on a Gradient Falling Below Contrast Minimum
- Underline or Divider Line With Contrast Too Low to See