How to build an accessible color palette: design tokens that pass WCAG AA from the start
Building an accessible color palette means defining text and background color pairs that pass WCAG AA from the start, rather than retrofitting contrast after design. A systematic approach uses a limited set of foreground colors (typically 2-3 text shades and 1-2 accent colors) paired with carefully chosen background tints.
Calculator
Contrast Checker
Check color contrast for accessibility.
Large Text
Normal text sample.
How this is calculated
The practical approach is to define your accessible pairs as design tokens. For light mode: dark text (#1a1a1a to #333333) on light backgrounds (#ffffff to #f5f5f5). For dark mode: light text (#e5e5e5 to #ffffff) on dark backgrounds (#1a1a1a to #2d2d2d). Accent colors (brand blues, greens, reds) are the hardest to make accessible and should only be used on known-safe backgrounds, typically white or very light gray. Use a contrast checker to validate every pair in your token set before implementation.
Verdict
Define your accessible color pairs as design tokens and enforce them in code. A palette with 3 text colors × 3 background colors = 9 validated combinations is more maintainable than ad-hoc color picking. Use CSS custom properties to create semantic color tokens (--color-text-primary, --color-bg-surface) that map to accessible values.