What the contrast ratio actually measures
Contrast ratio compares the relative luminance — the perceived brightness — of two colours. It runs from 1:1 (identical, invisible) to 21:1 (pure black on pure white). The calculation is defined by WCAG and weights the red, green and blue channels differently, because human eyes are far more sensitive to green than to blue.
That weighting is why intuition misleads people. A mid-yellow and a mid-blue can look equally "medium" while having wildly different luminance, and two colours that feel high-contrast to you may fail outright. Measuring is not optional.
The four thresholds, and which one applies
AA is the level virtually all legislation references — the UK Equality Act, the European Accessibility Act, and Section 508 in the US. It requires 4.5:1 for normal text and 3:1 for large text. AAA is the enhanced level, requiring 7:1 and 4.5:1 respectively.
"Large text" has a specific definition: at least 24px, or 18.66px if bold. It gets a lower threshold because thicker letterforms remain legible at lower contrast. Note that the requirement covers text and images of text — plus, under WCAG 2.1, a 3:1 minimum for meaningful UI components and graphics such as input borders, icons and focus indicators.
The mistakes that fail real audits
Three patterns account for most failures. Placeholder text is the worst offender — the default grey in most browsers fails badly, and placeholders are frequently misused as labels, so the information disappears for low-vision users. Light grey body text on white is the second: it looks refined in a design mockup on a bright calibrated monitor, and becomes unreadable on a phone in daylight. Text over images or gradients is the third, because the ratio changes across the background — check the lightest and darkest points it crosses, not the average, and add a scrim if either end fails.
Also remember that disabled controls are exempt from the contrast requirement, but "looks disabled" is not the same as being disabled. If a control is interactive, it must meet the threshold.
Designing for contrast from the start
Retrofitting contrast is painful; building it in is nearly free. Generate your palette as a tint-and-shade scale and record which steps are text-safe on which backgrounds — as a rule of thumb, steps around 600 and darker work for text on white, and 200 and lighter work as backgrounds for dark text. Our palette generator produces exactly that kind of scale.
One caution about automated testing: tools like Lighthouse and axe catch a meaningful share of contrast problems, but they cannot evaluate text over images, canvas or video, and they miss states they never trigger — hover, focus, error. Manual spot-checks on those states remain necessary.