Steps on a palette should be perceptually even
Aliases: even colour stops · palette jumping
What it is
A grey ramp runs 100 to 900. Designers believe each step is “a bit darker”. Laid out, 200 and 300 almost sit on top of each other, while 700 to 800 feels like a different grey. That board cannot drive hover, pressed and disabled — the steps lie. A palette is a ruler inside the product; neighbouring stops must be even in appearance before the numbers can be used as spacing.
Choosing a uniform space to generate the ramp is the upstream method. This claim is about whether the column you actually ship looks even.
Why it happens
A column of colour is treated as a scale only if adjacent intervals are similar. When they are not, 200 and 300 collapse into one stop, so “one step darker” in a component does nothing; 700 to 800 jumps so far that pressed looks like a different material. Unevenness often comes from hand-tuning without reviewing the whole column, or from twisting a single hex in RGB without recomputing its neighbours. Simultaneous contrast then rewrites the ends: the lightest stop vanishes on white, the darkest sticks to a dark ground, the middle looks even, the ends look worse.
Studying it
Hand shuffled swatches to observers and ask them to order “light to dark, even steps”, then correlate with the design numbers. Independent variables: generated in a uniform space or not, whether single stops were later hand-twisted. Dependent variables: variance of judged adjacent gaps, misplacements (400 next to 200).
Interval matching works too: given the gap from 100 to 300, have people tune 500 and see whether it lands near 700.
Where it stops holding
- A three-stop functional set (default / hover / pressed) is not sensitive to evenness so long as the three separate.
- Evenness is along one axis, usually lightness. A rainbow legend even in hue angle cannot be checked with a lightness ruler.
- Colour-vision-deficient observers rewrite evenness along green–red; do not accept the palette on the standard observer alone.
Applying it
- Accept the whole column on a neutral ground. Do not tune one stop against a single component.
- If a stop jumps, resample the column. Do not twist that one hex back and pretend.
- Hover / pressed as “walk a fixed number of stops” only if those stops really have similar subjective gaps.
- How to check: hide the numbers and ask which pair is farthest and which pair is almost the same. If the same ends keep coming up, rebuild that stretch.