Visual Saliency
Visual saliency is the perceptual property that makes an element pop out before conscious reading begins — the reason one CTA gets clicked while another sits invisible two scrolls above the fold.
Visual Saliency
The degree to which a visual element stands out from its surroundings and captures pre-attentive gaze.
Visual saliency is the pre-attentive property that makes a pixel region jump out of a layout before the brain has read or understood anything. It's driven by low-level contrasts the visual system processes in roughly 100-200 milliseconds: differences in luminance, color, size, orientation, motion, and isolation from neighbouring elements.
In CRO work, saliency is the behavioural floor under every above-the-fold decision. A call-to-action that loses the saliency contest against a hero image, a sticky discount banner, or a USP strip will under-convert no matter how good the copy is — because most visitors never consciously process it.
Saliency is comparative, not absolute. A red button is only salient on a page where nothing else is red — drop the same button onto a sale page lined with red price tags and it disappears into the background. The eye locks onto whichever element wins the local contrast race.
This is why generic best-practice advice ("use a contrasting CTA colour") fails in practice. The right question isn't "is my button green?" — it's "on this specific page, with this specific hero image and this specific promo bar, what is the most salient element, and is it the one I want clicked?"
Saliency = w_c · ΔContrast + w_s · ΔSize + w_i · Isolation + w_m · Motion
ΔContrast
Local contrast delta
Luminance and colour distance between the element and its immediate background (0-1).
ΔSize
Relative size
Element area divided by the median element area in the same viewport (1.0 = average).
Isolation
Whitespace isolation
Ratio of empty pixels to filled pixels within a 100px radius (0 = crowded, 1 = isolated).
Motion
Motion or change cue
Binary or weighted score for animation, blinking, or scroll-triggered reveal.
w_c, w_s, w_i, w_m
Channel weights
Approximate human-attention weights — contrast and motion dominate, isolation amplifies, size matters most when contrast is low.
An apparel store's product page has a charcoal 'Add to bag' button on a soft beige background, sized 1.4× the surrounding text, surrounded by ~60% whitespace, no animation.
ΔContrast (charcoal on beige): 0.72
ΔSize: 1.4
Isolation: 0.6
Motion: 0
Weights (c, s, i, m): 0.45, 0.20, 0.20, 0.15
→ Saliency ≈ 0.45·0.72 + 0.20·1.4 + 0.20·0.6 + 0.15·0 = 0.72
A score around 0.7 puts the CTA in the top-attention band — assuming nothing else on the page scores higher. If a sticky '10% off' banner with motion scores 0.85, the banner wins the gaze and the button under-performs.
You don't need to compute this by hand. The point of the formula is to make explicit what attention heatmaps and AI gaze-prediction tools approximate: a weighted sum of contrast, size, isolation, and motion. Use it as a checklist when you audit a page — score the CTA, then score every other above-the-fold element, and ask which one wins.
Approximate first-fixation share by CTA treatment (within 3 seconds of page load)
| CTA treatment | First-fixation share | CTR lift vs baseline |
|---|---|---|
| Text link inline with body copy | 4-7% | baseline |
| Filled button, low contrast, no isolation | 12-18% | +15-25% |
| Filled button, high contrast, generous whitespace | 28-38% | +45-70% |
| High-contrast button + subtle motion cue on load | 40-55% | +60-95% |
| Sticky CTA bar competing with hero promo | 8-14% | -10 to +5% |
The bottom row is the trap. Adding a sticky CTA sounds like more attention but often cannibalises the primary button — two competing salient elements split the gaze instead of compounding it. Saliency is a zero-sum budget within a viewport. This is the core lever inside the broader discipline of attention optimization: decide what should win, then engineer the page so it does.
Frequently asked questions
Saliency is pre-attentive — what the eye notices in the first 200ms before reading. Hierarchy is the conscious reading order you design through typography, spacing, and grouping. Saliency decides where the eye lands first; hierarchy decides where it goes next.
No. Saliency only guarantees the element is seen. If the copy, price, or trust signals fail once attention lands, conversion still drops. Saliency is a necessary but not sufficient condition — it gets you to the click decision, it doesn't win it.
The cheapest method is a 5-second test: show the page for five seconds and ask viewers what they remember. AI gaze-prediction tools (Attention Insight, Neurons) approximate heatmaps without recruiting users. True eye-tracking is the gold standard but rarely worth the cost outside enterprise budgets.
No single colour wins universally. Saliency comes from contrast against the specific background, not from the colour itself. Red on a red-heavy sale page is invisible; teal on the same page pops. Always evaluate the button against its actual surroundings, not against a colour wheel.
Motion is one of the strongest pre-attentive cues, but it carries a cost. Constant animation trains visitors to ignore the moving element (banner blindness) and can trigger accessibility complaints. Subtle, one-time motion on load or on scroll-into-view tends to outperform looping animations.
Reading patterns describe how the eye scans text-heavy regions once attention has been captured. Saliency decides which region captures attention first. A highly salient element off the F-pattern's path will still break the pattern and pull the eye — that's its job.
No — that's how you end up with a noisy page where nothing stands out. Saliency works through scarcity. Pick the single element you most want clicked in each viewport, make that element win, and deliberately suppress competing visual noise.
More, not less. Mobile viewports are smaller and scrolled faster, so the saliency contest plays out in milliseconds per screen. Sticky elements, thumb-zone placement, and high contrast matter disproportionately because there's less room for hierarchy to do the work.
Product imagery is often the most salient element on a product page — which is correct, because the photo sells the product. The risk is that the CTA loses by such a wide margin that it never registers. Aim for the image to dominate, but for the CTA to clearly win second place above the fold.
No, they answer different questions. A saliency audit tells you whether the CTA will be seen; an A/B test tells you whether a change actually moves revenue. Use saliency as a pre-test filter — fix obvious attention failures first, then A/B test the changes that survived.
Get an AI expert review of your site
Paste your URL — Metricuno's AI runs the same heuristic checks a senior CRO consultant would, scoring your page and prioritising the fixes that'll move conversion fastest.