U5.05.2Dimming the rest disturbs the whole less than amplifying the targetdesign

Dimming everything else disturbs a chart's overall look less than making the target louder does

Aliases: de-emphasis strategy · dimming the context

What it is

Widening the target-versus-background gap offers two routes: lift the target, or lower everything else. Prefer lowering — amplifying the target usually means stronger colour, thicker strokes, even outlines and shadows, and those devices push the target out of the encoding system while making the whole chart louder; dimming the background merely lowers existing contrast uniformly, the data layer's structure survives intact, and the chart keeps its overall composure.

Why it happens

The asymmetry comes from how each route touches the encoding: amplification is additive — more saturation, more weight, more decoration — and every one of those dimensions couples to magnitude encoding (a thicker line reads as a bigger number), so adding can silently rewrite the target's own data meaning and forces re-checking its relation to the rest of the palette. Dimming is subtractive — lightness and saturation drop uniformly while shape, position, and relative structure stay put; magnitude encoding is untouched, and readers can still read trends off the dimmed elements — the elements have simply retired to the secondary attention layer. That is the root of the composure difference: adding changes the chart's construction, subtracting only changes its volume.

Where it stops holding

Dimming has a floor (next card): pressed too far, background elements slide from "secondary" to "absent," and readers misread the chart as missing data. When the background is already faint (pale thin lines), suppression has little room left — add a mild target boost on top. In multi-chart dashboards, dimming also pays a page-level dividend: amplifying inside one chart lets that chart steal the whole page, whereas dimming keeps the emphasis contained within its own frame.

Applying it

  • Implement highlighting as a uniform background step-down first: one or two lightness steps, saturation halved, target untouched.
  • If the dimmed background still is not enough, add one dimension of target boost — never a second.
  • Verification: compare "amplified target" and "dimmed background" versions side by side on overall composure and target salience; the dimmed version with equal target clarity is the correct choice.

Related

  • Same group: U5.05.1 Highlighting works through contrast with the rest, not through its own intensity · U5.05.3 De-emphasised elements keep a readable minimum contrast · U5.05.4 Highlighting too many items at once is highlighting none · U5.05.5 State the basis for a highlight, or it reads as a data property
  • Nearby: U4.06.4 Brand colours entering the data palette break perceptual uniformity · U5.03.3 Reference-line visual weight belongs between data and gridlines
  • Search terms: de-emphasis · dimming strategy · focus plus context

Cards in the same group

Quick Actions

Share

Share this page

ios_share

https://hci.top/en/handbook/U5.05.2