What the ratio measures
Contrast ratio compares the relative luminance of two colours, on a scale from 1:1 for identical colours to 21:1 for black on white. Relative luminance is not simple brightness — each colour channel is linearised to undo the sRGB transfer curve, then weighted, with green contributing about 72 percent, red 21 percent and blue just 7 percent.
That weighting reflects how the eye works: we are far more sensitive to green than to blue. It is why pure blue text on black fails badly despite looking distinct, and why two colours that seem clearly different can still fail — hue difference does not create luminance difference. Red on green is the classic example, visually loud and often close to identical in luminance.
The consequence for design is that you cannot judge contrast by eye. A colour pair that looks fine to someone with typical vision on a good monitor in a bright room may be unreadable elsewhere, and the calculation is the only reliable check.
The thresholds and what they apply to
WCAG 2.1 level AA requires 4.5:1 for normal text and 3:1 for large text, defined as 18 point or 14 point bold — roughly 24 px, or 18.66 px bold. Level AAA raises these to 7:1 and 4.5:1.
A separate and frequently missed requirement covers non-text content: user interface components and meaningful graphics need 3:1 against adjacent colours. That means input borders, focus indicators, toggle states, icons that convey information, and the segments of a chart all have a contrast obligation. Low-contrast form field borders are one of the most common failures on otherwise careful sites.
Some things are exempt: disabled controls, purely decorative graphics, logos, and text within an image of text that is incidental. Placeholder text is not exempt, despite being styled at low contrast almost everywhere — and using placeholder text as a substitute for a label fails on other grounds too.
Where the formula falls short
The WCAG 2.x calculation has known weaknesses, and they are worth understanding rather than working around blindly. It handles dark themes poorly: light text on a dark background can pass the ratio while appearing to bloom and be harder to read than the number suggests, and conversely some dark-mode pairs that fail numerically read perfectly well.
It also takes no account of font weight or size beyond the single large-text threshold, though a thin 24 px face and a bold one differ substantially in legibility at identical contrast. And it evaluates only two flat colours, so text over a photograph, a gradient or a semi-transparent overlay needs checking against the worst-case region rather than an average.
APCA, the Accessible Perceptual Contrast Algorithm, is being developed for WCAG 3 to address these — it is polarity-aware and accounts for font size and weight. It is not yet a standard to conform to, so WCAG 2 remains the requirement, but where a pair passes one and fails the other it is worth looking at the design rather than the number. Finally, never convey information by colour alone: around 8 percent of men have a colour vision deficiency, so a red-versus-green status needs a shape, icon or label too.