What This Palette Generator Does Differently
Most color palette generators create aesthetically pleasing combinations. This one does that too — but it also automatically scores every color combination against WCAG contrast requirements, so you know whether the palette you’re building is actually usable for text before you commit to it.
The colorblind simulation mode is the other feature that matters: it renders your palette as it appears to users with deuteranopia (red-green), protanopia (red), tritanopia (blue-yellow), and achromatopsia (complete colour blindness). About 8% of men and 0.5% of women have some form of colour vision deficiency — designing without checking is designing for the majority and ignoring the rest.
Export Formats
CSS custom properties — exports your palette as --color-primary: #3a7fd5; CSS variable declarations, ready to paste into your stylesheet.
Tailwind config — exports as a colors object for tailwind.config.js, so the palette integrates directly with Tailwind’s utility classes.
JSON — a clean JSON object for use in design tokens, JavaScript, or feeding into design tools like Figma via plugins.
WCAG Contrast Requirements
WCAG 2.1 AA (the legal standard in most jurisdictions) requires:
- 4.5:1 contrast ratio for normal body text
- 3:1 contrast ratio for large text (18pt+ or 14pt+ bold)
- 3:1 contrast ratio for UI components and graphical objects (added in WCAG 2.2)
The palette generator scores each foreground/background combination and flags which pairs pass AA, which pass AAA, and which fail entirely.
Frequently Asked Questions
What’s the difference between AA and AAA compliance?
AA is the minimum standard required for legal accessibility compliance in most jurisdictions. AAA is a higher standard — 7:1 contrast for normal text — recommended but not legally required. For body text, aim for AA minimum; AAA is worth targeting for critical UI elements.
Can I generate palettes from an existing brand color?
Yes. Enter your primary brand color as the seed and the generator will build complementary and accessible combinations around it.
What is colorblind simulation useful for?
About 1 in 12 men has some degree of colour vision deficiency. If your UI uses colour alone to convey meaning (red for errors, green for success), users with colour blindness may miss those signals. The simulation shows you what they see so you can add secondary cues (icons, labels, patterns).
Can I export to Tailwind CSS?
Yes. The generator exports a colors object formatted for tailwind.config.js that integrates directly with Tailwind utility classes.
Related Tools
- WCAG Contrast Checker — test specific color pairs for AA/AAA compliance
- Schema Markup Generator — for developers building accessible pages
- Readability Analyzer — check that your content is as accessible as your colors