Accessible Palette Generator
Generate a full 11-shade colour palette where every shade passes WCAG AA contrast against your background. Export to Tailwind config 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 accessible colour palettes with WCAG contrast compliance.
Why generate an accessible colour palette?
Tailwind CSS ships with a gorgeous colour palette, but not every shade meets WCAG AA contrast when placed on your background. Light shades like blue-200 on white give a ratio well below the 4.5:1 threshold for body text. That means parts of your colour scale are unusable for accessible text — unless you adjust them.
This tool takes any Tailwind colour 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.