Color Contrast Checker
Is this text readable on that background?
- Runs in your browser
- Free, no signup
The two colours
Ratios use the WCAG 2.1 relative luminance formula, not an approximation. AA needs 4.5:1 for normal text and 3:1 for large text; AAA needs 7:1 and 4.5:1.
- AA normal text needs 4.5:1 —
- AA large text needs 3:1 —
- AAA normal text needs 7:1 —
- AAA large text needs 4.5:1 —
The quick brown fox jumps over the lazy dog. 1 2 3 4 5 — and a sentence long enough to wrap onto a second line.
Large text at 24px bold
Your colours are converted in this browser. Nothing is uploaded and nothing is saved.
Enter a text colour and a background colour, and this page reports the contrast ratio between them — the number the WCAG guidelines are written in, from 1:1 for two identical colours to 21:1 for black on white.
The ratio is calculated from the relative luminance of the two colours using the formula in WCAG 2.1, not an approximation. Alongside the number are the four thresholds it is checked against, and two blocks of real text at the sizes the guidelines actually name, so you can look at a paragraph rather than only at a figure.
How to use this tool
- Enter the text colour and the background colour, or pick them with the colour fields.
- Read the contrast ratio and the four pass or fail results.
- Look at the two text samples — 16px body text and 24px bold — to judge it with your eyes as well.
- Use the common pairings for a starting point, and the swap button to check the reverse.
What ratio you need
WCAG 2.1 sets four minimum-contrast criteria. AA is the level most accessibility policies require; AAA is stricter and often not achievable across a whole palette.
- AA normal text — 4.5:1
- AA large text — 3:1
- AAA normal text — 7:1
- AAA large text — 4.5:1
What counts as large text
Large text means 18 point — about 24 pixels — or larger, or 14 point — about 18.66 pixels — and bold. The threshold is lower for large text because size and weight compensate for some of the loss of contrast, which is why a heading can pass where the body text under it does not.
When one of the colours is translucent
A ratio needs two opaque colours, so a translucent colour has to be resolved onto something before it can be measured. This page composites the text colour over the background, and a translucent background over white, then reports the effective colour it used. That is stated on screen rather than hidden, because a ratio calculated on a colour the visitor cannot see is not evidence of anything.
What the ratio does not tell you
Contrast ratio is a proxy for legibility, not a measurement of it. It says nothing about font weight at the smallest sizes, letter spacing, whether the text sits on an image, or the halation that a low-contrast pairing causes for some readers with astigmatism. Treat a pass as the floor, not proof that text is comfortable to read.
Frequently asked questions
What contrast ratio do I need?
For AA — the level most policies require — 4.5:1 for normal text and 3:1 for large text. AAA asks for 7:1 and 4.5:1 respectively.
What counts as large text?
24 pixels or larger, or 18.66 pixels and bold. This page shows both sizes so you can compare them.
Why is my translucent colour reported differently?
Because a translucent colour has no contrast of its own — what the reader sees is the composite. The page tells you which opaque colour it measured.
Is passing AA enough?
It is the widely accepted minimum, and it is a floor rather than a target. Body text is usually more comfortable at 7:1 or above, and grey-on-white designs are the most common place where a technical pass still reads badly.