Color Contrast Checker

Check WCAG color contrast ratios between text and background colors.

What does Color Contrast Checker do?

Color Contrast Checker calculates the WCAG contrast ratio between two colors and shows compliance with AA and AAA standards for normal and large text.

Use Cases

  • Verify text readability against background colors
  • Ensure WCAG 2.1 accessibility compliance
  • Test color combinations before applying to designs
  • Check contrast for both normal and large text sizes

How to Use

  1. 1Pick or enter a foreground (text) color
  2. 2Pick or enter a background color
  3. 3View the contrast ratio and WCAG compliance badges

Frequently Asked Questions

What is WCAG?
WCAG stands for Web Content Accessibility Guidelines. It defines standards for making web content accessible to people with disabilities, including sufficient color contrast.
What is the minimum contrast ratio?
WCAG AA requires 4.5:1 for normal text and 3:1 for large text. WCAG AAA requires 7:1 for normal text and 4.5:1 for large text.

Related Tools