TOOLMake your text readable for everyone
Low-contrast text is one of the most common accessibility failures on the web — and it's easy to fix once you can measure it. This checker takes a text colour and a background colour and gives you the exact WCAG contrast ratio, then tells you whether it passes the AA and AAA levels for both normal and large text.
The thresholds
- AA normal text — at least 4.5:1
- AA large text (18pt / 14pt bold) — at least 3:1
- AAA normal text — at least 7:1
- AAA large text — at least 4.5:1
The ratio itself is computed from each colour's relative luminance as (L1 + 0.05) / (L2 + 0.05), ranging from 1:1 (no contrast) to 21:1 (black on white).
Tips for passing
If a pairing fails, darken the text or lighten the background (or vice-versa) until it passes AA. Need to build a matching scheme? Try the palette generator, or fine-tune tones with the shades & tints generator. To convert between HEX, RGB and HSL, use the color converter.
Ratios follow the WCAG 2.1 formula. "Large text" means at least 18pt (24px) regular or 14pt (18.66px) bold. Meeting contrast is one part of accessibility, not the whole of it.
Frequently asked questions
What is a good color contrast ratio?
For normal text, WCAG requires a contrast ratio of at least 4.5:1 to pass AA and 7:1 to pass AAA. Large text (about 18pt, or 14pt bold) needs 3:1 for AA and 4.5:1 for AAA.
How is contrast ratio calculated?
It compares the relative luminance of the two colors. The ratio is (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter color's luminance and L2 is the darker one's. Ratios range from 1:1 (identical) to 21:1 (black on white).
What is the difference between AA and AAA?
AA is the standard most websites aim for and is often legally required. AAA is a stricter, enhanced level. Meeting AA ensures good readability for most users; AAA improves it further for people with low vision.