Color contrast ratio

Contrast ratio is a single number comparing the relative luminance of two colors, running from 1:1 (identical) to 21:1 (pure black on pure white). WCAG AA asks for 4.5:1 for body text and 3:1 for large text (24px, or 19px bold and up). A separate criterion, non-text contrast (1.4.11), asks for 3:1 on the visual information you need in order to identify a control or read its state: the border that says 'this is an input', the icon carrying the meaning, the mark showing which tab is selected. Inactive (disabled) controls are exempt, and so is pure decoration. AAA raises body text to 7:1.

It is the fastest design lever you have, because the numbers are objective and the failures are predictable: light gray placeholder text, white text on a pastel button, ghost buttons with a 1.4:1 border, and captions over a photo. Design tools and browser devtools both show the ratio live, so check while you are picking the color rather than during an audit six months later.

Two caveats worth knowing. The formula is luminance-only, so it ignores hue: red on green scores fine and is still miserable for the most common form of color blindness, which is why 'use of color' is a separate requirement. And the math is old enough to misjudge some pairs, especially light text on dark backgrounds; APCA, the candidate replacement being developed for WCAG 3, is the thing people reach for when the number says pass but your eyes say no.