OKLCH Studio · original data
Tailwind v4 default colors vs WCAG AA
We ran every default Tailwind CSS v4 --color-{family}-{step} stop through the same WCAG 2.1 math used by Contrast Fix on this site. Numbers below are informational — not a legal accessibility audit. Cite this page when you need a public tally of which default stops fail as body text.
- Stops tested
- 286
- Fail as text on white
- 156
- White fails on swatch
- 156
- Risky mids 400–600
- 52
Why mid stops fail as button text
Designers often put white labels on *-500 or *-400. Many of those swatches sit near the AA cliff for normal text. The table lists mid steps where white-on-swatch fails AA — open any row in Fix to nudge lightness while keeping the family hue.
Mid steps (400–600) where white text fails AA
| Token | HEX | White on swatch | Suggested ink | Links |
|---|---|---|---|---|
| amber-400 | #FFB900 | 1.72:1 · Fail | #0D0D0D | Ref · Fix |
| amber-500 | #FE9A00 | 2.13:1 · Fail | #0D0D0D | Ref · Fix |
| amber-600 | #E17100 | 3.20:1 · Fail | #0D0D0D | Ref · Fix |
| blue-400 | #51A2FF | 2.64:1 · Fail | #0D0D0D | Ref · Fix |
| blue-500 | #2B7FFF | 3.76:1 · Fail | #0D0D0D | Ref · Fix |
| cyan-400 | #00D3F2 | 1.81:1 · Fail | #0D0D0D | Ref · Fix |
| cyan-500 | #00B8DB | 2.37:1 · Fail | #0D0D0D | Ref · Fix |
| cyan-600 | #0092B8 | 3.62:1 · Fail | #0D0D0D | Ref · Fix |
| emerald-400 | #00D492 | 1.94:1 · Fail | #0D0D0D | Ref · Fix |
| emerald-500 | #00BC7D | 2.47:1 · Fail | #0D0D0D | Ref · Fix |
| emerald-600 | #009966 | 3.65:1 · Fail | #0D0D0D | Ref · Fix |
| fuchsia-400 | #ED6AFF | 2.59:1 · Fail | #0D0D0D | Ref · Fix |
| fuchsia-500 | #E12AFB | 3.54:1 · Fail | #0D0D0D | Ref · Fix |
| gray-400 | #99A1AF | 2.60:1 · Fail | #0D0D0D | Ref · Fix |
| green-400 | #05DF72 | 1.78:1 · Fail | #0D0D0D | Ref · Fix |
| green-500 | #00C950 | 2.22:1 · Fail | #0D0D0D | Ref · Fix |
| green-600 | #00A63E | 3.22:1 · Fail | #0D0D0D | Ref · Fix |
| indigo-400 | #7C86FF | 3.13:1 · Fail | #0D0D0D | Ref · Fix |
| lime-400 | #9AE600 | 1.53:1 · Fail | #0D0D0D | Ref · Fix |
| lime-500 | #7CCF00 | 1.95:1 · Fail | #0D0D0D | Ref · Fix |
| lime-600 | #5EA500 | 3.06:1 · Fail | #0D0D0D | Ref · Fix |
| mauve-400 | #A89EA9 | 2.58:1 · Fail | #0D0D0D | Ref · Fix |
| mist-400 | #9CA8AB | 2.44:1 · Fail | #0D0D0D | Ref · Fix |
| neutral-400 | #A1A1A1 | 2.58:1 · Fail | #0D0D0D | Ref · Fix |
| olive-400 | #ABAB9C | 2.32:1 · Fail | #0D0D0D | Ref · Fix |
| olive-500 | #7C7C67 | 4.25:1 · Fail | #0D0D0D | Ref · Fix |
| orange-400 | #FF8904 | 2.38:1 · Fail | #0D0D0D | Ref · Fix |
| orange-500 | #FF6900 | 2.89:1 · Fail | #0D0D0D | Ref · Fix |
| orange-600 | #F54900 | 3.60:1 · Fail | #0D0D0D | Ref · Fix |
| pink-400 | #FB64B6 | 2.76:1 · Fail | #0D0D0D | Ref · Fix |
| pink-500 | #F6339A | 3.58:1 · Fail | #0D0D0D | Ref · Fix |
| purple-400 | #C27AFF | 2.79:1 · Fail | #0D0D0D | Ref · Fix |
| purple-500 | #AD46FF | 4.12:1 · Fail | #0D0D0D | Ref · Fix |
| red-400 | #FF6467 | 2.89:1 · Fail | #0D0D0D | Ref · Fix |
| red-500 | #FB2C36 | 3.81:1 · Fail | #0D0D0D | Ref · Fix |
| rose-400 | #FF637E | 2.86:1 · Fail | #0D0D0D | Ref · Fix |
| rose-500 | #FF2056 | 3.75:1 · Fail | #0D0D0D | Ref · Fix |
| sky-400 | #00BCFF | 2.18:1 · Fail | #0D0D0D | Ref · Fix |
| sky-500 | #00A6F4 | 2.71:1 · Fail | #0D0D0D | Ref · Fix |
| sky-600 | #0084D1 | 4.02:1 · Fail | #0D0D0D | Ref · Fix |
| slate-400 | #90A1B9 | 2.63:1 · Fail | #0D0D0D | Ref · Fix |
| stone-400 | #A6A09B | 2.59:1 · Fail | #0D0D0D | Ref · Fix |
| taupe-400 | #ABA09C | 2.55:1 · Fail | #0D0D0D | Ref · Fix |
| teal-400 | #00D5BE | 1.86:1 · Fail | #0D0D0D | Ref · Fix |
| teal-500 | #00BBA7 | 2.42:1 · Fail | #0D0D0D | Ref · Fix |
| teal-600 | #009689 | 3.67:1 · Fail | #0D0D0D | Ref · Fix |
| violet-400 | #A684FF | 2.85:1 · Fail | #0D0D0D | Ref · Fix |
| violet-500 | #8E51FF | 4.40:1 · Fail | #060606 | Ref · Fix |
| yellow-400 | #FDC700 | 1.57:1 · Fail | #0D0D0D | Ref · Fix |
| yellow-500 | #F0B100 | 1.91:1 · Fail | #0D0D0D | Ref · Fix |
| yellow-600 | #D08700 | 2.94:1 · Fail | #0D0D0D | Ref · Fix |
| zinc-400 | #9F9FA9 | 2.62:1 · Fail | #0D0D0D | Ref · Fix |
Stops that fail AA as text on white
Light tints used as body text on a white canvas. Prefer darker steps or run Fix.
- amber-501.04:1
- amber-1001.11:1
- amber-2001.24:1
- amber-3001.45:1
- amber-4001.72:1
- amber-5002.13:1
- amber-6003.20:1
- blue-501.09:1
- blue-1001.22:1
- blue-2001.42:1
- blue-3001.81:1
- blue-4002.64:1
- blue-5003.76:1
- cyan-501.04:1
- cyan-1001.12:1
- cyan-2001.24:1
- cyan-3001.44:1
- cyan-4001.81:1
- cyan-5002.37:1
- cyan-6003.62:1
- emerald-501.05:1
- emerald-1001.14:1
- emerald-2001.28:1
- emerald-3001.52:1
- emerald-4001.94:1
- emerald-5002.47:1
- emerald-6003.65:1
- fuchsia-501.07:1
- fuchsia-1001.16:1
- fuchsia-2001.37:1
- fuchsia-3001.77:1
- fuchsia-4002.59:1
- fuchsia-5003.54:1
- gray-501.05:1
- gray-1001.10:1
- gray-2001.24:1
- gray-3001.47:1
- gray-4002.60:1
- green-501.05:1
- green-1001.10:1
- green-2001.21:1
- green-3001.40:1
- green-4001.78:1
- green-5002.22:1
- green-6003.22:1
- indigo-501.12:1
- indigo-1001.23:1
- indigo-2001.49:1
- indigo-3002.01:1
- indigo-4003.13:1
- lime-501.04:1
- lime-1001.09:1
- lime-2001.17:1
- lime-3001.30:1
- lime-4001.53:1
- lime-5001.95:1
- lime-6003.06:1
- mauve-501.04:1
- mauve-1001.12:1
- mauve-2001.26:1
- mauve-3001.51:1
- mauve-4002.58:1
- mist-501.04:1
- mist-1001.11:1
- mist-2001.25:1
- mist-3001.47:1
- mist-4002.44:1
- neutral-501.04:1
- neutral-1001.09:1
- neutral-2001.26:1
- neutral-3001.48:1
- neutral-4002.58:1
- olive-501.04:1
- olive-1001.10:1
- olive-2001.23:1
- olive-3001.43:1
- olive-4002.32:1
- olive-5004.25:1
- orange-501.06:1
- orange-1001.15:1
- orange-2001.36:1
- orange-3001.70:1
- orange-4002.38:1
- orange-5002.89:1
- orange-6003.60:1
- pink-501.09:1
- pink-1001.18:1
- pink-2001.39:1
- pink-3001.82:1
- pink-4002.76:1
- pink-5003.58:1
- purple-501.07:1
- purple-1001.18:1
- purple-2001.37:1
- purple-3001.78:1
- purple-4002.79:1
- purple-5004.12:1
- red-501.09:1
- red-1001.22:1
- red-2001.45:1
- red-3001.92:1
- red-4002.89:1
- red-5003.81:1
- rose-501.10:1
- rose-1001.20:1
- rose-2001.42:1
- rose-3001.92:1
- rose-4002.86:1
- rose-5003.75:1
- sky-501.07:1
- sky-1001.15:1
- sky-2001.33:1
- sky-3001.67:1
- sky-4002.18:1
- sky-5002.71:1
- sky-6004.02:1
- slate-501.05:1
- slate-1001.10:1
- slate-2001.23:1
- slate-3001.49:1
- slate-4002.63:1
- stone-501.04:1
- stone-1001.09:1
- stone-2001.26:1
- stone-3001.49:1
- stone-4002.59:1
- taupe-501.04:1
- taupe-1001.13:1
- taupe-2001.26:1
- taupe-3001.49:1
- taupe-4002.55:1
- teal-501.04:1
- teal-1001.13:1
- teal-2001.26:1
- teal-3001.48:1
- teal-4001.86:1
- teal-5002.42:1
- teal-6003.67:1
- violet-501.10:1
- violet-1001.19:1
- violet-2001.39:1
- violet-3001.86:1
- violet-4002.85:1
- violet-5004.40:1
- yellow-501.03:1
- yellow-1001.07:1
- yellow-2001.16:1
- yellow-3001.33:1
- yellow-4001.57:1
- yellow-5001.91:1
- yellow-6002.94:1
- zinc-501.04:1
- zinc-1001.10:1
- zinc-2001.27:1
- zinc-3001.48:1
- zinc-4002.62:1
Method
Source: installed tailwindcss theme.css default --color-*-* stops. Contrast: WCAG 2.1 relative luminance for normal text (AA ≥ 4.5:1). Suggested ink uses the same algorithm as reference pages (never labels a failing pair as a suggestion). Dataset: Tailwind CSS v4 default @theme --color-* stops. Total stops: 286.