Contrast Span — The Number WCAG Doesn't Give You
WCAG AA requires 4.5:1 contrast between text and background. That's a ratio between two specific colors. You test a pair, get a number, pass or fail.
But a design system palette isn't a pair. It's a sequence — 10, 12, 18 shades. And the question isn't "do these two pass?" The question is: across this whole sequence, how far apart do any two shades need to be to guarantee 4.5:1?
That distance is the contrast span, written as K.
A Concrete Example
Take Tailwind CSS blue — 11 shades from blue-50 to blue-950.
Pick any two shades 4 steps apart:
| Pair | Contrast |
|---|---|
| blue-50 / blue-400 | 2.8:1 — fail |
| blue-100 / blue-500 | 3.1:1 — fail |
| blue-600 / blue-950 | 3.4:1 — fail |
Pick any two shades 6 steps apart:
| Pair | Contrast |
|---|---|
| blue-50 / blue-600 | 6.2:1 — pass |
| blue-100 / blue-700 | 7.1:1 — pass |
| blue-400 / blue-950 | 5.8:1 — pass |
For Tailwind blue, every pair that is 6 or more steps apart passes 4.5:1. No pair 5 steps apart guarantees it.
K = 6.
What K Means
K is not about one pair. It's a guarantee for the whole palette:
Any two shades separated by at least K steps will pass WCAG AA for body text — no matter which shades they are.
You don't need to check pairs individually anymore. You check once, get K, and the entire palette is characterized.
Why K Matters
Once you know K, you know what's possible in your design system.
In a 12-step palette with K=6: the minimum distance for readable text uses up half the palette. Text color must be at least 6 steps away from the background. That leaves the remaining steps for borders, hover states, selected states — all competing for the narrower contrast ranges.
In a 12-step palette with K=4: you have more room. More shades can serve multiple roles without crowding.
K is not just a number — it's the constraint every component in your system works within.
K Is a Property of the Palette, Not a Pair
This is the shift from checking individual pairs to understanding the palette as a whole.
WCAG tells you: "these two specific colors work together."
K tells you: "here is the minimum structural distance that always works, anywhere in this palette."
The next question is: given K and the palette size N, how efficiently is the contrast space being used? That's contrast efficiency.