Color Contrast Checker
Check whether your text and background colors meet WCAG accessibility standards.
How to use
- Pick your text and background colors.
- See the live preview and the contrast ratio.
- Check the AA / AAA badges to confirm accessibility compliance.
How the Color Contrast Checker works
Measures the contrast ratio between a foreground and background colour and reports whether it meets WCAG accessibility requirements.
Each colour's relative luminance is computed by linearising the sRGB channels — dividing by 12.92 below the threshold, otherwise applying a 2.4 gamma curve — then weighting them 0.2126 red, 0.7152 green, 0.0722 blue. The ratio adds 0.05 to each to avoid division by zero at pure black.
ratio = (L₁ + 0.05) ÷ (L₂ + 0.05), where L is relative luminance
Worked example
Black on white gives the maximum 21:1. Mid-grey #767676 on white gives 4.54:1, just clearing the AA threshold for body text.
Things worth knowing
- WCAG AA needs 4.5:1 for normal text and 3:1 for large text (18pt, or 14pt bold). AAA needs 7:1 and 4.5:1.
- Interactive elements and meaningful graphics need at least 3:1 against their surroundings under WCAG 2.1.
- Green is weighted most heavily because human vision is most sensitive to it — which is why green text on white fails more often than it looks like it should.
Frequently asked questions
What contrast ratio do I need?
WCAG AA requires at least 4.5:1 for normal text (3:1 for large text); AAA requires 7:1.
Why does contrast matter?
Sufficient contrast makes text readable for everyone, including people with low vision.
Why does my light grey text fail?
Grey on white is the single most common accessibility failure. Anything lighter than about #767676 on white falls below 4.5:1.
Does contrast apply to disabled buttons?
WCAG exempts disabled controls, but making them entirely unreadable still hurts usability. Keep them legible even if muted.