Check the WCAG contrast ratio between a text colour and a background colour, with AA and AAA verdicts.
Try an example
Load a ready-made sample into this tool and run it. Every result you see is calculated live by the tool itself — nothing here is a pre-written answer.
Sample: fg: #201A2C; bg: #ffffff
How to Use
- Pick the text colour.
- Pick the background colour.
- Read the ratio and the AA/AAA verdicts for normal and large text.
Check text and background contrast against WCAG
This contrast ratio checker compares a text color with a background color and reports their WCAG contrast ratio, with pass and fail verdicts for the AA and AAA levels, for both normal and large text. Pick the two colors you plan to use and you can see immediately whether body copy, headings or button labels will meet the accessibility thresholds.
Useful before you publish a color scheme
Run pairs through the checker while a design is still easy to change: body text on its background, link colors, button text, and muted secondary text, which is where contrast most often falls short. Because large text has lower thresholds than small text, the separate verdicts help you decide whether a pairing is fine for headlines but unsuitable for paragraphs.
Good to know
The verdicts follow WCAG 2 relative luminance math, so the ratio is objective and reproducible. Contrast is only one part of readability, though: font size, weight, spacing and the viewing environment also matter, and a passing ratio does not by itself guarantee a design reads well.
Frequently asked questions
What ratio does normal body text need?
Under WCAG 2, normal text needs at least 4.5 to 1 for AA and 7 to 1 for AAA. Large text needs less: 3 to 1 for AA, 4.5 to 1 for AAA. The checker shows all four verdicts.
Why does my pair pass for headings but fail for paragraphs?
Thresholds differ by text size. Large text, generally 24 pixels or 18.66 pixels bold and larger, stays readable at lower contrast, so AA allows 3 to 1 there. Small text must reach 4.5 to 1.
Does a pass mean my site is WCAG compliant?
No. This tool judges only the contrast between two colors. Accessibility also covers keyboard use, focus states, alt text and labels, so a pass means one requirement met, not page-wide compliance.
How to use Contrast Ratio Checker
- Pick the text colour.
- Pick the background colour.
- Read the ratio and the AA/AAA verdicts for normal and large text.
Limitations
Verdicts follow WCAG 2 relative luminance maths; they judge contrast only, not overall readability or design quality.