WCAG Color Contrast Explained

Master contrast ratios, understand AA vs AAA compliance, and build accessible color combinations.

What is contrast ratio

Contrast ratio compares the brightness of two colors on a scale of 1:1 to 21:1. Higher ratio = easier to read.

  • 4.5:1 = WCAG AA minimum for normal text
  • 3:1 = WCAG AA minimum for large text (18pt+)
  • 7:1 = WCAG AAA minimum for normal text

Why accessibility matters

1 in 12 people have color blindness. Many more have low vision. High contrast helps everyone, especially on phones or in bright sunlight.

Testing your design

Always test real text at actual sizes. Use Huelab's contrast checker to verify foreground/background pairs pass AA or AAA.