The contrast ratio between two colours is a single number from 1:1 to 21:1, and WCAG uses it to decide whether text is legible. Black on white is the maximum at exactly 21:1. This tool computes the ratio and tells you which thresholds you clear — but the number deserves more scepticism than it usually gets.
What the thresholds actually are
WCAG 2.x defines four you will meet in practice. AA requires 4.5:1 for normal text and 3:1 for large text. AAA raises those to 7:1 and 4.5:1. AA is the level referenced by most legislation, including the European Accessibility Act and Section 508; AAA is aspirational and the specification itself does not recommend requiring it across a whole site.
"Large" has a precise definition that catches people out: 18pt, which is 24px, or 14pt bold, which is 18.66px. Not "a heading". A 20px heading is normal text as far as WCAG is concerned and needs the full 4.5:1.
To give the numbers a physical anchor: on a white background, #767676 lands at 4.54:1 and is the lightest grey that clears AA. #595959 hits exactly 7:1 for AAA. Anything lighter than #767676 on white fails for body text, which rules out most of the greys that designers reach for by instinct.
The formula measures luminance, not readability
This is the part worth understanding, because passing is not the same as being legible. The ratio is computed from relative luminance, which weights the channels by how much each contributes to perceived brightness: green counts for 0.7152, red for 0.2126, and blue for only 0.0722.
That weighting produces a specific, demonstrable failure. Pure blue #0000FF on white scores 8.59:1 — comfortably past AAA. Anyone who has tried to read a paragraph of pure blue text knows it is hard work: the eye struggles to focus blue light sharply, and there are very few blue-sensitive cones in the centre of the retina. The formula sees a very dark colour. Your eyes see a fuzzy one. The check passes and the text is still bad.
The formula is symmetric, and human vision is not
Here is the flaw that matters most in 2025, now that dark mode is everywhere. WCAG 2 treats the pair of colours as unordered — it does not know or care which one is the text and which is the background. Human vision is not that neutral.
You can watch the problem happen. The grey #949494 scores 3.03:1 on white, which fails AA for body text. The same grey on black scores 6.92:1, which sails past. Same colour, same formula, wildly different verdict — and it is not because dark mode is genuinely twice as legible. Light text on a dark background suffers from halation, where bright glyphs bleed into the surrounding dark and thin strokes fatten up. The formula has no concept of this.
The accessibility community has known WCAG 2 contrast is a poor model of perception for years. APCA — the Accessible Perceptual Contrast Algorithm — is the candidate replacement being developed for WCAG 3, and it is directional: it gives different answers depending on which colour is the text. It is not yet a standard and not yet what you will be audited against. Which leaves a pragmatic position: meet the WCAG 2 numbers, because they are what the law points at, and do not mistake meeting them for having designed something readable.
The requirement people forget: 3:1 for things that are not text
WCAG 2.1 added success criterion 1.4.11, and it is missed constantly. Non-text elements that carry meaning need 3:1 against their surroundings — the border of a text input, the outline of a button, a focus indicator, the bars of a chart, an icon that is the only label on a control.
This is where a great many otherwise careful designs fail an audit. That elegant #E5E7EB border around a form field is 1.4:1 against white. It fails, and it fails on the element a user most needs to find. This tool checks the four text thresholds; the 3:1 non-text rule is one you have to apply yourself, by putting the border colour and the background colour into these two fields and looking for 3:1.
Contrast is necessary, not sufficient
Passing every ratio still leaves the most common accessibility failure untouched: using colour alone to carry information. A red field border that means "invalid" says nothing to someone who cannot distinguish it from the grey ones, no matter how well it contrasts. Around one man in twelve has some form of colour vision deficiency.
The rule is that colour may reinforce a message but must never be the only carrier of it. An error needs an icon or a text label alongside the red. A required field needs an asterisk. A line chart needs different dash patterns, not just different hues. This is a separate criterion — 1.4.1, "Use of Color" — and no contrast checker will ever tell you that you have failed it.
Common questions
Is anything sent to a server?
No. This tool is marked "client": the ratio is a formula evaluated in your browser tab. Nothing is transmitted.
Why does my grey pass on a dark background and fail on a light one?
Because the relationship is not linear, and the formula is symmetric while perception is not. #949494 is 3.03:1 on white and 6.92:1 on black — the same colour, more than double the score. The honest reading is that the number is telling you less than it appears to. If you are building a dark theme, test it with real eyes on a real screen at real brightness, because the ratio will flatter you.
Does placeholder text need to pass?
Yes. Placeholder text is text, and there is no exemption for it. This surprises people because almost every design system ships a placeholder grey that fails. It is worth noting separately that placeholders should not be used as labels at all — they vanish the moment someone types, taking the field's meaning with them.
What about disabled buttons?
Disabled controls are explicitly exempt from the contrast requirements, so a greyed-out button is allowed to fail. That is a licence you should use carefully: "allowed to be unreadable" is not "should be unreadable", and a user still needs to be able to see that the control exists and understand why it is unavailable.
Do I need AA or AAA?
AA, in practice. It is what accessibility legislation references, what audits check, and what the specification itself treats as the general target. AAA is worth reaching for on long-form reading text where it costs you nothing, but the specification explicitly says it is not required for entire sites — partly because at 7:1 the palette you have left to design with is very small.