Accessible brand colors that still look like a brand.
Accessible color does not mean beige buttons and a committee-approved sigh. It means your palette has enough contrast to be readable, enough range to handle states, and enough discipline to survive a real website.
The quick method
Start with one primary color, then choose a near-black, a near-white, one accent, and one semantic color. Most weak brand palettes fail because they only define a hero color, then improvise everything else.
Put every important text/background pair through the Hue contrast checker. If your main call-to-action fails normal text contrast, darken the background or switch to dark text.
WCAG checks before launch
- Test body text at 4.5:1 or better.
- Test large headings at 3:1 or better.
- Check buttons in normal, hover and disabled states.
- Keep one dark neutral and one light neutral in every palette.
- Do not rely on color alone for errors, warnings or success states.
Build the palette in Hue
Use the palette generator to create candidate sets, test the important pairs in contrast, then use the gradient generator only after the functional colors pass.
Check your palette before it ships.
Paste your foreground and background colors into Hue and get an instant WCAG AA/AAA result.
Open Contrast Checker