Color Contrast Checker
Runs in your browser — your data is never uploaded.
Check whether two colors meet WCAG 2.x accessibility contrast requirements for normal and large text, at both AA and AAA levels. Updates instantly as you type.
How to use Color Contrast Checker
- 1
Enter the foreground (text) and background hex colors.
- 2
The contrast ratio and pass/fail results update automatically.
Share
Embed this tool on your site
Paste this where you want the tool to appear. It runs entirely in your visitor's browser — no uploads, no account, no tracking.
Please keep the attribution line — it's what keeps these tools free.
Need a different size, a dark theme, or a different tool? Build an embed lets you preview it first.
Frequently asked questions
Which colour should be the text and which the background?+
For the contrast ratio it doesn’t matter — the number is the same whichever way round you enter the two colours. What matters is that these are the actual foreground and background that will sit on top of each other.
What are the WCAG contrast thresholds?+
Normal text needs at least 4.5:1 for AA or 7:1 for AAA. Large text (18pt+/14pt+ bold) needs at least 3:1 for AA or 4.5:1 for AAA.
How is the ratio calculated?+
From the WCAG 2.x relative luminance formula for each color, then (lighter + 0.05) / (darker + 0.05) — giving a ratio from 1:1 (no contrast) to 21:1 (black on white).
Is my data uploaded anywhere?+
No. The calculation runs entirely in your browser — nothing is sent to a server.