Contrast Checker
Can you read that?
Normal text at 15px. The quick brown fox jumps over the lazy dog.
Large text at 26px.
16.32:1
- AA, normal text · needs 4.5:1 — passes
- AAA, normal text · needs 7:1 — passes
- AA, large text · needs 3:1 — passes
- AAA, large text · needs 4.5:1 — passes
What the numbers mean
The ratio compares the relative luminance of two colours. It runs from 1:1, where they are identical and nothing is readable, to 21:1 for pure black on pure white. WCAG sets the bar in four places:
- 4.5:1 — normal text at AA. This is the one most projects are actually held to.
- 7:1 — normal text at AAA.
- 3:1 — large text at AA. “Large” means 18pt, or 14pt bold — roughly 24px, or 18.5px bold.
- 4.5:1 — large text at AAA.
What the ratio doesn’t catch
Passing is a floor, not a finish. The formula knows nothing about type size below the large-text threshold, font weight, whether the text sits over a photograph, or how it behaves for someone with a colour vision deficiency. Two colours can clear 4.5:1 and still be unpleasant to read at length. Check it, then look at it.
Checking a whole palette at once
If you have an image rather than two hex codes, the extractor checks every pair in the palette it finds and sorts them by ratio, so the usable combinations come first. It also tells you, for each colour, whether black or white text is readable on it.