Color Contrast Checker
Text colour
Background
Large text preview
Normal body text preview — the quick brown fox jumps over the lazy dog.
—
contrast ratio
AA · normal—
AA · large—
AAA · normal—
AAA · large—
Check whether your text and background colours meet the WCAG contrast ratio for accessibility. See the exact ratio, a live preview, and AA / AAA pass or fail — free, instant, in your browser.
How to Use the Contrast Checker
1
Pick two colours
Choose a text colour and a background colour with the pickers, or type hex values directly. Use the swap button to flip them.
2
Read the ratio
The tool shows the exact contrast ratio and a live preview of large and normal text on your background.
3
Check AA & AAA
Green means the pair passes that level; red means it fails. Aim for at least AA (4.5:1 for normal text) for accessible interfaces.
Frequently Asked Questions
What is a good contrast ratio?
For WCAG AA, normal body text needs at least 4.5:1 and large text at least 3:1. For the stricter AAA level, normal text needs 7:1 and large text 4.5:1. A ratio of 1:1 means the colours are identical; the maximum is 21:1 (black on white). This checker shows the exact ratio and whether it passes each level.
How is the contrast ratio calculated?
Each colour is converted to its relative luminance — the red, green and blue channels are gamma-corrected and weighted by perceived brightness (green counts most, blue least). The ratio is the lighter luminance plus 0.05 divided by the darker luminance plus 0.05, exactly as WCAG defines it. It reflects perceived brightness, so two very different hues can still fail.
Does contrast apply to large text differently?
Yes. Large text — roughly 24px and up for regular weight, or about 18.66px and up for bold — is allowed a lower ratio: 3:1 for AA and 4.5:1 for AAA, versus 4.5:1 and 7:1 for normal text. This checker reports both so you can see which combinations pass.
Is anything uploaded or saved?
No. The checker runs entirely in your browser — the colours you enter never leave your device and nothing is stored. There is no sign-up, and it works offline once loaded. Use the pickers or type hex values, and swap the two colours with one button.