Color Contrast Quick Check
Instant WCAG pass/fail for any text & background.
How to use
- 1 Enter or pick your text colour as a hex value.
- 2 Enter or pick the background colour behind it.
- 3 Read the contrast ratio and the AA / AAA verdicts.
- 4 Adjust either colour until you reach the level you need.
- 5 Copy the summary to paste into a review or ticket.
About Color Contrast Quick Check
Color Contrast Quick Check tells you, at a glance, whether a text colour is legible on its background.
Type or pick a foreground (text) colour and a background colour as hex values, and the tool computes the WCAG 2.x contrast ratio between them — a single number from 1:1 (invisible) to 21:1 (black on white).
Readability is not a matter of taste; the Web Content Accessibility Guidelines set hard thresholds.
Normal body text needs at least 4.5:1 to pass AA and 7:1 to reach AAA, while large text (18pt, or 14pt bold) and interactive UI components only need 3:1.
This tool grades your pair against every one of those thresholds and shows the result as a clear AA, AAA or fail badge, alongside a live preview so you can see the actual rendered text.
It is perfect for checking a design token, a button state, a chart label or a marketing banner before you ship.
Because the maths runs entirely in your browser using the official relative-luminance formula, nothing is uploaded and there is no rate limit — paste, tweak and re-check as many colour pairs as you like, even offline.
FAQ
What contrast ratio do I need to pass?
Normal text needs 4.5:1 for AA and 7:1 for AAA. Large text (18pt or 14pt bold) and UI components need just 3:1 for AA.
Does it account for transparency?
No. WCAG contrast is defined for opaque colours, so enter the solid colour that is actually rendered after any alpha is flattened.
Why does swapping the two colours give the same result?
Contrast ratio is symmetric — it depends only on the two luminances, not on which is foreground or background.