VOCABULARY / ENTRY
Figure–Ground
figure-ground
The eye automatically splits a scene into a focal figure and the ground that supports it; stronger contrast, size, and edge cues make that separation more stable.
Recognizing it
- The primary content or action has clearly higher contrast, size, or elevation
- Background elements have reduced contrast or are blurred to recede
- The figure has a crisp edge so viewers don't have to guess where to focus
Concept boundary
Figure-ground works through contrast, size, edge, and depth cues, a different mechanism from proximity (which groups by distance) or similarity (which groups by shared attributes); whether the actual contrast ratio is sufficient is a separate, quantitative legibility check that this entry describes only in passing and does not cover.
When to consider it
- The primary action or core content needs to be recognized as the focal point immediately
- An overlay (modal, drawer, toast) needs a clear front-to-back relationship with the main content
When to be cautious
- Using figure-ground to imply a grouping relationship that doesn't actually exist (use proximity or similarity instead)
- Using a reversible figure-ground illusion (like the classic vase/faces image) in a functional UI, leaving users unsure where to focus
Tradeoff
Stronger figure contrast speeds up focus recognition, but overusing high contrast or heavy shadows makes an interface feel heavy and can undermine the legibility of secondary content.
Conditional rules · Editorial advice
Related entries
Proximity groups by distance, while figure-ground separates foreground from background using contrast, size, and edges; the mechanisms differ but the two are often discussed together.
A dimmed backdrop is itself an application of figure-ground: it makes the overlay content the figure and pushes the original page into the ground.
Glassmorphism lets the background show through and weakens foreground-background contrast, which can conflict with the clear separation figure-ground calls for.
Sources and what they support
Users perceive interface elements that stand apart from the background as things to focus on or interact with.
Retrieved: 2026-09-15 · Archived 2026-09-16The figure-ground relationship is usually stable but can be designed to be unstable (as in the vase/faces illusion), and the principle is a distinct grouping mechanism from proximity and similarity.
Retrieved: 2026-09-15 · Archived 2026-03-02Viewers first split a composition into a figure (the focal element) and ground (what the figure rests on), reinforced by cues such as area and convexity.
Retrieved: 2026-09-15Definitions reference these sources. Digital specimens, selection advice, relationships, and recipes are editorial work and have not been validated through user research.
Type extensions and implementation notes
No operable specimen yet; the illustration is editorial, meant to convey the concept, and does not represent a verified implementation. Contrast, elevation cues, and accessibility behavior still need to be verified in a real interface before use in a product.
{
"evidenceType": "A design interpretation of a Gestalt perceptual principle",
"limit": "This entry does not measure whether a specific contrast ratio meets a legibility threshold, and does not prescribe universal pixel or color values; quantitative contrast checking is a separate topic."
}Open the Agent JSON file for this entryThis file repeats every field of this entry verbatim and adds its sources, archive status, and editorial scope.