Tailwind CSS Color Contrast Checker
Pick any two Tailwind colours, see real-time WCAG 2.1 contrast ratios, and copy the class names straight into your code.
Foreground (Text)
Background
Contrast Ratio
17.85:1
The quick brown fox
jumps over the lazy dog
WCAG AA
WCAG AAA
Copy Classes
WCAG 2.1 at a Glance
Normal Text
Body copy, labels, paragraphs (< 18pt)
Large Text
Headings, 18pt+ regular or 14pt+ bold
UI Components
Borders, icons, focus indicators, controls
Quick Tailwind Tip
Use shades 700-950 on backgrounds 50-200 for body text. text-gray-900 on white gives you ~17.4:1.
1 in 12 men and 1 in 200 women have some form of colour vision deficiency.
Frequently Asked Questions
Common questions about colour contrast, WCAG compliance, and using this tool with Tailwind CSS.
Why check colour contrast in Tailwind CSS?
Tailwind ships with a beautiful colour palette, but not every combination meets WCAG 2.1 accessibility standards. A foreground and background pair that looks fine on your monitor can be unreadable for the roughly 300 million people worldwide with some form of colour vision deficiency.
This free contrast checker lets you pick any two Tailwind colours, instantly calculates the contrast ratio, and tells you whether the pair passes AA or AAA for normal text, large text, and UI components. No sign-up, no ads, works entirely in your browser.
How to use the results
Once you find a passing combination, click the copy button to grab the Tailwind utility classes (e.g. text-slate-900 bg-white) and paste them straight into your JSX, Vue template, or HTML. If a pair fails, try moving one shade darker or lighter until you hit the threshold.
Quick rules of thumb
- Body text: use shades 700-950 on backgrounds 50-200 for easy AA compliance.
- Buttons and interactive elements only need a 3:1 ratio against their surrounding area.
- Decorative or disabled elements are exempt from contrast requirements.
- Dark mode needs the same checks. Flip your foreground and background and test again.
Ship accessible UIs faster
Our starter kits are WCAG-AA compliant out of the box. Contrast-checked, keyboard-tested, screen-reader verified.