Overlays need a clear figure-ground relationship with what's beneath
Aliases: modal figure-ground · scrim · elevation cue
What it is
For a modal, menu, or tooltip floating above the page content to read instantly as "this is on top, that is underneath," it needs strong enough figure-ground cues of its own — it can't rely on merely "appearing later" to be automatically read as the figure. The goal is for the overlay to reliably win the figure role and for the underlying content to reliably recede into ground, rather than the two staying evenly matched and getting re-judged over and over.
Why it happens
Which side wins figure and which becomes ground is decided by a set of relatively-weighted cues — area, sharpness, whether it's occluded, depth hints like shadow or blur. If an overlay is simply stacked on top of the original content with no additional treatment, the two may not differ much on these cues: the overlay might have smaller area, but the underlying content was already the page's main content, with sharpness and saturation no weaker than the overlay's — the figure-ground relationship stays ambiguous, and the user needs an extra step to decide which layer to look at or tap.
Dimming or desaturating the background and adding a drop shadow or a clear border to the overlay both artificially widen the gap between the two on these figure-ground cues: the background loses out on sharpness and contrast, so the segregation settles firmly in the direction of "the overlay is the figure," with no room left for back-and-forth judgment.
Where it stops holding
If the overlay itself is large enough to cover nearly the entire viewport, the space left for the underlying content to recede into ground is compressed to almost nothing; in that case, figure-ground judgment depends more on complete occlusion than on a contrast difference, and dimming or blurring has limited marginal benefit.
For stacked overlays (a menu opening on top of a modal), each layer needs its own figure-ground relationship relative to the layer beneath it — handling only the outermost and the base layer isn't enough; if intermediate levels are neglected, users' sense of layer ordering stays ambiguous.
Applying it
- When an overlay appears, simultaneously dim or blur the underlying content so it's clearly weaker than the overlay on sharpness and contrast, rather than leaving both layers stacked at the same clarity.
- Give the overlay itself a visual "elevation" signal — a drop shadow, a clearly defined container edge, a background with a color difference from what's beneath — rather than relying only on appearance order to communicate layering.
- Disable interaction with the underlying content while the overlay is shown, to prevent users from mistakenly tapping background elements in the moment before the figure-ground relationship has fully settled.
- To verify, have a user tap at random the instant an overlay appears and record whether the tap lands inside the overlay or still on a background element — a higher rate of hits on the background indicates the figure-ground relationship isn't clear enough at that moment.