Color Contrast and Accessibility (WCAG Basics)
Enough contrast between text and background keeps content readable for everyone. Learn the WCAG contrast ratios and how to check your colors.
Color contrast is the difference in brightness between text and its background; enough contrast keeps text readable, including for people with low vision. Accessibility guidelines set minimum ratios you should meet.
The WCAG ratios
Contrast is expressed as a ratio from 1:1 (none) to 21:1 (black on white):
- 4.5:1 — the minimum for normal body text (AA)
- 3:1 — the minimum for large text (about 24px, or 18.66px bold)
- 7:1 — the stricter AAA level for body text
Why it matters
Low-contrast text — light grey on white, or thin colored text — is hard to read on phones, in sunlight, or for the millions of people with visual impairments. Good contrast also helps everyone in bad lighting.
Practical tips
Don't rely on color alone to convey meaning (add labels or icons), test text over images, and check both light and dark themes.
Check your colors
Compare foreground and background values with the color converter while you tune them. Choosing a scheme? See How to create a color palette.