Color Contrast Checker help

Tells you whether text will be readable on a given background, using the WCAG 2.1 rules that accessibility audits check against. Runs entirely in your browser.

Steps

Set the text colour and the background colour, by picker or by typing a value.
Read the ratio. Higher is more readable; 1 : 1 is invisible, 21 : 1 is black on white.
Check the pass/fail lines for the case you care about.

What the levels mean

Normal text is body copy. AA needs 4.5 : 1, AAA needs 7 : 1.
Large text is about 24px, or 19px bold and above. AA needs 3 : 1.
UI and graphics covers borders, icons, form outlines, and focus rings. AA needs 3 : 1.

Notes

Contrast is only part of readability. Font weight, size, and spacing matter too.
A semi-transparent colour is compared as if fully opaque. Flatten it against the real background first for an exact figure.
To convert a colour between HEX, RGB, and HSL, use the Color Code Converter.

The calculation runs in the page. Nothing you enter is uploaded.

Back to Color Contrast Checker