MicroTools

Accessible Color Palette Generator

Generate a full AA-compliant color palette from your brand color.

About Accessible Color Palette Generator

Build a complete design-system color palette (primary, secondary, neutral, semantic) that guarantees WCAG AA contrast for text on every swatch. Input a brand base color and get 9-shade scales with contrast ratios pre-calculated.

How to Use

  1. 1Enter your brand base color as hex, RGB, or HSL.
  2. 2A 9-shade scale (50 to 900) is generated automatically.
  3. 3Each swatch shows its contrast ratio with the recommended text color.
  4. 4Toggle the color blindness simulation to check visual accessibility.
  5. 5Click "Copy CSS" to export as CSS custom properties.

Frequently Asked Questions

How is the palette generated?
The tool takes your base color and generates 9 shades (50–900) by adjusting lightness in HSL space. Each shade is tested for contrast against both white and black text to determine which to use.
What does "guaranteed AA" mean?
Every swatch in the palette has at least 4.5:1 contrast ratio with the recommended text color (white or black) shown on it, meeting WCAG 2.1 Level AA.
Can I export the palette as CSS variables?
Yes — click "Copy CSS" to get the full palette as CSS custom properties ready to paste into your stylesheet.
What about color blindness?
The tool includes a color-blind simulation preview (Deuteranopia, Protanopia, Tritanopia) so you can see how the palette looks for users with color vision deficiencies.

Tool Info

Category
compliance
Usage
Unlimited

Related Tools

WCAG Contrast Checker

Check AA/AAA contrast ratio for any two colors. Get fix suggestions instantly.

Non-Text Contrast Checker

Validate 3:1 contrast for borders, icons, focus rings, and UI states.

A11y Issue Triage Board

Turn accessibility audit findings into a prioritized fix plan with severity scoring.

More compliance tools

WCAG Contrast Checker

Check AA/AAA contrast ratio for any two colors. Get fix suggestions instantly.

Non-Text Contrast Checker

Validate 3:1 contrast for borders, icons, focus rings, and UI states.

Heading Structure Auditor

Detect skipped levels, duplicate H1s, and broken heading hierarchy in HTML/Markdown.

Link Text Quality Checker

Find "click here", duplicate links, and empty anchors that fail WCAG 2.4.4.