Colour Contrast Checker
The WCAG contrast ratio between two colours, and whether it passes AA or AAA at the text size you are using.
Results
What this tool does
Whether text is readable is not a matter of taste; it has a number, and the number is written into accessibility law in a growing number of countries. The WCAG contrast ratio runs from 1 to 1 for two identical colours up to 21 to 1 for black on white. Put in your two colours and the size you are setting them at, and this page gives you the ratio and the plain verdict — including whether the size counts as large text, which changes the threshold.
Formula
WCAG 2: luminance = 0.2126 R + 0.7152 G + 0.0722 B ramp after; ratio = (light + 0.05) ÷ (dark + 0.05)
Variables
| Symbol | Meaning | Unit |
|---|---|---|
foreground | Text colour | — |
background | Background colour | — |
font_size | Text size | px |
bold | Bold | — |
OUT | Contrast ratio | :1 |
LV | WCAG level reached | — |
AA | Passes AA | — |
A3 | Passes AAA | — |
GR | Enough for icons and borders | — |
LG | Counts as large text | — |
NE | Needed for AA at this size | :1 |
BT | Better plain text colour on this background | — |
Worked example
- Text colour#5a5f6b
- Background colour#fdfcf8
- Text size16 px
- Boldno
- Contrast ratio6.23 :1
- WCAG level reachedAA — the usual requirement
- Passes AAYes
- Passes AAANo
- Enough for icons and bordersYes
- Counts as large textNo
- Needed for AA at this size4.5 :1
- Better plain text colour on this background#000000
Limitations
- For work that must comply with a standard or be signed off, check the result against the applicable code and have it reviewed by a qualified engineer.
Frequently asked questions
Why does the size of the text change the answer?
Because large letters need less contrast to stay readable — there is simply more of each stroke for the eye to catch. WCAG draws the line at 18 point, which is 24 pixels, or at 14 point (about 18.7 pixels) when the text is bold. Above that line AA asks for 3 to 1 instead of 4.5, and AAA for 4.5 instead of 7. The same pair of colours can therefore pass for a heading and fail for the paragraph under it.
Why is grey on white so often just short of passing?
Because the middle grey that designers reach for by instinct — #777 — comes out at 4.48 against white, and the threshold is 4.5. It looks fine on a good screen in a quiet room and disappears on a phone in daylight, which is exactly the situation the threshold exists to protect. Going one step darker, to #767676, is the usual fix and costs nothing visually.