Contrast checker

What the ratio actually measures

The contrast ratio compares how much light two colours reflect. WCAG works it out from each colour’s relative luminance — a weighted mix of its red, green and blue channels, weighted because the eye is far more sensitive to green than to blue — and divides the lighter figure by the darker one, after adding a small constant to both to account for screen glare.

The scale runs from 1:1 to 21:1. A colour on itself is 1:1; black on white is 21:1 and is the highest any pair of sRGB colours can reach. Two things follow that surprise people. It is symmetric — swapping the text and background colours cannot change the number, which is why the Swap button above only changes the preview. And it is not about hue: two colours can be violently different to look at and still fail, because luminance is the only thing being compared. A mid-red on a mid-green is the classic case — unmistakably different, and around 2:1.

What AA requires, at each size

WCAG 2.2 success criterion 1.4.3 asks for 4.5:1 for normal text and 3:1 for large text. Those two figures are the entire pass mark for text, and the second one comes with a definition worth learning:

• Large text means at least 24px regular, or at least 18.66px if it is bold. (WCAG states these as 18pt and 14pt bold; at the usual 96dpi mapping those are the pixel figures.)
• Everything else is normal text and needs 4.5:1. Bold 16px body copy is normal text. A 20px subheading is normal text. “It’s a heading” is not the test; the size is.
• Interface parts have their own rule. Criterion 1.4.11 asks 3:1 of the visual boundary of a control, a focus indicator, and any graphic you need to see to understand the content — so an input border at 1.6:1 fails even when the label inside it passes comfortably.
• Some things are exempt. Text in a logo, and text that is genuinely decorative or invisible, are outside 1.4.3. Placeholder text is not exempt, and disabled controls are — which is not the same as them being readable.

Why AAA is usually the wrong target

AAA (criterion 1.4.6) raises the bar to 7:1 for normal text and 4.5:1 for large. It is reported above because people ask for it, and it is worth being honest about what it costs. WCAG’s own guidance says conformance at AAA is not recommended as a general policy for entire sites, because for some content it cannot be met. Legislation follows suit: the UK public sector accessibility regulations, the EU’s EN 301 549 and the US Section 508 refresh all set AA as the standard.

The practical cost is that 7:1 squeezes a palette hard. Almost nothing mid-toned survives it, so brand colours get pushed towards black or white and the design loses the tonal range it needed to establish a hierarchy — at which point teams start applying AAA to the body copy and quietly ignoring it everywhere else, which is worse than a consistent AA. Aim at AA, clear it everywhere including the interface parts, and treat a AAA pass as a bonus you accept where it falls out for free. Long-form reading is the one case where going after it deliberately is usually worth it.

Why the figure above is floored, not rounded

This tool floors every ratio to two decimals. That is not a display preference. Round to the nearest instead, and a pair measuring 4.4988:1 prints “4.50” directly above the word fails — a figure the pair never reached, presented as though it cleared the bar. Flooring can only ever understate, which is the safe direction when the answer is going into an accessibility claim, and it means the number on screen is one you can re-measure in any other tool and get back.

You can watch the margin work. The tool above starts on #777777 on white: 4.47:1, which fails for normal text and passes for large. Change one character to #767676 — a single step lighter, indistinguishable on screen — and it becomes 4.54:1 and passes. Two greys nobody could tell apart land on opposite sides of the line, which is the whole reason a checker has to report the number rather than a colour-coded verdict, and the whole reason it must not round the number up to get there.

What a pass does not tell you

4.5:1 is a floor, not a verdict on legibility. The formula knows nothing about the typeface, the weight, the size above the minimum, the line length, or whether the text sits on a photograph where the local background changes underneath it. Pure black on pure white passes at 21:1 and is a well-documented source of eye strain in long-form reading; thin weights at large sizes can clear 3:1 and still disappear. Use the ratio as the gate — then look at the preview above, at the size you actually ship, before deciding it is fine.

One last honest note on scope: this reports WCAG 2.2 and nothing else. APCA, the perceptual contrast model people ask about, was pulled from the WCAG 3 working draft in 2023 and WCAG 3 is not expected to become a Recommendation for years. That is no judgement on APCA — it is serious work and may end up in the standard — but it is not the normative rule today, and a tool that mixed an advisory reading into a compliance answer would be telling you something you cannot defend. More about the position this tool takes.

When one pair isn’t enough

This page grades one pair. Contrast mode takes a whole palette and grades every pair in it — the full matrix, a per-colour view against white, black or another swatch, four colour-vision simulations, and a one-click fix that only appears when it can prove the fix actually clears the threshold without breaking anything else.

Grade a whole palette at once→

Opens Contrast mode. Free, no sign-up, and it runs in your browser like this page does.