WCAG Color Contrast Checker

Test AA/AAA contrast and get compliant color tweaks.

About WCAG Color Contrast Checker

Check WCAG contrast fast

Test foreground and background colors against WCAG AA/AAA guidelines for normal and large text.

How it works

  1. Pick your foreground and background colors.
  2. Review the contrast ratio and AA/AAA pass or fail results.
  3. Apply suggested compliant colors and export CSS variables.

Key features

  • Contrast math: WCAG 2.1 compliant ratio calculations.
  • Nearest fixes: suggested color tweaks to pass AA or AAA.
  • Palette export: copy CSS variables like --primary and --on-primary.

Related Tools

More tools you may find useful.

Recent Blog Posts