Typography
Text Contrast
typographyaccessibilityWCAGcontrastcolor
The luminance difference between text and its background — a key accessibility requirement.
When to use
- Always — WCAG AA requires 4.5:1 for body text, 3:1 for large text
- Especially critical for secondary/muted text on dark backgrounds
- When overlaying text on images or gradients
Examples
- White text on #08090A background passes at ~21:1
- rgba(255,255,255,0.4) tertiary text — verify contrast before using
See this in the wild
Analyze a site and look for text contrast in the breakdown.
