What the contrast ratio means
Contrast ratio measures how different your text color is from its background, on a scale from 1:1 (identical, invisible) to 21:1 (pure black on pure white). The Web Content Accessibility Guidelines (WCAG) set minimum ratios so that text stays readable for people with low vision or color-vision differences — and, in practice, for everyone on a glary phone screen outdoors.
WCAG thresholds at a glance
| Content | AA (minimum) | AAA (enhanced) |
|---|---|---|
| Normal text | 4.5 : 1 | 7 : 1 |
| Large text (≥18pt, or ≥14pt bold) | 3 : 1 | 4.5 : 1 |
| UI components & graphics | 3 : 1 | — |
Aim for AA as your baseline — it's what most accessibility laws and design systems require. Reach for AAA on body copy when you can.
How it's calculated
The ratio is (L1 + 0.05) / (L2 + 0.05), where L1 and L2 are the relative luminance of the lighter and darker color. Luminance is a gamma-corrected, weighted blend of the red, green, and blue channels (green counts most, blue least), exactly as defined by WCAG 2. This page does the math in your browser as you type.
FAQ
- What contrast ratio do I need?
- 4.5:1 for normal text and 3:1 for large text to pass WCAG AA. AAA wants 7:1 and 4.5:1 respectively.
- What counts as “large” text?
- At least 18pt (~24px) regular, or 14pt (~18.66px) bold. Large text only needs 3:1 for AA.
- My text fails — how do I fix it fast?
- Tap “Suggest an accessible color.” It keeps your text hue and saturation but adjusts lightness to the nearest value that passes AA against your background.
- Are my colors stored anywhere?
- No. Everything runs locally in your browser.
Into color? Play Spectra, a daily puzzle where you crack a hidden RGB color in 6 guesses.