WCAG 2.1 Compliant

Contrast Checker

Check if your color pairs meet WCAG AA and AAA accessibility standards. Real-time pass/fail for normal and large text.

Color Pair
Sample Text
The quick brown fox jumps over the lazy dog
Contrast Ratio
21.00
: 1
WCAG Compliance
Normal Text (AA)Pass
Normal Text (AAA)Pass
Large Text (AA)Pass
Requirements
  • AA Normal: 4.5:1 minimum
  • AAA Normal: 7:1 minimum
  • AA Large Text: 3:1 minimum

How It Works

Step 1

Choose Your Colors

Select foreground (text) and background colors using the color picker or by typing HEX values directly.

Step 2

Get the Contrast Ratio

The tool instantly calculates the contrast ratio using the WCAG 2.1 relative luminance formula.

Step 3

Check Compliance

See whether your color pair passes WCAG AA or AAA for both normal and large text sizes.

Step 4

Test Dark Mode Too

Swap foreground and background to test both light and dark mode variants of your design.

Frequently Asked Questions About WCAG Contrast