Blog · Accessibility

Accessible Color Palettes

How to build color palettes that pass WCAG AA and AAA — from initial choice to final verification.

Published November 15, 2026 · 7 min read

Why Most Palettes Fail

Most color palettes fail accessibility because they were chosen for aesthetics alone. A palette that looks beautiful on a moodboard may contain combinations with contrast ratios of 2:1 or 3:1 — well below WCAG AA for body text.

The solution is not to abandon aesthetics. It is to design the palette with accessibility built in from the start, not verified afterward.

Start With a Role-Based Palette

Every accessible palette should include colors for specific roles:

  • Background: very light (95%+ lightness) for light mode
  • Surface: slightly different lightness (97% or 92%) for cards and panels
  • Text primary: very dark (10-18% lightness) for body content
  • Text secondary: medium dark (40-50% lightness) for muted content
  • Border: light-medium (75-85% lightness)
  • Primary action: saturated brand color, medium lightness (45-55%)
  • Semantic colors: success, warning, error — each with sufficient contrast

Each role has accessibility requirements based on where it will be used. Text colors need 4.5:1 against their backgrounds; action colors need 4.5:1 against their button backgrounds; borders need 3:1 for essential separations.

The Scale Approach

Professional design systems generate palettes as scales — usually 9 or 10 steps from 50 (lightest) to 900 (darkest). This gives you:

  • 50-100: backgrounds and surfaces
  • 200-300: borders and subtle dividers
  • 400: disabled states
  • 500: base brand color
  • 600: hover state
  • 700-800: emphasis and active states
  • 900: text and heavy contrast

Because every step shares the same hue and saturation, all combinations from a single scale have predictable contrast. Use our UI Palette Generator to produce a complete scale from any base color.

The Contrast Budget Method

A practical way to guarantee accessibility: for each text role, define the contrast ratio you need and work backward to the color.

Example for light mode:

  • Body text: needs 7:1 against background. With a white background (L=1.0), body text must have L ≤ 0.088 → roughly #15243B or darker.
  • Secondary text: needs 4.5:1 minimum but aim for 7:1. With white background, secondary text must have L ≤ 0.155 → roughly #4A5A75 or darker.
  • Borders (essential): need 3:1. With white background, borders must have L ≤ 0.30 → roughly #7A8699 or darker.

Designing to a contrast budget from the start avoids the "we have to change the whole palette at the end" problem.

Test Every Combination

After generating a palette, test every foreground-background combination that will actually appear in the product. This usually means:

  • Every text color against every background color
  • Every button label against every button background
  • Every icon against its container
  • Every border against its adjacent surfaces

Our Color Scheme Analyzer automatically tests every pair in a palette against WCAG thresholds and reports which combinations pass and which fail.

Test With Color Blindness

Contrast ratio alone does not guarantee accessibility. A palette can have excellent contrast ratios and still fail for users with color vision deficiency — if two categories look identical to a protanope, contrast does not help.

Use our Color Blindness Simulator to test every categorical color choice. If two colors become indistinguishable in any CVD type, add redundancy: pattern, label, position or shape.

Don't Forget Dark Mode

A palette that passes AA in light mode does not automatically pass in dark mode. Dark mode palettes need to be generated and tested separately. Most design systems maintain separate light and dark color scales rather than trying to derive one from the other.

Frequently Asked Questions

Related Resources