Why Color Accessibility Matters

About 1 in 12 men and 1 in 200 women have some form of color vision deficiency. Low contrast text is hard to read for everyone, especially on mobile in bright sunlight. WCAG (Web Content Accessibility Guidelines) defines minimum contrast standards.

WCAG Contrast Requirements

• Level AA (recommended minimum):
  • Normal text: 4.5:1 contrast ratio
  • Large text (18pt+ or 14pt+ bold): 3:1
  • UI components and graphics: 3:1
• Level AAA (enhanced):
  • Normal text: 7:1
  • Large text: 4.5:1

How to Calculate Contrast Ratio

Contrast ratio = (L1 + 0.05) / (L2 + 0.05), where L1 is the relative luminance of the lighter color and L2 is the relative luminance of the darker. Don't calculate manually — use a tool.

Check Your Colors

Use the Contrast Checker to instantly test your foreground/background color combinations. Enter your colors, see the ratio, and get a pass/fail result for each WCAG level.