Contrast Checker
Pretty isn't the same as readable. Pick a text color and a background color and the penguin scores the pair against WCAG AA and AAA — so everyone can read your stuff.
How to use
- Pick your text color. Use the picker or type a hex code — 3 digits in a hurry, 6 for precision.
- Pick your background color. Same deal: picker or hex, it syncs both ways.
- Read the ratio. Shown big, like 12.63:1 — higher means easier to read, 21:1 is the max.
- Check the badges. AA is the bar most sites are held to; AAA is the gold standard.
- Eyeball the preview. Sample heading and body text render in your exact colors — trust the numbers, then trust your eyes.
Frequently asked questions
What is a good contrast ratio for text?
WCAG wants 4.5:1 or higher for normal text at AA level, and 3:1 for large text. AAA — the strictest level — asks for 7:1 on normal text and 4.5:1 on large. When in doubt, aim for AAA on body copy; nobody ever complained text was too readable.
What counts as large text under WCAG?
Text at least 18pt (24px), or 14pt (about 18.66px) bold and up. Large text gets the easier 3:1 AA bar because thicker strokes stay legible at lower contrast — which is why the checker grades large text separately.
How is the contrast ratio calculated?
Each color's relative luminance is computed from its RGB channels with gamma correction, then the ratio is (lighter + 0.05) ÷ (darker + 0.05). It runs from 1:1 (identical colors) to 21:1 (black on white). This tool follows the exact WCAG formula, so its numbers match professional audit tools.
Why does my brand color fail on white?
Plenty of brand colors — light blues, yellows, pastels — look great as accents but can't carry text. Fix it by darkening the text color, putting text on a darker background, or reserving the brand color for large headings and graphics while body text uses a darker shade.
Is AA compliance legally required?
In many places, effectively yes — the ADA in the US and the European Accessibility Act both point at WCAG AA for digital content. This checker gives you the ratio; full compliance also means checking focus states, non-text contrast, and testing with real assistive tech.
Related tools
Keep the momentum going.