A11y Palette Generator

Generate a full WCAG-compliant color palette from your brand colors. Export as CSS variables, SCSS, Tailwind, or design tokens.

Free & unlimitedWorks offline

Brand colors (1/5)

Generated palette (13)

Colors

20/156

Pass AA (4.5:1)

8/156

Pass AAA (7:1)

Export palette

:root {
  --color-primary: #3b82f6;
  --color-primary-dark: #0846ab;
  --color-primary-light: #74a4f1;
  --color-secondary: #a2690c;
  --color-accent: #ed1265;
  --color-neutral--9-0-0: #18191b;
  --color-neutral--7-0-0: #494c50;
  --color-neutral--5-0-0: #7a7e85;
  --color-neutral--3-0-0: #bdbfc2;
  --color-neutral--1-0-0: #f2f2f3;
  --color-success: #1c8649;
  --color-warning: #cb850a;
  --color-error: #b31919;
}

All processing happens in your browser. No data is sent to any server.

About this tool

1
Enter a brand color
Pick your primary/brand color as the starting point.
2
Review palette
An accessible palette is auto-generated with contrast-safe variants.
3
Check matrix
The contrast matrix shows AA/AAA pass/fail for every color pair.
4
Export
Export as CSS, SCSS, Tailwind config, or JSON.

WCAG AA requires a contrast ratio of at least 4.5:1 for normal text.
The palette automatically generates darker/lighter variants that maintain contrast.
Adjust any color manually and the matrix updates live with new warnings.