Color contrast failures are the single most common accessibility issue on the web. The WebAIM Million study found them on 83.6% of home pages tested. Yet they're also one of the easiest issues to fix — once you understand the rules.

The WCAG Contrast Requirements

WCAG 2.2 defines two success criteria for color contrast:

1.4.3 Contrast (Minimum) — Level AA

Normal text (< 18pt or < 14pt bold): minimum 4.5:1 contrast ratio

Large text (≥ 18pt or ≥ 14pt bold): minimum 3:1 contrast ratio

UI components and graphical objects: minimum 3:1

1.4.6 Contrast (Enhanced) — Level AAA

Normal text: 7:1

Large text: 4.5:1

The contrast ratio formula is (L1 + 0.05) / (L2 + 0.05) , where L1 is the lighter colour's relative luminance and L2 is the darker one's.

The Mathematics Behind Luminance

Relative luminance isn't just brightness — it accounts for how the human eye perceives different wavelengths:

function relativeLuminance ( r , g , b ) { const [ rs , gs , bs ] = [ r , g , b ].…