• Success Criterion 1.4.3
  • Conformance level AA

Large Heading Text That Still Falls Below 3:1 Contrast

1.4.3 — Contrast (Minimum)

Scenario

Setting

A university's online course catalog

What’s wrong

Large text (≥24px / ≥18.66px bold) below 3:1.

Example 

h2.course-title { color: #a3a3a3; background: #ffffff; font-size: 28px; }
<!-- large text but only about 2.3:1, still under the 3:1 minimum for large text -->

Why it matters

A prospective student scanning course titles to compare programs struggles to tell where one heading ends and the page background begins.

How to test

Measure text at or above 24px (or 18.66px/14pt bold) against its background: it needs at least 3:1.

How to fix

Darken large headings to at least 3:1 (roughly 4.1:1 here); "large" doesn't exempt text from every contrast rule.

h2.course-title { color: #6b7280; background: #ffffff; font-size: 28px; }

Outcome

The student scans a dozen course titles quickly and picks three worth reading in full.

Who is affected

Low-vision users and anyone browsing on a low-brightness screen or in daylight glare.

Learn more

Related scenarios