Contrast and accessibility
What the WCAG contrast ratios mean, how the number is calculated, and how to fix a colour that fails.
Contrast ratio is a single number describing how far apart two colours are in perceived brightness. It runs from 1:1 to 21:1, and WCAG sets minimums that text has to clear: 4.5:1 for body copy, 3:1 for large text.
The formula is not a simple difference in brightness. Each channel is converted to linear light first, then weighted — and green carries 71% of that weight. That single fact explains most of the surprises, including why a vivid green can look bright and still fail badly against white.
One caveat worth stating plainly: clearing a ratio is not the same as being accessible, and it is certainly not a compliance opinion. It is one measurable part of a much larger picture.
The practical consequence of the green weighting is that adjusting a colour's lightness moves its contrast score far more predictably than adjusting its hue. If a brand colour fails against white, dropping its lightness will almost always rescue it while keeping it recognisable; rotating the hue rarely helps and usually makes it a different colour.
Two failures come up more than any other. The first is muted secondary text — helper copy, captions, placeholder text and form hints, all deliberately dimmed until they no longer pass. Muted is a legitimate design choice; unreadable is not, and secondary text is still content someone has to read. The second is colour used as the only signal: a red border marking an invalid field, or a green dot meaning success. Anyone who cannot separate those hues gets no information at all, which is why an icon, a label or an underline should always carry the meaning alongside the colour.
Dark mode deserves its own pass rather than an inversion. A palette that clears every threshold on white will often fail once the background becomes near-black, because the same mid-tones now sit much closer to their background. Re-check each pairing against the surfaces you actually ship.
What you'll learn here
- The AA and AAA thresholds, and which applies to what.
- How relative luminance is computed, and why green dominates it.
- The quickest reliable way to fix a failing colour without losing the hue.
- Which parts of an interface people most often forget to check.
- Why colour alone should never carry meaning, and what to add alongside it.
- How to re-check a palette for dark mode instead of inverting it.
