Contrast Checker
WCAG AA and AAA pass/fail for any text and background pair.
About Contrast Checker
Contrast Checker measures the contrast ratio between a text colour and its background using the WCAG 2.1 relative luminance formula — the same calculation browsers, Lighthouse and accessibility auditors use — and tells you which conformance levels it passes. Low contrast is the single most common accessibility failure on the web, and it affects far more people than developers assume: anyone with reduced vision, anyone on a phone in sunlight, anyone on a cheap screen.
How to use it
- Set your text colour and background colour, by picker or by typing a hex value.
- Read the ratio and the pass/fail list beneath it.
- If it fails, darken the text or lighten the background until it passes — the live preview shows the effect.
Questions
What contrast ratio do I need?
WCAG AA requires 4.5:1 for normal body text and 3:1 for large text (18pt, or 14pt bold) and for UI components like borders and icons. AAA raises those to 7:1 and 4.5:1.
Does grey placeholder text need to pass?
Yes. Placeholder text, disabled-looking labels and light grey captions are the most common failures on real sites. If users are meant to read it, it must meet the ratio.
Is a higher ratio always better?
Not necessarily. Pure black on pure white is 21:1 and some readers find it harsh, particularly people with dyslexia. Comfortably above the threshold beats maximum.
Does this cover colour blindness?
Partly — contrast helps, but it does not catch information conveyed by hue alone. Never rely on colour by itself to indicate meaning, such as red and green states with no label or icon.
Contrast Checker is free and runs entirely in your browser. No account, no upload, no watermark, no limit on use.