Contrast checker
Check colour contrast against WCAG AA and AAA for normal text, large text and non-text elements, with a suggested fix.
Runs in your browser
Normal text at 16px — the size most body copy is set at.
Large text at 24px
Large text is 18pt or more, or 14pt bold — about 24px and 18.7px. It changes the verdict, which is why one number is not an answer.
Non-text contrast covers UI components, focus indicators and meaningful graphics. It is rarely checked and frequently needed.
One number is not an answer
A contrast ratio on its own does not tell you whether a pair is acceptable, because the threshold depends on what the colours are used for. So all five verdicts are shown.
| Ratio | |
|---|---|
| AA, normal text | 4.5:1 |
| AA, large text | 3:1 |
| AAA, normal text | 7:1 |
| AAA, large text | 4.5:1 |
| Non-text (1.4.11) | 3:1 |
Large text is 18pt or more, or 14pt bold — about 24px and 18.7px in CSS. A pair at 3.5:1 fails for body copy and passes for a heading, which is exactly why a checker reporting a single pass or fail is answering a question nobody asked.
Non-text contrast applies to interface components, focus indicators, form borders and any graphic carrying meaning. It is rarely checked and frequently the thing that actually fails an audit — a 2:1 input border is invisible to a lot of people.
How the ratio is calculated
On linearised channel values, not on the raw numbers.
Channel values in a hex code are encoded for display; the light they represent is not proportional to them. The sRGB transfer function has to be undone before computing luminance, and skipping that step is why many homebrew checkers disagree with the specification near the boundary — usually passing something that fails.
The figures here are checked against the WCAG specification’s own worked examples rather than against another calculator.
The suggested fix moves lightness only
When a pair fails AA for normal text, the nearest passing colour is offered.
It is found by moving lightness alone, holding hue and saturation, because a suggestion that changes the hue is a suggestion that will be rejected — it is no longer the brand colour. Bisection finds the nearest passing lightness rather than jumping to black or white, so the change is the smallest one that works.
What this does not tell you
Contrast is one part of legibility. Thin weights, tight tracking, low font sizes and busy backgrounds all reduce readability at a ratio that passes.
And a pair that passes AAA can still be unpleasant: pure black on pure white is 21:1 and causes visible halation for many readers. Something near it is usually better than the extreme.
Nothing is uploaded
Calculated in this page.