Guide
How to create an accessible color palette
Accessible color is mostly about contrast and not relying on color alone. Here is how to get it right without making your design dull.
Meet contrast targets
Body text needs at least 4.5:1 against its background (WCAG AA); large text and UI components need 3:1. Aim higher (7:1) where you can.
Don’t rely on color alone
Use text labels, icons, or patterns alongside color so meaning isn’t lost for color-blind users or in greyscale.
Mind adjacent surfaces
Cards, borders, and dividers also need enough contrast against their neighbors to be perceivable.
Test real pairings
Check every text/background combination — not just black on white — in the contrast checker. Then validate the full design with assistive technology.
Frequently asked questions
What is the minimum contrast for text?
4.5:1 for normal text and 3:1 for large text under WCAG AA. AAA requires 7:1 and 4.5:1 respectively.
How do I make a bright palette accessible?
Keep bright colors for large elements or accents, and pair text with a darker or lighter neutral that meets contrast targets.