Question 1

What is a color palette audit?

Accepted Answer

A palette audit tests every foreground/background color combination in your design system against WCAG 2.1 contrast requirements. It produces a pass/fail matrix so you can identify which pairings are safe for production and which need adjustment.

Question 2

How many colors should an accessible design system palette have?

Accepted Answer

A well-structured accessible design system typically defines 5–7 semantic color roles: primary (brand action), secondary, accent, neutral (text/background), success, warning, and error. Each role carries a specific usage contract with implied contrast guarantees.

Question 3

What do the AA, AAA, and UI badges mean in the matrix?

Accepted Answer

AA means the color pair meets WCAG 2.1 AA (≥4.5:1 for normal text). AAA means it meets the enhanced level (≥7:1). UI means it meets the 3:1 threshold required for UI components and large text but not normal text. Fail means the pair does not meet any WCAG level.

Question 4

Can I export the palette audit results?

Accepted Answer

Yes. You can copy a Markdown report of all contrast ratios and badge levels, export the palette as a Tailwind theme config, or copy the raw color values. The token exporter tool provides additional formats including CSS variables, SCSS, and Figma Tokens JSON.

FG \ BG	primary	secondary	accent	neutral	success	warning	error
primary	—
secondary		—
accent			—
neutral				—
success					—
warning						—
error							—

Palette Auditor