WCAG AA Contrast for Large Text (3:1)
Learn the WCAG 2.1 AA large text contrast requirement of 3:1. Understand what qualifies as large text and how this lower threshold affects heading and display text design.
Detailed Explanation
WCAG AA Large Text Requirement
Large text in WCAG has a lower contrast requirement of 3:1 for Level AA compliance. This reduced threshold exists because larger text has wider strokes that are inherently easier to read, even at lower contrast ratios.
What Counts as Large Text?
WCAG defines large text as:
- 24px (18pt) or larger at regular (400) weight
- 18.66px (14pt) or larger at bold (700) weight
In practice, most developers round 18.66px to 18px bold as the threshold.
Practical Examples
/* These only need 3:1 contrast */
h1 { font-size: 32px; font-weight: 400; } /* Large text */
h2 { font-size: 24px; font-weight: 400; } /* Large text */
h3 { font-size: 20px; font-weight: 700; } /* Large text (bold) */
.subtitle { font-size: 18px; font-weight: 700; } /* Large text (bold) */
/* These need 4.5:1 contrast */
p { font-size: 16px; font-weight: 400; } /* Normal text */
.caption { font-size: 14px; font-weight: 400; } /* Normal text */
.label { font-size: 18px; font-weight: 400; } /* Normal text (not bold, under 24px) */
Colors That Pass 3:1 but Fail 4.5:1
These colors work for headings but not body text:
| Foreground | Background | Ratio |
|---|---|---|
#6b7280 |
#ffffff |
5.03:1 |
#8b5cf6 |
#ffffff |
4.25:1 |
#9ca3af |
#ffffff |
2.88:1 |
#0ea5e9 |
#ffffff |
3.36:1 |
Common Mistake
A common accessibility error is using a color that passes for headings (3:1) but then applying the same color to body text or labels where 4.5:1 is required. Always verify the contrast ratio against the specific text size and weight.
Use Case
Apply the 3:1 threshold when designing headings, hero text, display typography, and any bold text at 18px or larger. Ensure smaller text at the same color still meets the 4.5:1 requirement.