Your Tailwind Palette Has 69 Confusable Color Pairs

Tailwind ships 17 chromatic hues at the 500 weight, giving 136 possible pairs. Measured against all eight vision types, 69 of them are confusable — and four are identical, at a perceptual distance of exactly zero.

How This Was Measured

The colors come straight from tailwindcss/colors in an installed copy of Tailwind 3.4.19, not from a blog post or from memory. Each pair was simulated under protanopia, protanomaly, deuteranopia, deuteranomaly, tritanopia, tritanomaly and achromatopsia, then compared in CIE L*a*b*.

A pair counts as confusable when its perceptual distance drops below 10 under any of those — the point at which two colors stop reading as different. This is the same measurement our color pair checker runs, so you can reproduce any row below yourself.

The Worst Offenders

Tailwind color pairs with the smallest perceptual distance
Pair	Fails under	ΔE
red-500 + rose-500	Achromatopsia	0
violet-500 + fuchsia-500	Achromatopsia	0
violet-500 + pink-500	Achromatopsia	0
fuchsia-500 + pink-500	Achromatopsia	0
orange-500 + sky-500	Achromatopsia	0.4
teal-500 + cyan-500	Achromatopsia	0.4
violet-500 + purple-500	Protanomaly	0.4
yellow-500 + lime-500	Achromatopsia	0.7

red-500 and rose-500 are the same color to someone with no color vision. So are violet, fuchsia and pink at the 500 weight — all three collapse onto one another. If you are using them as three distinct categories in a chart, you are using one.

The Surprise: red-500 and green-500 Are Not the Problem

Everyone expects red-green to be the disaster. Measured, red-500 against green-500 comes out marginal, with a worst case of ΔE 12.8 under deuteranomaly. Not good, but not the catastrophe the reputation suggests.

Meanwhile sky-500 against teal-500 — two blues nobody worries about — measures ΔE 3.8 and is flatly confusable. The pairs that fail are not the ones the folklore warns about, which is precisely why measuring beats intuition.

And red-green becomes genuinely fine the moment you separate the shades: red-700 against green-300 measures ΔE 48.8 at a 4.61:1 contrast ratio, and is rated distinct under every vision type. Same two hues everyone tells you to avoid.

You Can Only Have Five

Here is the uncomfortable finding. Taking a pool of 90 Tailwind colors — 18 hue families at five weights each — and searching over 4,000 randomised orderings for the largest set where every pair stays distinct under every vision type, the answer is five.

pink-100#FCE7F3

yellow-500#EAB308

blue-500#3B82F6

green-900#14532D

slate-900#0F172A

Look at what the search actually chose: a near-white, a mid yellow, a mid blue, a dark green and a near-black. It is a lightness ladder wearing hues, and that is not a coincidence. The only channel that survives every deficiency is luminance, so a set that must stay separable for everyone is forced to spread across light and dark rather than around the color wheel.

The worst pair in that set still sits at ΔE 20.7, comfortably clear. But five is the ceiling. If your chart needs eight categories, no palette choice will save it — you need direct labels, patterns or shapes, which is exactly what WCAG 1.4.1 has been asking for all along.

A Config You Can Paste

// tailwind.config.js
// Five categorical colors, verified mutually distinguishable under all
// eight vision types. Worst pair sits at delta-E 20.7.
module.exports = {
  theme: {
    extend: {
      colors: {
        series: {
          1: '#FCE7F3', // pink-100
          2: '#EAB308', // yellow-500
          3: '#3B82F6', // blue-500
          4: '#14532D', // green-900
          5: '#0F172A', // slate-900
        },
      },
    },
  },
}

The rule that generalises. Pick hues for meaning and brand, then pick weights for distinguishability. Tailwind's numbered scale is already a lightness scale — using 700 against 300 instead of 500 against 500 fixes most pairs without changing a single hue.

What these numbers are and are not. Measured against Tailwind 3.4.19; the default palette has changed between major versions, so re-check if you are on a different one. The simulations model dichromats, the severe end of each type — treat a failing pair as definitely broken and a passing one as very likely fine.

Frequently Asked Questions

Is the default Tailwind palette inaccessible?

Not inherently — it is a palette, not a scheme. The individual colors are fine; the problem is only in specific pairings used to carry meaning. 69 of the 136 possible 500-weight pairs are confusable under at least one vision type, so the fix is choosing pairs deliberately rather than replacing the palette.

Which Tailwind colors should I never pair?

At the 500 weight: red with rose, and any two of violet, fuchsia and pink — those four pairs are at delta-E 0 under achromatopsia. Also teal with cyan, yellow with lime, and orange with sky. All are measured in the table above.

Can I use red and green in Tailwind at all?

Yes, as long as you separate the weights. red-500 against green-500 measures a marginal 12.8, but red-700 against green-300 measures 48.8 and passes under every vision type. The hues were never the real problem; equal lightness was.

How many colors can I safely use in a chart?

Five, if every pair must remain distinguishable under every vision type — that is the maximum found by searching 4,000 orderings of a 90-color Tailwind pool. Past five, colour alone stops working and you need direct labels, patterns or shapes as well.

Does this apply to Tailwind v4?

These figures are measured against 3.4.19 specifically. Tailwind has revised its default palette between major versions, so the exact hex values — and therefore some of the results — may differ. The method holds regardless; re-run the pairs you actually use.

What about dark mode?

The pairwise measurement is about two colors against each other and does not change with the surrounding theme. What does change is contrast against the background, so a color that reads clearly on white may not on slate-900 — check that separately with a contrast checker.