Color Contrast Checker
WCAG AA/AAA contrast ratio.
Color Contrast Checker at a glance
Color Contrast Checker is a free online developer tool you can use right now to WCAG AA/AAA contrast ratio โ no account, no install and no usage limit. It runs entirely inside your browser, so whatever you enter stays on your own device.
- Price
- Free โ no trial, no paid tier, no watermark
- Sign-up
- Not required
- Where it runs
- In your browser โ nothing is uploaded to a server
- Works on
- Chrome, Safari, Firefox and Edge โ desktop, tablet and phone
- Category
- Developer Tools
About Color Contrast Checker
Enter a text colour and a background colour to get the contrast ratio between them and see whether it meets the WCAG thresholds for normal and large text.
The ratio runs from 1:1 for identical colours to 21:1 for pure black on pure white. WCAG AA โ the level most legislation and procurement requirements reference โ needs 4.5:1 for normal text and 3:1 for large text, defined as 18pt or 14pt bold. AAA raises those to 7:1 and 4.5:1. The large-text allowance exists because bigger letterforms have thicker strokes and remain legible at lower contrast.
The failure this catches most often is light grey placeholder and helper text on white. It is a near-universal design habit and it fails AA routinely โ grey at #999 on white is about 2.8:1, well under the threshold. That text is frequently the most important on the form, since it explains what is expected in the field.
Two things worth knowing about scope. Contrast requirements apply to non-text elements too: form borders, focus indicators and icons that convey meaning need 3:1 against what surrounds them, which is why very faint input outlines fail. And contrast is not the whole of colour accessibility โ a red-green pairing can pass contrast comfortably while being indistinguishable to someone with the most common form of colour blindness. Never rely on colour alone to carry meaning.
How to use Color Contrast Checker
- Enter your foreground text colour and your background colour.
- Read the contrast ratio and the AA and AAA pass or fail results.
- Adjust the lightness of either colour until it passes for your text size.
Frequently asked questions
What ratio do I need to pass?
For WCAG AA, 4.5:1 for normal text and 3:1 for large text โ 18pt, or 14pt bold. AAA requires 7:1 and 4.5:1. AA is the level most accessibility legislation and procurement rules reference.
Does this apply to icons and borders as well as text?
Yes. Non-text elements that convey meaning โ form borders, focus rings, meaningful icons โ need 3:1 against adjacent colours. Very faint input outlines are a frequent failure.
Why does my grey placeholder text fail?
Because light grey on white is usually around 2.5-3:1, below the 4.5:1 needed for normal text. It is an extremely common pattern and it fails, which matters because placeholder text often carries the instructions for the field.
Is passing contrast enough for accessibility?
No. Contrast handles legibility but not colour dependence โ a red-green pair can pass comfortably while being indistinguishable to someone with red-green colour blindness. Always pair colour with text, shape or an icon when it carries meaning.