Color contrast checker
Enter a text colour and a background colour to see the WCAG contrast ratio and whether it passes AA and AAA for normal and large text — with a live preview. Free and entirely in your browser.
Large text preview
Normal body text preview — the quick brown fox jumps over the lazy dog.
What the WCAG levels mean
The Web Content Accessibility Guidelines set minimum contrast so text stays readable for people with low vision or colour deficiency. The thresholds:
| Level | Normal text | Large text |
|---|---|---|
| AA | 4.5:1 | 3:1 |
| AAA | 7:1 | 4.5:1 |
Large text means at least 24px for regular weight, or 18.66px (14pt) bold. AA is the level most websites and legal accessibility standards target; AAA is stricter and often reserved for critical content.
How contrast ratio is calculated
The ratio compares the two colours' relative luminance — a weighted measure of perceived brightness. The formula is (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter colour and L2 the darker. Values range from 1:1 (identical colours, invisible) to 21:1 (pure black on pure white). Because luminance weights green most heavily, two colours that look similarly bright can still have very different contrast.
Tips for passing
If a pairing fails, darken the text or lighten the background (or vice versa) until the ratio clears the threshold — small lightness changes move the number a lot near the limit. Avoid relying on colour alone to convey meaning, and remember that placeholder text, disabled states and text over images also need to meet contrast. To build an accessible palette from scratch, the full ColorBloom tool lets you generate colours and check HEX/RGB values as you go.