The standard WCAG contrast checker on Google asks for a foreground color and a background color, then computes the ratio. For a single button, this is fine. For a real design system, it misses 90% of the actual problem.
The N×N problem
A real palette has 8–12 colors: a primary, a couple of accents, a few grays for text, a few backgrounds, semantic colors for success/warning/error. With 10 colors, you have 90 ordered pairings (foreground on background). Some are designer intent (text on card background). Many are not (your brand purple on the success-message background) — but a designer who isn't careful might use them anyway.
A 10-pair check covers ~10% of pairings. The other 90% are where accessibility failures hide.
AA, AAA, and UI components are different bars
WCAG 2.1 sets three contrast thresholds: 4.5:1 for normal text (AA), 7:1 for normal text (AAA), and 3:1 for UI components and large text. Many palettes pass AA for body text but fail AAA — and that's defensible. What's not defensible is failing the 3:1 UI component bar for buttons or borders, because that's the threshold for users with low vision distinguishing interactive elements.
A palette tool needs to surface all three bars per pair, not just one.
Colorblindness is not one condition
About 8% of men and 0.5% of women have some form of color vision deficiency. The most common are deuteranopia (red-green confusion, ~5% of men) and protanopia (~1%). Tritanopia (blue-yellow) is rare. Achromatopsia (full color blindness) is rarer still but worth designing around.
A palette that passes contrast for normal vision can fall apart under deuteranopia simulation — your "success green" and "error red" can become the same shade of brown.
The Machado 2009 colorblindness simulation is the academically-correct filter. It's what scientific papers use. Most online palette tools use cheaper approximations that overstate or understate the effect.
What "test the palette" actually means
A real palette accessibility check needs:
- Full N×N contrast matrix, not a single pair
- AA, AAA, and UI component badges per pair
- Colorblindness simulation applied to the WHOLE palette so you can see all the pairings under each deficiency
- A way to share the palette state via URL so designers and engineers see the same view
Our palette checker does all of these. Drop in your brand colors, see the full matrix with AA/AAA/UI badges for every pair, switch to deuteranopia or protanopia or tritanopia and watch the matrix update. Share-link URLs encode the palette so you can send the exact view to your design lead.