visual design
Figure-ground
What is the figure-ground principle?
Figure-ground is the way our eyes separate what's in front (the figure) from what's behind (the ground). Interfaces lean on it constantly - a dialog must read as sitting on top of the page, not melting into it.
Also known as: figure/ground, figure-ground relationship
The demo
A message panel sitting over a page. Switch the figure-ground cues on and off and watch the panel either dissolve into the background or snap clearly in front of it - the panel itself never changes.
Are you sure?
This will archive the project.
Switch to clear separation and watch the panel come forward.
What this demo shows (text version)
A confirmation panel ("Are you sure? This will archive the project.") sitting over a page of background content. With weak separation, the panel uses the same tone as the page with no backdrop, shadow or border, so it blends into the background and it's hard to tell it sits on top.
With clear separation, the background dims behind a scrim and the panel gains a lighter surface and a shadow, so the eye reads it immediately as the figure in front of the ground. The panel and its words are identical in both modes; only the separation cues - contrast, overlay and elevation - change. That is the figure-ground principle, and it's what makes layered interfaces legible.
With weak separation the panel dissolved into the page and you couldn't tell what was on top of what; add a dimmed backdrop and a lift and it snapped forward as a clear figure. Same panel, same words - the difference is purely whether your eye can tell foreground from background.
The tools that create figure-ground are contrast, shadow, an overlay scrim and whitespace. A modal needs a dimmed backdrop so the page recedes; a card needs a surface tone or a hairline so it lifts off the canvas; a dropdown needs a shadow so it reads as floating above, not cut into. Flat designs that strip all of these can leave the eye genuinely unsure what's a layer and what's the page.
Ambiguity is occasionally a feature - clever logos play with figure-ground - but in a working interface it's a bug. If a visitor has to think about which element is in front, the separation has failed. It also underpins focus: the thing you want attended to should be the clearest figure on the screen.