Contrast is the one accessibility requirement that can be checked with a number, which is why it is also the one most often waved through on a guess. This gives you the ratio between two colours, says which WCAG levels it clears, shows the pair as real text, and — when it fails — offers the closest colour that would pass.
The four thresholds, and what "large" actually means
WCAG 2.1 sets two levels, each with a lower bar for large text. Large has a precise definition that most checkers leave implicit, and getting it wrong is how a heading ends up below the line it was assumed to clear.
- AA, normal text — 4.5:1. The level essentially every project, procurement rule and public-sector requirement is held to.
- AA, large text — 3:1. Large means 24px regular or 18.66px bold and above. A 20px regular heading is not large text and needs 4.5:1.
- AAA, normal text — 7:1. Enhanced. Worth aiming for in body copy; hard to reach with a brand colour.
- AAA, large text — 4.5:1.
Why some checkers disagree with each other
The ratio is not computed from the colour values you see. sRGB is gamma-encoded, so the numbers in a hex code are not proportional to the light a screen emits; each channel has to be linearised first, then weighted for the eye’s different sensitivity to red, green and blue.
Skip the linearisation and you get numbers that look plausible and are wrong — sometimes generously wrong, which is worse, because the pair passes here and fails for the person who actually cannot read it. The formula used here is the one in the specification, and the tests include a pair that only lands on the correct side of AA because of that step.
What the ratio does not tell you
It is a floor, not a verdict on legibility. Two colours can clear 4.5:1 and still be uncomfortable to read: a saturated red on a saturated blue meets the number and vibrates on screen, because the ratio is about lightness and says nothing about hue.
Nor does it cover everything WCAG asks for. Non-text contrast — the outline of an input, the state of a toggle, the boundary of a chart segment — has its own 3:1 requirement, and information carried by colour alone fails regardless of ratio. A pass here means one thing has been checked, and it is the easiest thing.
How the suggestion is chosen
When a pair fails, the fix is usually to move one colour a little rather than to abandon it. The suggestion holds hue and chroma fixed and changes only lightness, so what comes back is recognisably the colour you chose — a slightly darker version of your brand blue, not a different blue.
The search runs in Oklab, a perceptual colour space, rather than in HSL. HSL lightness is not perceptual: two colours with the same L can look quite different in brightness, so stepping through it overshoots in some hues and undershoots in others. In Oklab the smallest step that passes is genuinely the smallest visible change.
Both directions are tried at once and the nearer one wins, so a colour is darkened against a light background and lightened against a dark one without you having to say which. Occasionally there is no answer at all — against a mid grey, nothing of any lightness reaches 7:1, and the tool says so instead of returning something that does not work.
FAQ
What contrast ratio do I need?
4.5:1 for normal text and 3:1 for large text meets AA, which is the level referenced by most legal and procurement requirements, including the European Accessibility Act and Section 508. AAA — 7:1 and 4.5:1 — is worth aiming for in long-form body copy but is not usually a requirement.
What counts as large text?
24px or larger at a regular weight, or 18.66px or larger at bold. Below that it is normal text and needs the higher ratio, however much it looks like a heading. This is the detail most often assumed rather than checked.
Does this apply to buttons, icons and borders?
They have their own requirement: 3:1 for the parts that convey meaning, such as an input’s outline or a toggle’s state. Text inside a button is text and needs the text ratio. You can check both here — put the two colours in and read the number against whichever bar applies.
Why does my checker give a different number?
Almost always the gamma step. A checker that averages raw sRGB values instead of linearising them produces a different number, usually a more flattering one. If two tools disagree, the one matching the specification’s formula is the one to trust — and the safer assumption is the lower ratio.
Does a passing ratio mean my page is accessible?
It means one requirement is met. Contrast is measurable and therefore easy to check, which is exactly why it gets treated as the whole job. Keyboard operation, focus visibility, form labels, heading structure and content that does not rely on colour alone all matter as much and none of them is a number.