Tool
What the WCAG Contrast Checker does
WCAG Contrast Checker: checks Contrast ratio, WCAG verdict and Nearest colour that passes AA from Text colour and Background colour. Formula: Contrast ratio = (L1 + 0.05) / (L2 + 0.05).
Give the WCAG Contrast Checker your Text colour and Background colour and it works out Contrast ratio, WCAG verdict and Nearest colour that passes AA. Adjust anything and the figures re-derive on the spot.
Most people who open the WCAG Contrast Checker are people building out a palette. Picking colours that work together is easier with the maths already done.
The page holds your values in memory and forgets them the moment you close it.
The field table, the method and a worked example are documented after the tool for anyone who wants to check the working.
What do the WCAG Contrast Checker fields mean?
The WCAG Contrast Checker uses 2 inputs. A filled form means you can test one idea immediately instead of sourcing every input first.
| Field | What to enter | Default |
|---|---|---|
| Text colour | optional | #1a1a1a |
| Background colour | optional | #ffffff |
How does the WCAG Contrast Checker work?
L1 and L2 are the relative luminances of the lighter and darker colour. WCAG AA needs 4.5:1 for body text, AAA needs 7:1.
Bad input produces an error, never a confident-looking wrong answer.
What a typical run looks like
You provide: Text colour and Background colour
What happens: the file is read into memory by your browser, processed locally, and offered back as a download. It is never uploaded.
You get back: a new file plus a brief account of what happened to it, shown in the panel.
How long this takes is a property of your computer, not of our infrastructure, and file size is bounded by browser memory.
Read next: Colour Contrast and WCAG: The Ratio, the Thresholds, What They Miss
How to use it
- Set Text colour.
- Put Background colour.
- Because there is no round trip to a server, updating on every keystroke costs nothing.
- Check Contrast ratio, WCAG verdict and Nearest colour that passes AA on the right.
- Copy Link when you want to return to this exact configuration; Print when someone needs it on paper.
What this tool does not do
- Colours render differently across displays; the values are exact but the appearance is not guaranteed.
- Conversions between colour spaces with different gamuts are approximate at the edges.
- Comparisons across tools can differ where each uses a slightly different definition.
Frequently asked questions
You need Text colour and Background colour. Every box already holds a working value, so nothing is mandatory before you see a result.
Nothing is logged. The tool is client-side code; your data stays where you entered it.
No charge. Everything on the page is available without signing in.
The computation is exact; how much you should trust the answer depends on how good your inputs are.