TOOL · COLORS
WCAG contrast checker
Pick the text color and the background color and get the contrast ratio, AA and AAA badges for normal and large text, and a real preview — before someone fails to read your site.
contrast ratio: 10.37:1
- AA normal text (min. 4.5:1)✓ pass
- AAA normal text (min. 7:1)✓ pass
- AA large text (min. 3:1)✓ pass
- AAA large text (min. 4.5:1)✓ pass
How it looks in practice
Normal text: the quick brown fox jumps over the lazy dog at 16 pixels.
Large text looks like this.
Processed in your browser — your files never leave your computer.
How it works
-
Pick the two colors
Type the hex (or rgb/hsl) of the text color and the background color, or use the visual picker next to each field. Both stay in sync.
-
Read the verdict
The contrast ratio appears instantly (e.g. 4.62:1) with four badges: AA and AAA for normal and large text. Green passes, red fails.
-
Check the preview and adjust
The preview block shows real text in your chosen colors. Did not pass? Darken one of the colors, or click swap to test the combination the other way around.
Frequently asked questions
What do AA and AAA mean?
They are the two compliance levels of WCAG, the international accessibility standard. AA is the accepted minimum (and what laws usually require): a 4.5:1 contrast for normal text. AAA is the comfortable level, designed for people with low vision: 7:1. If you pass AAA, you pass AA too.
What is the contrast ratio?
A number from 1 to 21 measuring the brightness difference between two colors. 1:1 is invisible text (same color as the background); 21:1 is black on white. The higher, the easier to read — especially on bad screens, in sunlight or for people with low vision.
Why does large text get a looser rule?
Big letters are easier to read even with little contrast, so WCAG only asks for 3:1 (AA) and 4.5:1 (AAA). Large means 24 px and up, or 18.66 px if bold.
I passed AA. Should I care about AAA?
It depends on your audience. For a regular site, AA is fine. If your audience includes many older users or people with low vision — or the text is long and important — aim for AAA, which keeps reading comfortable for almost everyone.
Is the math the same as the official tools?
Yes. The ratio uses the WCAG 2 relative luminance formula, the same one in Chrome DevTools and accessibility validators. You can quote the result in a report.
Are the colors I test sent to a server?
No. The calculation runs entirely in your browser, on your device. Nothing you type leaves your computer.