Tailwind CSS Contrast Checker
Enter any two Tailwind class names (e.g. blue-500) or hex colors. Get your WCAG AA/AAA contrast ratio instantly with a live preview.
slate-900, blue-500) or a hex value (e.g. #3b82f6).Unrecognized color
Unrecognized color
Enter two valid colors above to see the contrast ratio and WCAG results.
Why contrast matters for Tailwind CSS projects
Picking beautiful Tailwind colors is easy — making them accessible is the harder part. WCAG 2.1 Success Criterion 1.4.3 requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text at Level AA. This tool resolves any Tailwind CSS class name directly to its underlying hex value, then computes the exact WCAG contrast ratio using the wcagContrast function from the culori library — the same engine powering Tailwind v4's OKLCH color system.
Common accessible Tailwind pairings: slate-900 on white (21:1), blue-700 on blue-50, yellow-400 on gray-900. Use the suggested pairings above to quickly find accessible matches for any foreground color.