Accessible color palette generator
Start from any color and get a five-color palette where every text and background pairing passes WCAG AA.
How to use it
- Enter a starting color, such as your brand color, or click Random color.
- Check the preview and the contrast table; every pairing listed passes AA.
- Copy single colors, or export the whole palette as CSS variables, Tailwind or JSON.
- The page address updates, so you can share the palette.
How it works
The background and surface are very light tints of your color's hue, and the text color is a very dark shade of it. The primary color is your color, and the secondary is its complement.
If either accent is too light to read on the backgrounds, it's darkened, keeping the hue, just until it reaches 4.5:1, the WCAG AA minimum for normal text. That's why a bright starting color like yellow comes back as a deeper gold.
The table lists each pairing the palette is designed for, with its exact contrast ratio.
Related tools
Questions
Why did my color change?
Bright colors like yellow can't reach 4.5:1 on a light background, so the generator darkens them, keeping the hue, just enough to pass.
Does every combination of these colors pass?
Every pairing in the table passes AA. Other combinations, like primary text on secondary, aren't part of the design and may not.
Is AA enough?
WCAG AA is the level most laws and policies ask for. For AAA, check individual pairings in the contrast checker.