How to check if your color palette is accessible

Checking one pair isn't enough

A contrast checker tells you whether a specific foreground/background combination meets WCAG standards. That's useful — but a palette typically has 4–8 colors, which means dozens of possible pairings. A palette can include several colors that individually contrast well against white but become nearly indistinguishable from each other in certain combinations.

If you only check the pairings you plan to use, you'll miss the ones that happen accidentally — through component reuse, theming, or another designer's layout decisions.

Start with a pairwise contrast check

For quick checks between two specific colors, the Contrast Checker gives you a ratio and pass/fail results against WCAG AA (4.5:1 for body text) and AAA (7:1). This is the right tool when you're evaluating a specific heading color against a specific background, or checking whether a button label is readable.

But don't stop here.

Audit the entire palette

The Palette Accessibility Audit evaluates every color pairing in your palette against WCAG at once. It shows you a contrast matrix, surfaces the strongest readable combinations, and gives you a clear picture of how much flexibility your palette actually provides.

A palette with "strong" coverage means you have multiple safe text/background options. "Limited" doesn't mean the palette is bad — it might be great for accents or illustration — but you'll need to be deliberate about where you place text.

This is especially useful for UI palettes where text readability across many surfaces is critical.

Simulate color blindness

Contrast ratios measure brightness difference. They don't tell you whether two colors are distinguishable from each other. Two greens might both pass contrast checks against white, but look identical to someone with deuteranopia.

The Color Blindness Simulator applies transformation matrices that approximate how your palette appears under protanopia, deuteranopia, tritanopia, and achromatopsia. Watch for colors that collapse into the same perceived tone — those are the pairings that will fail for users who rely on color distinction for meaning.

Red-green color vision deficiency affects roughly 8% of males. That's not an edge case.

A practical workflow

Here's a simple sequence that covers the bases:

You don't need to redesign your palette after every check. Often, small adjustments — shifting a lightness value, swapping an accent — are enough to move from "borderline" to "solid."

Common mistakes

Testing only against white backgrounds. Many palettes fail when colors are paired with each other, not just with white. Testing only at your desk monitor — mobile screens in sunlight have much lower effective contrast. Assuming "it looks fine to me" covers all users. And only testing the pairings you intended, rather than the pairings that will inevitably occur.