Dev Tools

Color Contrast Checker

Check color contrast ratios for WCAG compliance

Color Contrast Checker

Check color contrast ratios for WCAG 2.1 compliance

Preview

See how the colors look together

Normal text (16px)

Large text (18px bold / 24px normal)

WCAG 2.1 Contrast Requirements

  • AA (Minimum) - 4.5:1 for normal text, 3:1 for large text
  • AAA (Enhanced) - 7:1 for normal text, 4.5:1 for large text
  • Large Text - 18px or larger, or 14px bold or larger
  • Higher ratios provide better accessibility for users with vision impairments
  • Colors update in real-time as you type or use color pickers

Common Color Combinations

Click to test popular color pairs