Accessible Color Palette Generator
Generate an 11-shade color palette where every shade passes WCAG AA contrast against your background. Failing shades get auto-fixed. Pick a Tailwind color family or a custom hue, then export to tailwind.config.js or CSS variables. Just need a plain 50-950 scale from a brand hex? Use the Tailwind color palette generator.
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.
Your colours are covered. What about your components?
Contrast is the part tools can verify. Custom dropdowns announcing their state, modal focus traps, and keyboard-only checkout are the parts that need a person. We audit manually against WCAG 2.1 AA, from $499.
Frequently Asked Questions
Common questions about generating accessible color palettes that pass WCAG AA contrast.
It generates a Tailwind-style 11-shade colour palette (50-950) where every shade meets WCAG AA contrast requirements against your chosen background colour. Shades that would otherwise fail get auto-adjusted so you can use the full palette safely.
When a shade does not have enough contrast against your background (below 4.5:1 for AA), the tool uses binary search to shift its lightness until it passes. It caps adjustment at ±30% lightness to keep the shade recognisable within the palette.
Use the background your text will sit on. For light themes, that is typically white (#ffffff) or a light grey like Slate 50 (#f8fafc). For dark themes, use your actual dark background — for example, Slate 800 (#1e293b) or Slate 900 (#0f172a).
If you are using Tailwind CSS, export as tailwind.config.js and paste it into your extend.colors config. If you prefer framework-agnostic tokens or use vanilla CSS, export as CSS custom properties and add them to your :root block.
Those shades originally failed WCAG AA contrast (below 4.5:1) against your background. The tool shifted their lightness to meet the threshold. The original hex is preserved internally so you can see the difference.
Yes. Select "Custom Hue" from the dropdown and use the hue and saturation sliders to dial in any colour. The palette is generated from HSL values, not from any preset.
Why use an accessible color palette generator?
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 accessible 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.