Colour contrast fakes urgency and steers the eye to one button first
Aliases: salience steering · contrast steering · colour misdirection
What it is
Colour contrast is the most-used gaze-steering tool: make "Buy now" the page's only saturated block and push everything else toward grey, and the user's first fixation is delivered to a chosen button. The "fake urgency" half works through convention: high-saturation warm colours (red, orange) are themselves the visual code for urgency — borrowing the code manufactures pressure without stating anything false.
Why it happens
The visual system responds to contrast and saturation before semantic processing: the pre-attentive stage computes "where is different" first, and fixation lands by the salience map — salient is not important, but what is seen first is almost always processed first. The steering levers: saturation gap (the only coloured element), luminance gap, hue convention (red for urgency and promo, green for confirm), and area (a big button accepts, small text declines). The mechanism is shared with legitimate visual design — visual hierarchy exists to rank; the criterion remains direction: making the user-favourable option a visual hollow (low contrast, small area) and the unfavourable one a peak means the hierarchy serves whoever it serves.
Studying it
The evidence chain runs through visual search and saliency research: first-fixation locations are predictable from salience models; eye-tracking experiments directly measure fixation shifts under contrast manipulation; product analytics provide scale evidence in click-heat distribution. Common paradigms: manipulating the contrast gap between target and non-targets, measuring first-fixation and selection rates. Methodological cautions: single-page lab tasks overestimate contrast capture, since real browsing is goal-modulated; salience models predict well on natural images and degrade on dense UI.
Where it stops holding
Accessibility contrast standards intersect anti-masking here: minimum contrast for readability and low contrast for hiding can share the same numbers — the judgement reads what was depressed: body meta-information, or the option to refuse. Category convention gets excluded: promo red in e-commerce is convention, not automatically manipulation; the judgement always reads the relative treatment of the on-screen option pair, never a single element.
Applying it
- Colour-weight audit: quantify contrast values, hue, and area for same-level exclusive options side by side; significant advantage on the accept side is a suspect.
- Hard design-system constraint: the decline option's contrast may not fall below a set fraction of the accept option's — written into the component spec and checked in CI.
- Verification: a 5-second first-glance test — view the interface for five seconds, then ask "what choices does the page offer?"; if most recall only the accept option, masking is working.