Visual Saliency
Visual saliency is what makes an element pop from its surroundings. Use it to diagnose why CTAs get missed and prioritise the design changes that move conversion.
Visual Saliency
How much a visual element stands out from its surroundings based on contrast, size, colour, isolation, motion, and novelty.
Visual saliency is the perceptual property that determines whether the eye lands on an element before conscious attention is involved. It's a bottom-up signal: the brain runs a low-level comparison between each region of the page and its neighbours, and the regions that differ most on contrast, colour, orientation, size, motion or novelty win the first fixation.
In conversion work, saliency explains the gap between what designers think is prominent and what visitors actually see. A €60 button that blends into a hero band is functionally invisible even though it's large, while a small badge with a sharp colour break can outdraw it. Treat saliency as a measurable property of the page, not a matter of taste.
Saliency is the entry point to attention optimization. Before a visitor can read a value proposition, evaluate a price, or click an add-to-cart, their gaze has to land on the element. If the primary CTA isn't the most salient thing on the screen, every downstream metric — engagement, scroll depth, conversion rate — pays the tax.
Six levers drive saliency in practice: luminance contrast against the immediate background, hue contrast against the dominant page palette, size relative to nearby elements, isolation (whitespace buffer), motion, and novelty (a shape or texture that breaks the page's pattern). Stacking two or three levers on a single element is usually enough; stacking five turns the page into noise and saliency collapses because nothing dominates.
S = (0.35 × Cₗ) + (0.20 × Cₕ) + (0.15 × R) + (0.15 × I) + (0.10 × M) + (0.05 × N)
S
Saliency score
Composite score from 0–100 estimating how strongly an element draws first fixation.
Cₗ
Luminance contrast
0–100 score for brightness difference vs. the immediate background (use WCAG contrast ratio mapped to 0–100).
Cₕ
Hue contrast
0–100 score for colour distance from the dominant page hue.
R
Relative size
0–100 score for the element's area vs. neighbouring interactive elements.
I
Isolation
0–100 score for surrounding whitespace and absence of competing elements within 200px.
M
Motion
0–100 score for animation, hover state, or kinetic emphasis.
N
Novelty
0–100 score for visual pattern-break (icon, shape, texture) vs. the page's existing language.
An apparel store audits its product-page 'Add to bag' button. The button has strong luminance contrast (90), moderate hue contrast against a beige palette (70), is the same size as a nearby wishlist heart (40), sits in a tight stack next to size selectors with little whitespace (30), has no motion (0), and uses a standard rounded-rectangle shape (20).
Cₗ (luminance contrast): 90
Cₕ (hue contrast): 70
R (relative size): 40
I (isolation): 30
M (motion): 0
N (novelty): 20
→ S ≈ 58
A 58 puts the CTA in the 'noticed but not dominant' band. The cheapest fix is isolation — adding 16–24px of whitespace and removing the wishlist heart from the immediate stack — followed by a 10–15% size bump. That typically lifts the score into the 70s without redesigning the button itself.
The scoring framework isn't science — it's a triage tool. Its value is forcing a structured comparison of every clickable element on the page so you can see which ones are quietly stealing attention from the primary action. Run it on the top 5 templates (PDP, PLP, cart, checkout, homepage hero) and you'll usually find two or three elements punching above their strategic weight.
Typical click-through lift from isolated saliency changes on e-commerce product pages
| Saliency change | Apparel / fashion | Beauty & skincare | Electronics & home |
|---|---|---|---|
| Increase CTA hue contrast vs. palette | +8–14% | +6–11% | +5–9% |
| Add 16–24px isolation (whitespace) | +5–10% | +4–8% | +4–7% |
| Raise relative size by ~20% | +4–9% | +3–7% | +3–6% |
| Add subtle hover/motion cue | +2–5% | +2–4% | +1–4% |
| Remove competing secondary CTA | +6–12% | +5–10% | +4–9% |
| Stack 3+ changes simultaneously | +1 to −6% | +0 to −5% | −1 to −7% |
Notice the last row. Stacking too many saliency changes onto a single CTA reliably underperforms — sometimes net-negative — because the element starts to look like an ad and triggers banner blindness, or competes with other zones that were already working. The honest path is one or two levers per test, measured against a clean baseline.
Visual saliency FAQ
No. Hierarchy is the intended order of importance a designer encodes into a layout; saliency is what visitors' eyes actually do in the first 200–500ms. The two often disagree — that gap is usually where conversion is lost.
Saliency is bottom-up (the stimulus pulls the eye), attention is top-down (the visitor's goal directs the eye). Saliency wins the first fixation; attention decides whether the eye stays. Both are levers within broader attention optimization work.
No. Saliency is relative to context. A red button is invisible on a red-dominated page and dominant on a white one. Always score contrast against the immediate background, not against an abstract notion of 'bright'.
Two cheap proxies work well: take a screenshot, blur it heavily, and see which elements still pop; or run it through a free saliency-prediction model like DeepGaze or the Google AI saliency API. Both correlate well enough with real fixations for prioritisation.
Size alone is a weak lever — only ~15% of the saliency score in most models. If the button shares colour with the page chrome, sits in a crowded stack, or competes with a promotional banner, it stays invisible no matter how big it is. Fix isolation and contrast first.
Subtle motion (a 200ms hover scale, a gentle pulse on first scroll) reliably lifts attention. Constant, looping animation usually hurts — it triggers ad-avoidance reflexes and damages perceived site quality. Use motion as a one-shot attention grab, not as ambient decoration.
On mobile the viewport is so narrow that isolation and size become dominant — a sticky bottom CTA scores near 100 on isolation simply because nothing competes with it. Hue contrast still matters, but hover and motion levers largely don't apply.
Yes. Headlines, price strikethroughs, urgency badges, and trust seals all compete for the same first fixation. Auditing saliency across text and graphical elements together is what separates a useful audit from a button-colour debate.
You should. Isolate one lever per test (contrast OR size OR isolation), keep traffic allocation balanced, and run to a real significance threshold. The benchmark table above shows typical lifts per lever — anything outside those ranges deserves a second look.
Run it before you write hypotheses. Saliency scoring tells you which elements visitors physically see; pairing that with funnel drop-off data shows you which of those elements matter to revenue. The intersection is your test backlog for the next quarter.
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.