• 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 

.course-link { text-decoration: none; border-bottom: 1px solid #eeeeee; }
.course-table td { border-bottom: 1px solid #f2f2f2; }

Why it matters

A student scanning the catalog can't tell which course titles are clickable links, since the underline marking them is nearly invisible.

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

Underlines and dividers that carry structural meaning need the same 3:1 minimum as any other required boundary.

.course-link { text-decoration: none; border-bottom: 1px solid #595959; }
.course-table td { border-bottom: 1px solid #bdbdbd; }

Outcome

A student can tell at a glance which course titles link out and where each table row ends.

Who is affected

Low-vision students can't distinguish linked course titles from plain text, or tell where one table row ends and the next begins.

Learn more

Related scenarios