- 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
border: 1px solid #dcdcdc; /* icon outline, ~1.2:1 against white */Why it matters
Low-vision and color-blind people who need to perceive controls and meaningful graphics.
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. border: 1px solid #767676; /* ~4.5:1 */ Icons, borders, and other non-text UI elements need at least 3:1 contrast to stay visible.
Outcome
On a university's online course catalog, this barrier is gone for low-vision and color-blind people who need to perceive controls and meaningful graphics — they reach the same outcome without extra effort.
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