Tailwind CSS Color Palette Generator
Generate a full 11-shade Tailwind CSS color palette where every shade passes WCAG AA contrast against your background. Pick from any Tailwind color family or use a custom hue, then export to tailwind.config.js or CSS variables.
Palette Settings
Auto-fix failing shades
Adjust lightness to pass AA (4.5:1)
// Accessible palette generated by thefrontkit.com
// Background: #ffffff
// All shades pass WCAG AA (4.5:1) against the background
module.exports = {
theme: {
extend: {
colors: {
'blue': {
'50': '#f2f6fd',
'100': '#e0eafa',
'200': '#c1d5f5',
'300': '#9abaef',
'400': '#4b8df7',
'500': '#0b64f4',
'600': '#0950c3',
'700': '#0842a1',
'800': '#123773',
'900': '#0e2a58',
'950': '#081935',
},
},
},
},
};WCAG 2.1 Contrast Requirements
Normal Text (AA)
Body copy, labels, paragraphs (< 18pt)
4.5:1 minimumLarge Text (AA)
Headings, 18pt+ regular or 14pt+ bold
3:1 minimumUI Components
Borders, icons, focus indicators, controls
3:1 minimumPalette Tip
Light shades (50-200) rarely pass on white backgrounds. Switch to a dark background or enable auto-fix to generate an accessible palette for both themes.
Frequently Asked Questions
Common questions about generating Tailwind CSS color palettes with WCAG contrast compliance.
Why use a Tailwind CSS color palette generator with accessibility built in?
Tailwind CSS ships with a gorgeous color palette, but not every shade meets WCAG AA contrast when placed on your background. Light shades like blue-200 on white give a contrast ratio well below the 4.5:1 threshold for body text. That means parts of your Tailwind color scale are unusable for accessible text, unless you adjust them.
This color palette generator takes any Tailwind CSS color family (or a custom hue) and generates all 11 shades with contrast-checked results against your background. When auto-fix is enabled, shades that fail AA get their lightness shifted just enough to pass, keeping the palette visually coherent while meeting accessibility requirements.
How to use the generated palette
Export as tailwind.config.js and paste into your theme extend block, or export as CSS custom properties for vanilla CSS projects. Every shade in the export passes WCAG AA (4.5:1) against the background you selected.
Tips for accessible colour systems
- Generate separate palettes for your light and dark themes — what passes on white often fails on dark backgrounds.
- Use shades 600-950 for text on light backgrounds and 50-300 for text on dark backgrounds.
- Always test your actual component combinations. A palette is a starting point, not a guarantee.
- Decorative elements and disabled states are exempt from WCAG contrast requirements.
Ship accessible UIs faster
Our starter kits are WCAG-AA compliant out of the box. Contrast-checked, keyboard-tested, screen-reader verified.