skip to content

In a design system's color ramps, how can tone steps be designed so any two tones a fixed number of steps apart pass WCAG contrast?

level: middleimportance: must knowfreq 48%

answer

  1. contrast depends only on luminance
  2. same step, same luminance, every hue
  3. a constant ratio between neighbours
  4. distance becomes a contrast guarantee
  5. compare against the unrounded ratio

basics

~20 s

Give every step a target relative luminance shared by all hues, and space steps so neighbours differ by a constant contrast ratio. Contrast then depends only on step distance, so one published distance per threshold holds for every hue.

solid answer

~50 s

WCAG contrast depends only on relative luminance: `(L1 + 0.05) / (L2 + 0.05)`. So if every hue's ramp puts a given step at the same target luminance, pairing rules stop depending on hue: a rule proven on gray holds for teal and purple. If the steps are also spaced so that `L + 0.05` grows by a constant factor per step, the ratio between two tones depends only on how many steps apart they are, anywhere on the ramp. The system then publishes distances: at least D steps for 4.5:1 body text, at least E for 3:1 large text and non-text parts. Designers pick pairs by counting steps instead of checking each one. If steps are spaced by equal perceptual lightness instead, the per-step ratio varies along the ramp, so the rule must use the worst-case distance, and flat opaque colors are the only case it covers.

code

pseudocode · 10 lines
pseudocode
// Build an n-step ramp whose neighbouring steps differ by a constant contrast ratio
flare = 0.05
k = ((1.0 + flare) / (0.0 + flare)) ^ (1 / n)        // 21^(1/n)
for step in 0..n:
    targetLuminance[step] = flare * k^step - flare    // 0 at step 0, 1 at step n
    // every hue's tone at this step is tuned to hit targetLuminance[step]

// Minimum step distance that guarantees a ratio r
minDistance(r) = ceil( log(r) / log(k) )
// n = 10: minDistance(3.0) = 4, minDistance(4.5) = 5, minDistance(7.0) = 7

go deeper

for a junior

Remember that contrast is computed from luminance alone, and that the system's rule tells you how many steps apart two tones must be for text or for icons.

for a middle

Explain the two moves: same luminance per step across hues, and spacing that makes the ratio depend only on distance. Be ready to contrast constant-ratio with equal-lightness spacing.

for a senior

Derive the published distances from the ramp, handle hues that cannot reach a target, and name the cases the rule does not cover, such as overlays and images.

for a principal

Weigh a strict, contrast-first ramp against a visually smoother one, and decide how many exceptions the system will document rather than let teams guess.

## Why contrast can be designed in WCAG measures contrast with one formula: **contrast ratio = (L1 + 0.05) / (L2 + 0.05)**, where L1 is the **relative luminance** of the lighter color and L2 that of the darker one. Relative luminance is a weighted measure of how much light a color emits, normalised to 0 for the darkest black and 1 for the lightest white, so ratios run from 1:1 to 21:1. Hue and saturation enter only through their effect on luminance. That single fact is what makes it possible to design a palette where contrast is a property of the structure, not something discovered pair by pair. The thresholds a pairing system has to hit come from WCAG 2.2: - **1.4.3 Contrast (Minimum)**, Level AA: at least **4.5:1** for text, and **3:1** for large-scale text (at least 18 point, or 14 point bold). - **1.4.11 Non-text Contrast**, Level AA: at least **3:1** against adjacent colors for visual information needed to identify components and their states, and for parts of graphics needed to understand the content. - **1.4.6 Contrast (Enhanced)**, Level AAA: **7:1** for text and **4.5:1** for large-scale text, for teams that target it. ## Same step, same luminance, every hue Imagine a fitness-tracker companion app with ramps for a brand teal, a heart-rate red, a sleep purple and a neutral gray. If each ramp is tuned by eye, teal step 600 and purple step 600 may differ a lot in luminance, and every pairing question has to be answered per hue. The first move is to give each **step number a target luminance** and make every hue hit it, adjusting lightness and saturation per hue until the luminance matches. Then step 600 is equally dark in every ramp, and a rule proven for gray holds for teal, red and purple too. Some hues resist: a highly saturated yellow is inherently light, so at dark steps it drifts toward olive or brown, and a vivid blue cannot stay vivid at very light steps. The system accepts those shifts because the luminance target is what keeps pairs predictable. ## Spacing the steps | Spacing | Ratio between neighbouring steps | What a distance rule needs | |---|---|---| | **Constant contrast ratio** (each step's L + 0.05 is a fixed multiple of the previous one) | Identical everywhere on the ramp | One distance per threshold, exact | | **Equal perceptual lightness** | Varies along the ramp | The worst-case distance anywhere on the ramp | | **Tuned by eye** | Unknown | A check of every pair | With constant-ratio spacing, the ratio between two steps is the per-step factor raised to the power of their distance, so it depends only on how many steps apart they are. Equal-lightness spacing often looks smoother, and many systems prefer it, but then a distance rule has to be set by the part of the ramp where each step buys the least contrast. ## A worked example Take an illustrative 11-step ramp from pure black (step 0) to pure white (step 10) with constant-ratio spacing. Its per-step factor is the tenth root of 21, about 1.356. 1. Four steps apart gives about 3.38:1, which clears 3:1 for large text and non-text parts. 2. Five steps apart gives about 4.58:1, which clears 4.5:1 for body text. 3. Seven steps apart gives about 8.4:1, which clears the AAA 7:1. Real ramps rarely include pure black and white at the ends, so the factor and the distances change, but the method is the same: compute the factor, then the minimum distance for each threshold, and publish those distances. ## Publishing and using the rule - State the rule per use: body text, large text, non-text parts. - Compare computed ratios **unrounded**: WCAG's guidance says 4.499:1 does not meet 4.5:1, so a rule built on rounded numbers can hide a failing pair. - Keep a short list of documented exceptions where the rule is not enough, instead of letting teams guess. - Treat the rule as a floor for legibility, not a promise of comfort: thin typefaces are harder to read even at passing ratios. ## Where the construction stops A step-distance guarantee holds only for flat, opaque colors placed directly on each other. Translucent layers, gradients and text over photographs change the effective background, so those cases still need checking. The guarantee also covers one ramp set at a time; how each mode's ramp is verified belongs to theming, and the tools used to audit live screens belong to accessibility testing. Within those limits the payoff is large: designers choose pairs by counting steps, reviewers check the count, and nobody hand-verifies hundreds of combinations every time a hue is added.

  • Why does tuning every hue to the same luminance at each step matter, if the gray ramp already passes?
    Because contrast follows luminance, not hue. If teal step 600 is lighter than gray step 600, a rule proven on gray fails for teal. Matching luminance per step makes every proven distance portable across hues, so the pairing rules stay short.
  • Why do many systems still space steps by perceptual lightness rather than by constant contrast ratio?
    Equal-lightness steps usually look more even to the eye, which matters for tints, hovers and illustrations. The cost is that contrast per step varies along the ramp, so the published distance must be the worst case, and some pairs that would pass are left off the approved list.
  • Does a step-distance rule cover text on a translucent overlay over a photo?
    No. The rule assumes flat, opaque colors placed directly on each other. A translucent layer or an image changes the effective background, so those combinations still need their own check against the lightest background they can sit on.

saying these in an interview costs you the question

  • Two colors with clearly different hues always have enough contrast.
  • HSL lightness values can be compared to predict WCAG contrast.
  • A ratio of 4.49:1 rounds up, so it passes 4.5:1.
  • Once the gray ramp passes, the same step numbers pass in every hue.
  • A step-distance rule also guarantees text over photos and gradients.