Luminance difference ranks hierarchy more reliably than hue difference

What it is

A settings row paints “Current plan” in navy and “Renews on” in a teal of the same lightness. In colour they look “a bit different.” In greyscale they are one line. A hierarchy built on hue collapses when luminance contrast is missing. Two greys still rank if they differ in light and dark. Before asking colour to found a level, ask whether the greyscale still sorts. This is about what is treated as more important, not how a palette is stepped or how semantic colours are mapped.

Why it happens

Spatial structure rides a luminance-sensitive pathway: contrast, edges, and what sits on top of what take shape in the light–dark channel first. The hue pathway is better at “are these the same kind of thing?” than at a stable stronger/weaker order. Navy and teal at matched lightness split in hue and sit flat in luminance, so the ranking task is left gambling on a faint “fresher / cooler” impression that swings with display, ambient light and the observer’s colour vision. A greyscale test shuts the hue pathway and leaves luminance. What still ranks was written into light and dark. What does not was never there.

Studying it

Make a greyscale of the page that preserves relative luminance, and an equiluminant version that keeps hue and flattens lightness. Run first naming or first fixation on both. The independent variable is which channel remains (luminance only / hue only / full colour); the dependent is agreement with the intended order. Collapse on the equiluminant version and survival on greyscale means luminance is carrying hierarchy. Report whether the display was calibrated: an uncalibrated screen will smuggle luminance into a supposed “same lightness” pair.

Where it stops holding

Learned hue semantics — warning red, link blue — can still be read as “this is tappable / this is danger” when lightness is close. That is meaning, not rank. Observers with colour-vision deficiencies are left almost only with luminance, so equiluminant hue levels vanish for them. A small high-saturation patch can still be seen first even at matched lightness — that is capture, which can scramble a luminance order and belongs on a different card. In dark mode “darker = more important” flips; luminance difference still works, but which pole counts as high has to be redrawn.

Applying it

• Start hierarchy comps in greyscale. If title, body and caption do not split there, there is no hierarchy yet. “Brand green will add it” is not a pass.
• When colour marks a state (online, expired, error), also give a luminance or weight difference. Do not swap hue alone.
• If series colours in a chart are meant to say “this series matters more,” check that the important series still jumps in greyscale. If hue only identifies series, that is a legend code, not a hierarchy.
• Check: convert a screenshot to greyscale, cover the words, and have people rank blocks by “looks more important.” If greyscale order disagrees with intent, change each element’s luminance against the background first. Add hue last.

Related

• Same group: F3.03.2 High-saturation colour jumps the queue · F3.03.3 Dark mode requires rebuilding the luminance hierarchy in reverse
• Nearby: F5.01 Colour models and colour spaces · F5.09 Perceptual requirements of a palette · F4.04 Weight and emphasis in type
• Search terms: luminance · greyscale test · visual hierarchy · hue versus lightness