Color Contrast Checker

Check color contrast ratios for WCAG accessibility compliance.

Category: Design · v1.0.0

Normal text preview (16px) - The quick brown fox jumps over the lazy dog.

Large text preview (24px bold)

Contrast Ratio
21:1
AA Normal (4.5:1)
Pass
AA Large (3:1)
Pass
AAA Normal (7:1)
Pass
AAA Large (4.5:1)
Pass

About This Tool

Verify that your text and background color combinations meet WCAG 2.1 accessibility standards. Check contrast ratios for both normal and large text at AA and AAA compliance levels. Essential for web designers and developers who want to ensure their content is readable by everyone.

How to Use

  1. Enter or pick a text color and background color
  2. View the contrast ratio and WCAG compliance levels
  3. Adjust colors until you achieve the desired rating
  4. Copy the color pair for your CSS