What is a contrast ratio?
The contrast ratio compares the relative luminance of two colors, from 1:1 (identical) to 21:1 (black on white). WCAG defines it as (L1 + 0.05) / (L2 + 0.05), where L1 is the luminance of the lighter color and L2 of the darker one. Relative luminance weights red, green and blue the way the human eye perceives them.
WCAG 2.2 contrast requirements
| Content | Level AA | Level AAA |
|---|---|---|
| Normal text | 4.5:1 | 7:1 |
| Large text (24 px, or 18.66 px bold) | 3:1 | 4.5:1 |
| UI components and graphics | 3:1 | — |
“Large text” means at least 18 pt (24 CSS px) regular, or 14 pt (about 18.66 CSS px) bold. Logos and purely decorative text are exempt.
Tips for accessible color contrast
- Check text on every background it appears on, including images, gradients and hover states.
- Translucent “glass” surfaces change contrast depending on what is behind them — test the darkest and lightest case.
- Placeholder text and disabled buttons are often too faint; keep important hints at 4.5:1.
- Don't rely on color alone to convey meaning — add icons or text to errors and success states.
This tool checks one pair of colors. Lensux checks every text element on your pages as they render — including translucent layers — and lists each failure with its ratio.
Frequently asked questions
What contrast ratio do I need for WCAG AA?
4.5:1 for normal text, 3:1 for large text (24 px, or 18.66 px bold) and 3:1 for interface components such as button borders and icons.
Is 4.5:1 enough for buttons?
Button labels are text, so they need 4.5:1 against the button color. The button's own shape needs 3:1 against the page background if it's the only thing identifying it.
Does WCAG 3 change contrast rules?
WCAG 3 is still a draft and explores a different contrast model (APCA). WCAG 2.x remains the reference for accessibility law, including the European standard EN 301 549.