Free interactive tool
Color Contrast Checker (WCAG)
Find the exact moment text becomes readable — measured, not guessed.
Find the moment text becomes readable
Slide the text and background tones apart until the sample passes — the contrast ratio updates live.
Contrast is measurable, not a matter of taste: 4.5:1 is the WCAG AA line for body text and 3:1 for large text.
- Find the exact point where AA flips from fail to pass.
- Create a pair that passes for large text but fails for body text.
- Swap to light-on-dark — does the ratio care which side is darker?
WCAG contrast is a measured ratio between text and background luminance. Body text needs 4.5:1 to pass AA and 7:1 for AAA; large text passes AA at 3:1. This tool computes the ratio live as you move the tones.
Use it to settle design arguments with a number: find where your palette stops passing and adjust before the interface ships.
What contrast ratio does WCAG AA require?
4.5:1 for normal body text and 3:1 for large text (roughly 24 px, or 19 px bold).
Does dark mode change the rules?
No — the ratio is symmetric. Light-on-dark and dark-on-light pairs measure identically.