Tailwind Color Contrast Checker

Check WCAG contrast ratios between Tailwind CSS colors — compatible with Tailwind CSS v3 & v4

  1. Home
  2. > Tailwind >
  3. Color Contrast

Colors

or custom hex:
Preview:
or custom hex:
Preview:

Results

4.72 : 1

AA Normal

✅ PASS

AA Large

✅ PASS

AAA Normal

❌ FAIL

AAA Large

❌ FAIL

Sample Text

The quick brown fox jumps over the lazy dog.

Quick Reference

Text Background Ratio AA Normal
Help2Code Logo
Menu