About 1 in 4 adults has some kind of vision impairment, and everyone struggles to read light grey text on a phone in sunlight. Good contrast makes your design easier for every reader.
What the numbers mean
Contrast is measured as a ratio from 1:1 (same color) to 21:1 (black on white). The Web Content Accessibility Guidelines (WCAG) set these targets:
- 4.5:1 for normal body text (level AA).
- 3:1 for large text (about 24px, or 19px bold) and for icons, borders and chart lines.
- 7:1 for body text if you want the stricter AAA level.
Common mistakes
- Light grey text on white. Pretty in a mockup, unreadable in real life.
- White text on bright yellow, orange or light green buttons.
- Text placed straight on a busy photo. Add a dark overlay or a solid panel behind it.
How to fix a color that fails
You rarely need a new color. Keep the same hue and make it darker (for text on light backgrounds) or lighter (for text on dark backgrounds) until it passes. Our Contrast Checker does this automatically and suggests the closest color that passes.
Beyond contrast
Never use color alone to show meaning, like red for errors and green for success. Add an icon or a word, so people with color blindness get the message too.
Check your colorsOpen tool