Colour Contrast Checker
Check any text and background pair against the WCAG AA and AAA contrast thresholds, with a live preview at the text size you actually plan to use.
How to use it
- Set the text and background colours.
- Enter the font size you will actually use — the threshold changes above 18.66px bold or 24px regular.
- AA is the level most accessibility regulations require.
Examples
| #5b53e8 on white | 6.5:1 — AA pass |
| #999999 on white | 2.8:1 — fail |
This checks a text colour against a background colour and returns the WCAG contrast ratio — a single number from 1:1 (identical, invisible) up to 21:1 (pure black on pure white) — computed from the relative luminance formula the WCAG spec defines, shown above as the working formula. It then reports pass or fail against both the AA and AAA thresholds, which change depending on how large the text actually is.
The thresholds
| Level | Normal text | Large text (18.66px bold / 24px regular) |
|---|---|---|
| AA | 4.5:1 | 3:1 |
| AAA | 7:1 | 4.5:1 |
Which level to target
AA is the level referenced by most accessibility law and regulation, including the ADA in the US and the Equality Act in the UK by way of WCAG 2.1 AA being the common reference standard — AAA is a stricter, optional target that most sites do not attempt to meet across the board. Entering the actual font size you plan to use matters, because the threshold genuinely drops for large text: a heading at 24px only needs 3:1 where the same colours in body text would need 4.5:1.
Why grey text is a repeat offender
Mid-grey body text on a white background is one of the most common contrast failures on the web, and it happens because that combination looks fine to a designer with good eyesight working on a good monitor — a mid-grey like #999999 on white lands around 2.8:1, well under the 4.5:1 AA minimum, and is measurably harder to read for anyone with even mildly reduced contrast sensitivity, which becomes more common with age.
Questions people ask
What contrast ratio do I need?
AA requires 4.5:1 for normal text and 3:1 for large text. AAA raises those to 7:1 and 4.5:1. Most legal requirements point at AA.
Why does grey text so often fail?
Because mid-grey on white lands around 3:1 — visually pleasant to designers with good eyesight, and genuinely hard to read for anyone else.
Is anything uploaded?
No. Everything runs in your browser — no file, image or snippet you use here ever leaves your device.
Last updated 22 August 2026