Why Even Palette Steps Score Better Than Odd
IBM Carbon: 12 steps. Adobe Spectrum: 18 steps. U.S. Web Design System: 12 steps. Salesforce Lightning: 14 steps.
The top four design systems in the benchmark all use even step counts. Tailwind uses 13 — odd. Shopify uses 17 — odd. Both score lower.
This isn't aesthetic preference. It's arithmetic.
The Problem With Odd Steps
WCAG 4.5:1 requires a minimum lightness distance between text and background. For a well-built palette, that distance maps to a contrast span K — the minimum number of steps between any two shades to guarantee readable text.
The theoretical minimum span density is λ ≈ 0.501 — just above half the palette range. So for any N-step palette:
K_ideal = ⌈0.501 × (N−1)⌉For even N:
| N | K_ideal | K / (N−1) |
|---|---|---|
| 12 | ⌈5.51⌉ = 6 | 6/11 = 0.545 |
| 14 | ⌈6.51⌉ = 7 | 7/13 = 0.538 |
| 18 | ⌈8.52⌉ = 9 | 9/17 = 0.529 |
For odd N:
| N | K_ideal | K / (N−1) |
|---|---|---|
| 13 | ⌈6.01⌉ = 7 | 7/12 = 0.583 |
| 15 | ⌈7.01⌉ = 8 | 8/14 = 0.571 |
| 17 | ⌈8.01⌉ = 9 | 9/16 = 0.563 |
With even steps, K/(N−1) lands just above λ — close to ideal. With odd steps, it jumps further above λ — more of the palette is consumed per accessibility requirement.
The reason: when N is even, (N−1) is odd and K = N/2 fits cleanly. When N is odd, (N−1) is even and λ × (N−1) lands just past an integer boundary — the ceiling pushes K one step higher, increasing density.
What Dense vs. Sparse Means
When K is small relative to N, the palette is dense — many shades fit inside one contrast span. Text, border, hover, and selected roles can coexist in a narrow range without crowding.
When K is large relative to N, the palette is sparse — most shades are consumed just meeting the WCAG floor. Secondary roles have less room.
For Tailwind (N=13, K=8): 67% of the palette range is spent on one contrast requirement. For IBM Carbon (N=12, K=6): 55% — 12 points better, using fewer steps.
More steps do not automatically mean more usable shades. A 13-step palette with K=8 is less efficient than a 12-step palette with K=6.
Full Coverage
There's a second advantage to even steps with K ≈ N/2: every shade has an accessible text partner.
For shade at index i, the text color is at i+K (light surface) or i−K (dark surface). When K = N/2:
- Shade 0: text at K ✓
- Shade N/2: text at 0 or N−1 ✓
- Shade N−1: text at N−1−K ✓
Every shade can be a background. None are stranded.
When K > N/2, shades near the middle of the ramp lose their partner — the required distance pushes outside the palette range. Those shades become unusable as backgrounds.
The Benchmark Confirms It
| System | Steps | K | K/(N−1) | Score |
|---|---|---|---|---|
| Adobe Spectrum | 18 (even) | 9 | 0.529 | 88.59 |
| IBM Carbon | 12 (even) | 6 | 0.545 | 88.46 |
| Tailwind CSS | 13 (odd) | 8 | 0.667 | 81.04 |
| Radix UI | 13 (odd) | 10 | 0.833 | 67.80 |
| Shopify Polaris | 17 (odd) | 15 | 0.938 | 57.16 |
The pattern holds across all 11 systems.
Practical Takeaway
Pick an even step count. 12 is a good default — K=6 lands near λ, full coverage, compact. 18 if you need finer granularity.
Avoid 13, 15, 17 — each adds one step but forces K up by one too, with no efficiency gain.