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 ].…