Tailwind Color Contrast Checker

A Tailwind color contrast checker tests whether a foreground color and a background color are readable together. It calculates the WCAG contrast ratio between the two colors and reports which accessibility levels they meet, so you can choose Tailwind shades that are actually legible instead of guessing.

The tool covers 22 Tailwind color families — slate, gray, zinc, neutral, stone, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, and rose — each with 11 shades from 50 through 950, plus pure white and black. You can also type a custom hex value for either side.

The ratio is derived from relative luminance, which linearizes every sRGB channel before combining them as 0.2126 red plus 0.7152 green plus 0.0722 blue. The contrast ratio is then the lighter luminance plus 0.05 divided by the darker luminance plus 0.05, which produces a number between 1 and 21.

Results are scored against four WCAG thresholds: AA normal text needs 4.5, AA large text needs 3, AAA normal text needs 7, and AAA large text needs 4.5. A quick-reference table below lists around 20 common Tailwind pairings sorted by ratio, and the whole checker runs in your browser with no sign in.

Key Concepts

• Contrast ratio — a value from 1 to 21 that compares the luminance of two colors.
• Relative luminance — brightness computed after linearizing each sRGB channel.
• AA thresholds — 4.5 for normal text and 3 for large text.
• AAA thresholds — 7 for normal text and 4.5 for large text.
• Color coverage — 22 families with 11 shades each, plus white and black.
• Quick reference — about 20 ready-made pairings sorted from highest to lowest ratio.

1. Pick a foreground color — choose a text color from any Tailwind color family and shade.
2. Pick a background color — choose the background the text will sit on.
3. Enter a custom hex — optionally type or pick a custom hex value for either the text or the background.
4. Read the ratio and ratings — check the ratio and the AA and AAA pass or fail badges for normal and large text.
5. Scan the quick reference — use the table of common pairings to find combinations that already pass.

Contrast affects whether a user can read your interface at all, so checking it early saves rework later. These are some of the most common ways the checker helps.

1. Accessible buttons — confirm that button labels stay readable on filled backgrounds.
2. Text on colored panels — choose a text shade that works on a colored card or alert.
3. Dark mode palettes — test light text against dark surfaces such as gray-800 or slate-900.
4. Form labels and placeholders — make sure helper text is legible and not too faint.
5. Badges and charts — pick paired colors that remain distinguishable for small elements.
6. Auditing existing designs — check a brand palette to find combinations that fail WCAG.