Contrast checkers make accessibility feel like a simple pass or fail, but the number they spit out is easy to misapply if you don't understand what it's measuring.

Most designers know the drill: paste in two hex codes, look for a green checkmark, move on. But that checkmark can be misleading. WCAG contrast rules cover more ground than a single ratio, and the formula itself has real limits that a passing score won't reveal. Here's what the rule actually measures, which thresholds apply where, and what to watch for beyond the number.

What the contrast ratio actually measures

The WCAG contrast ratio is a formula, not a visual judgment. It's calculated as (L1 + 0.05) / (L2 + 0.05), where L1 and L2 are the relative luminance of the lighter and darker colours in a pair.

Relative luminance comes from sRGB values run through a gamma-correction step, not from how "light" or "dark" a colour looks to your eye. That's why two colours that seem equally bright can produce noticeably different ratios. The result always falls between 1:1 (identical colours) and 21:1 (pure black on white), and it's completely hue-blind: it only measures luminance difference, not whether you're pairing red and green versus blue and yellow.

The specific WCAG success criteria and their actual thresholds

Contrast isn't one rule, it's several, each with its own trigger:

Where the model breaks down or gets misapplied

The luminance formula doesn't model colour vision deficiency. Two hues can pass the ratio test and still be indistinguishable to someone with protanopia or deuteranopia, which is why 1.4.1 Use of Color separately bans colour as the only way to convey information.

Contrast checking also assumes flat, solid colours. There's no official method for text over photos or gradients, so designers handle that case with scrims, overlays, or shadows rather than a documented ratio. Font weight, letter-spacing, and anti-aliasing all affect real legibility but aren't part of the formula either, meaning identical ratios can read very differently depending on typeface.

APCA, the perceptual model proposed for WCAG 3, aims to fix this by factoring in font weight and size and correcting known quirks like WCAG 2.x overrating light-on-dark contrast. It's promising, but not yet an adopted standard.

Practical rules for applying contrast correctly

  • Check contrast at the actual rendered size and weight. The same hex pair can pass as a headline and fail as body copy.
  • Apply 1.4.11 separately to icons, focus indicators, chart lines, and form borders.
  • Test every interactive state, default, hover, focus, and disabled, not just the default.
  • Re-check brand colours on any background besides pure white or black. A colour that passes on white often fails on a tinted surface elsewhere in the system.

Tools and where they fit

WebAIM's Contrast Checker is the standard reference for verifying AA and AAA pass/fail. Browser DevTools in Chrome and Firefox show live contrast ratios in their colour picker panels, handy for spot-checking rendered pages rather than static swatches. The APCA calculator is worth exploring if you want a preview of how WCAG 3 might score a pairing differently, but treat it as forward-looking, not a compliance requirement today.

Contrast rules exist to make design work for more people, not just to produce a passing number. Learn what the ratio measures, apply the right criterion to the right element, and use tools to verify, not replace, your judgment as a designer.