Figure-Ground Principle
Visual perception organizes a scene into a focal figure and surrounding ground, with contrast and boundaries influencing which region receives focus.
Direct explanation
What it means
Interfaces depend on users distinguishing controls, text, dialogs, and charts from their surfaces. Weak separation or ambiguous layering makes foreground content feel inactive or misplaced.
Figure-ground failures affect readability, modal context, focus, and error recognition, especially with overlays and low-contrast visual systems.
Research anchor: Max Wertheimer, 1923
Research and interpretation
What the research found
Gestalt studies showed that borders are assigned to a perceived figure while the other region recedes as ground.
Figure-ground organization has strong evidence, with multiple interacting cues and neural accounts.
Popular advice versus careful use
Common shorthand: High color contrast alone always establishes hierarchy.
Coordinate boundary, contrast, focus, and semantics so the intended active region remains stable across conditions.
How designers apply it
- 01
Separate a dialog from the page while preserving context.
- 02
Ensure text and controls remain distinct from images and textures.
- 03
Use focus and selection surfaces that remain visible in forced colors.
Original UI examples
mobile checkout
Payment dialog
A bounded dialog has clear focus, title, and restrained backdrop.
The active decision is foregrounded without erasing the underlying cart context.
desktop map
Map labels
Road names use a contrast-preserving halo over varied terrain.
Labels remain figures across changing imagery.
A form inside a hero area
Less effective
Place light input labels directly over a detailed photograph.
Better fit
Give the form a stable surface and test text contrast across all image states.
A translucent layer is useful only if it reliably preserves separation.
Limits and failure modes
Which region becomes figure depends on stimulus, attention, prior knowledge, and task; reversible figures show the organization can switch.
Common mistakes
- Relying on a subtle shadow as the only layer cue.
- Dimming background content so far that context and focus recovery disappear.
When it should not dominate
- To create artificial depth that conflicts with reading order.
- When a simple flat boundary communicates state more clearly.
Responsible use
Accessibility
Meet contrast requirements, expose modal and focus state programmatically, contain focus correctly, and retain legibility in high-contrast and zoom modes.
On mobile: Account for glare, small targets, and full-screen overlays that can remove context.
Ethics and context
Use the principle to reduce unnecessary effort and improve comprehension. Validate the result with representative users rather than treating a general tendency as a universal instruction.
On desktop: Manage stacked windows and panels with explicit focus, boundaries, and z-order behavior.
Designer checklist
- Identify the active figure in every state.
- Test varied backgrounds and forced colors.
- Verify programmatic focus matches visual foreground.
Check your understanding
Which statement applies Figure-Ground Principle most carefully?
Practice and continue learning
Sources and further reading
- 01Open source
A Century of Gestalt Psychology in Visual Perception: I. Perceptual Grouping and Figure–Ground Organization
Johan Wagemans, James H. Elder, Michael Kubovy, Stephen E. Palmer, Mary A. Peterson, Manish Singh, Rüdiger von der Heydt · 2012 · Psychological Bulletin
Peer reviewed review
- 02Open source
Laws of Organization in Perceptual Forms
Max Wertheimer · 1923 · Psychologische Forschung / York University Classics
Primary research · primary or original source
Continue the graph
Related principles
principle
Law of Common Region
Elements enclosed by the same visible boundary tend to be perceived as a group, even when other grouping cues compete.
principle
Law of Closure
Perception can complete missing contours or parts when the remaining structure supports a plausible whole.
phenomenon
Selective Attention
Attention prioritizes some available information for deeper processing while other visible or audible information receives less processing.