Two Tailwind palette pickers, one live preview, four WCAG verdicts. If your pair fails, the tool suggests a shade in the same hue that passes AA.
neutral-950 on neutral-50
Large display headline, 34px, weight 600.
Eighteen-pixel subheadline — still counts as "large" under WCAG AA when weight is 700+.
Body paragraph at 14px. WCAG AA normal-text threshold is 4.5:1; anything below trips an accessibility audit. This preview renders the live foreground-on-background at the real sizes browsers use.
Caption text — 12px, treated as normal for WCAG.
18.97:1
Contrast ratio
#0A0A0A / #FAFAFA
Foreground
Background
| Level | Normal text | Large text (18pt+ or 14pt bold) | UI / graphics |
|---|---|---|---|
| AA | 4.5:1 | 3:1 | 3:1 |
| AAA | 7:1 | 4.5:1 | — |
Pick a foreground
Browse the full Tailwind palette.
Pick a background
Or use the swap button to try the pair in reverse.
Read the verdict
AA / AA-Large / AAA / AAA-Large badges flip green as you cross each threshold.
Apply a suggestion
If the pair fails AA, the tool suggests a nearby shade in the same family that passes.
AA requires a 4.5:1 contrast ratio for normal text and 3:1 for large text (18pt+, or 14pt+ bold). AAA is stricter: 7:1 for normal, 4.5:1 for large. AA is the web accessibility standard most teams target; AAA is a best-effort bar.
Yes — within each color, shades 50 and 950 are near-white and near-black, so pairing either with the opposite end of another color typically passes AA. The closer two shades are in brightness, the harder they fail. The suggestion helper picks the closest AA-compliant shade in the same hue so your design intent isn't thrown off.
WCAG treats bold weight (≥700) as a compensating factor — heavier strokes are easier to read at smaller sizes. Normal 14pt is "normal"; bold 14pt gets the looser 3:1 threshold.
No — everything runs in your browser. Copy the hex values or the Tailwind token labels and use them in your design tokens or Tailwind config.
Shade generator
Generate a full 50→950 Tailwind palette from any base color, along the Tailwind lightness curve.
Palette extractor
Drop an image and pull out its 5, 8, or 12 dominant colors — with Tailwind-nearest matches.
Translating screenshots into every locale is what lokal was built for. Upload once, ship to every store.
Explore lokal