Design System Color Palettes — Accessibility Ranking
How accessible and how well-built are the color palettes of popular design systems? Each palette is scored on contrast span — how many steps apart two shades must be to reach WCAG AA 4.5:1 — and five perceptual metrics combined into one composite score. Method and discussion: Which Design System Has the Best Color Palette?
| # | Design system | Ramps | Steps | K (4.5:1) | Score |
|---|---|---|---|---|---|
| 1 | Adobe Spectrum | 10 | 18 | 9 | 88.59 |
| 2 | IBM Carbon | 12 | 12 | 6 | 88.46 |
| 3 | U.S. Web Design System | 25 | 12 | 6 | 87.67 |
| 4 | Salesforce Lightning 2 | 13 | 14 | 7 | 86.31 |
| 5 | GitHub Primer | 13 | 12 | 6 | 85.45 |
| 6 | Atlassian | 9 | 14 | 8 | 84.23 |
| 7 | Tailwind CSS | 18 | 13 | 8 | 81.04 |
| 8 | Ant Design | 12 | 12 | 9 | 78.76 |
| 9 | Material UI v4 | 19 | 12 | 11 | 69.43 |
| 10 | Radix UI | 16 | 13 | 10 | 67.80 |
| 11 | Shopify Polaris | 12 | 17 | 15 | 57.16 |
Lower K means more usable shade pairs. Click a design system for its full audit, every ramp, and a one-click link to open it in the free Palette Generator.