- Success Criterion 1.4.11
- Conformance level AA
Underline or Divider Line With Contrast Too Low to See
1.4.11 — Non-text Contrast
Scenario
Setting
A university's online course catalog
What’s wrong
Underlines, borders, and separator lines that carry required visual information (a link's underline, table or section dividers) are below 3:1 contrast — the structure they mark becomes invisible to low-vision users.
Example
A university's online course catalog shows the problem clearly: underlines, borders, and separator lines that carry required visual information (a link's underline, table or section dividers) are below 3:1 contrast — the structure they mark becomes invisible to low-vision users.
Why it matters
Low-vision and color-blind people who need to perceive controls and meaningful graphics. In this case (a university's online course catalog), they can't perceive part of the content because of how it's displayed.
How to test
Measure underlines, borders, and separator lines that carry required information (a link's underline, section dividers) against their background: 3:1 minimum.
How to fix
The visual element (border, icon, indicator, state marker) must have at least 3:1 contrast against adjacent colors in every state.
Outcome
Once corrected, a university's online course catalog lets them tell the information apart without relying on color, specifically for the “Underline or Divider Line With Contrast Too Low to See” issue on a university's online course catalog.
Who is affected
Low-vision and color-blind people who need to perceive controls and meaningful graphics.
Learn more
- Understanding Understanding document (opens in a new tab)
Related scenarios
- 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