Tailwind color contrast checker
Pick colors directly from the Tailwind palette and check WCAG contrast—without looking up hex values or switching tabs.
Contrast ratio: 5.16:1
WCAG AA:Pass
WCAG AAA:Fail
WCAG AA:Pass
WCAG AAA:Pass
| Shade | slate | gray | zinc | neutral | stone | red | orange | amber | yellow | lime | green | emerald | teal | cyan | sky | blue | indigo | violet | purple | fuchsia | pink | rose |
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| 50 | ||||||||||||||||||||||
| 100 | ||||||||||||||||||||||
| 200 | ||||||||||||||||||||||
| 300 | ||||||||||||||||||||||
| 400 | ||||||||||||||||||||||
| 500 | ||||||||||||||||||||||
| 600 | ||||||||||||||||||||||
| 700 | ||||||||||||||||||||||
| 800 | ||||||||||||||||||||||
| 900 | ||||||||||||||||||||||
| 950 |
ContrastCraft is a lightweight open-source tool for checking color contrast while working with Tailwind CSS. Select colors directly from the palette, compare foreground and background combinations in real time, or enter custom hex values when needed. It helps make accessibility checks part of everyday UI implementation, without interrupting your workflow to look up and transfer color values between tools.
A contrast ratio measures the difference in perceived brightness between two colors, expressed as e.g. 4.5:1. Black text on a white background is 21:1 (maximum); two identical colors are 1:1 (minimum).
WCAG 2.2 Level AA requires at least 4.5:1 for normal text and 3:1 for large text and UI components. Level AAA raises this to 7:1 for normal text and 4.5:1 for large text.
Text that is at least 18pt (24px), or 14pt (about 19px) when bold. Everything smaller must meet the stricter 4.5:1 AA threshold.
Pick a foreground and a background color directly from the Tailwind palette in the checker above — ContrastCraft computes the WCAG ratio instantly and tells you whether it passes AA and AAA.
Yes. Enter any hex value (e.g. #3b82f6) for the foreground or background to check arbitrary brand colors and design tokens.
Yes. ContrastCraft is free, requires no signup, and every check runs locally in your browser — your colors never leave your device.