Figure-Ground
Distinguishing between a focal figure and its background allows key content to stand out clearly
Overview
Definition
What is the Figure-Ground principle?
The Gestalt principle of Figure-Ground describes how the human eye instinctively separates a scene into a focal object (the figure) and the surface behind it (the ground). This separation lets us focus on what matters while treating everything else as background, and it happens automatically whenever there is sufficient contrast in color, value, size, or depth.
In interface design, figure-ground is the foundation of visual hierarchy. Modals, dropdowns, and tooltips rise above the page using shadows, overlays, and blur to read clearly as the figure, while the dimmed content recedes into the ground. Hero sections, cards, and buttons all rely on contrast with their surroundings to announce that they are the focal point.
When the relationship between figure and ground is ambiguous — as in famous optical illusions where the image flips between two interpretations — perception becomes unstable. In practical design this ambiguity is usually a problem: low contrast or busy backgrounds make it hard for users to tell what is interactive, so clear figure-ground separation is essential for legibility and accessibility.
Takeaways
Visual Contrast
Clear distinction between foreground and background elements guides attention
Depth Perception
Use of shadows, blur, and opacity creates meaningful layers of content
Ensure Clear Contrast
Use color, size, or depth to separate primary content (figure) from the background
Test for Ambiguity
Make sure users can easily distinguish actionable elements (like buttons) from decorative ones
When to Use
- •
Highlight modals or pop-ups with contrast
- •
Design hero sections with bold figure elements
- •
Use hover effects to emphasize interactive areas
- •
Separate content with clear background contrast
- •
Focus user attention with negative space
When Not to Use
- •
When figure and ground lack sufficient contrast
- •
If backgrounds overpower primary content
- •
When ambiguity blurs the focus of the design
- •
If subtlety compromises the user’s ability to discern
Common Pitfalls
- •
Choosing low-contrast colors for figure and ground
- •
Overcomplicating backgrounds with textures
- •
Making both figure and ground compete for attention
- •
Failing to balance whitespace around focal areas
Examples in Action
See how Figure Ground works in real design
Interactive UXcel lessons to help you apply Figure Ground and other design fundamentals.
Affiliate link — free to start, and you'll get 25% off if you upgrade to Pro. We earn a commission at no extra cost to you.
Dive Deeper
Improving Your Designs With Gestalt Principles: Figure / Ground
Jonathan Beer
Improving Your Designs With Gestalt Principles: Figure / Ground
Jonathan Beer
Improve Your Designs With The Principles Of Closure And Figure-Ground
Smashing Magazine / Jon Hensley
Improve Your Designs With The Principles Of Closure And Figure-Ground
Smashing Magazine / Jon Hensley
Figure this: deciding what's figure, what's ground
American Psychological Association / Rachel Adelson
Figure this: deciding what's figure, what's ground
American Psychological Association / Rachel Adelson
The Law of Figure-Ground
Interaction Design Foundation
The Law of Figure-Ground
Interaction Design Foundation
*VIDEO* Figure/Ground: Gestalt Principle for User Interface Design
Nielson Norman Group / Samhita Tankala
*VIDEO* Figure/Ground: Gestalt Principle for User Interface Design
Nielson Norman Group / Samhita Tankala
Frequently Asked Questions
01What is the Gestalt figure-ground principle?
What is the Gestalt figure-ground principle?
Figure-ground is a Gestalt principle describing how we perceptually separate a focal element (the figure) from its surrounding background (the ground), allowing us to focus on one object while the rest recedes from attention.
02How is figure-ground used in UI design?
How is figure-ground used in UI design?
It is used to create hierarchy and focus: modals and pop-ups sit above dimmed overlays, hero sections contrast with their backgrounds, and shadows or blur push interactive elements forward so users instantly know where to look.
03What is figure-ground ambiguity?
What is figure-ground ambiguity?
Figure-ground ambiguity occurs when an image can be read in more than one way, with no clear figure or ground — like the classic face-versus-vase illusion. In interfaces this usually signals insufficient contrast and should be avoided.
04How does figure-ground affect accessibility?
How does figure-ground affect accessibility?
Strong figure-ground contrast improves legibility for all users and is critical for those with low vision. Sufficient contrast between text, controls, and their backgrounds is a core requirement of accessibility guidelines such as WCAG.