Figure & Ground

Gestalt Design Principles · Part V

Before the brain groups, before it follows paths, before it completes shapes, it does something more fundamental. It divides the visual field into two regions: the figure, which is the object of attention, and the ground, which is everything else. This separation happens pre-consciously, in the earliest stages of visual processing, and it governs everything that follows.

You cannot perceive the world without figure-ground separation. Without it, a face would be inseparable from the wall behind it, a word from the page it sits on, a button from the screen it belongs to. Every act of visual attention is, at its core, a figure-ground decision: this is what I am looking at, and everything else is where it sits.

This principle was explored most famously by the Danish psychologist Edgar Rubin in 1915, whose vase-faces illusion demonstrated something startling: figure and ground are not fixed properties of the image. They are assignments made by the visual system, and under certain conditions, those assignments can flip. The same region of the image is a face and a vase, alternately, depending on which the brain designates as figure.

The psychology of figure and ground

The visual system uses a set of cues to decide what is figure and what is ground. Understanding these cues gives designers precise control over what the eye treats as subject and what it treats as background.

Enclosed areas read as figure. A shape that is enclosed, bounded on all sides, reads as an object sitting on top of the surrounding area. The surrounding area reads as ground and appears to extend behind the figure. This is why cards, buttons, and modals feel like objects: their enclosure is the signal that says "I am a thing."

Smaller areas read as figure. When two regions share a border, the smaller one reads as figure and the larger reads as ground. This is why a small icon on a large background reads immediately as an object, the size differential resolves the figure-ground assignment instantly.

Higher-contrast areas attract figure. The visual system treats the high-contrast region as the object of interest. A dark element on a light background reads as figure; a pale element on a dark background does too. When contrast is equal, figure-ground becomes ambiguous.

The bottom reads as ground. Because we live in a gravitational world, surfaces below us are interpreted as ground and objects above us are interpreted as figures standing on that ground. Layouts that place primary content in the lower visual field fight this bias; layouts that elevate content above a visible base surface lean into it.

The reversal demo, same image, two readings

Figure-ground in interface design

Interface design is, in large part, the discipline of managing figure-ground relationships. Every decision about colour, contrast, depth, and containment is a decision about what the user perceives as the object of attention. When figure-ground is clear and well-controlled, interfaces feel effortless to navigate. When it breaks down, users experience cognitive friction they cannot always name, a vague sense that the screen is "busy" or "hard to read," when what is actually happening is that figure and ground are competing rather than cooperating.

Elevation and depth, z-axis as figure-ground signal

The single most powerful figure-ground tool in modern interface design is elevation. Layered surfaces, a modal above a page, a tooltip above content, a floating action button above a list, use the logic of three-dimensional figure-ground: the higher element is always figure, the lower element is always ground. This is why elevation hierarchies work so reliably. They translate an abstract concept (this element is more important right now) into a perceptual cue (this element is in front) that requires no learning.

Contrast and the disabled state

Reducing contrast is the standard way to communicate that an element is disabled, and it works precisely because of figure-ground psychology. A fully contrasted button reads as figure: an object, foreground, demanding attention. A low-contrast button visually recedes toward ground. It doesn't disappear, it is still visible, but it no longer reads as a primary object. It has been demoted from figure to something closer to the background, which is exactly the cognitive state we want for an unavailable action.

Ambiguous figure-ground, when it breaks

The most common figure-ground failure in interface design is insufficient contrast between a component and its background , not low contrast in the typographic sense, but in the figure-ground sense: the element doesn't read as a distinct object because it shares too many properties with its surface.

The ground is never empty

One of the most important, and most overlooked, implications of figure-ground theory is that the ground is not nothing. It is a perceptual region with properties of its own. When users look at your interface, they are not only seeing the buttons, cards, and text. They are also seeing the surfaces those elements sit on, and those surfaces communicate mood, quality, and spatial logic.

This is why background colour choice is a substantive design decision, not a cosmetic one. A white background communicates openness and cleanliness; the figure elements float on an infinite surface. A dark background inverts the relationship: the interface becomes a lit stage, and the figure elements feel like they are emitting light. A textured or tinted background gives the ground visual weight, which increases the sense of depth when figure elements contrast against it.

The ground also provides rest. In any layout, the regions of ground, the whitespace, the margins, the gaps between sections, are where the eye recovers between fixations. A layout where every pixel is claimed by figure elements gives the eye nowhere to rest. The result is fatigue. Generous ground is not wasted space. It is essential structure.

Ground as breathing room

The designer's checklist

1. The figure test. For every element on a screen, ask: does this read as a distinct object, or does it merge with its surface? If an interactive element doesn't read immediately as figure, as a thing the user can act on, it will be missed or misunderstood. Enclosure, contrast, and elevation are your tools.

2. The ground test. For every surface in your layout, ask: does it read as a coherent background that supports the figure elements? Or does it compete, claiming attention, asserting its own form? Ground should be passive. When the ground is active, figure and ground fight, and the user pays the cost.

3. The elevation audit. Map the layers in your interface: page, cards, popovers, modals, tooltips. Each layer should have a consistent visual treatment, a combination of background colour, border, and shadow, that places it at a specific depth. Elements at the same depth should look the same. Elements at different depths must look different. Inconsistent depth breaks the three-dimensional figure-ground logic that interfaces depend on.

4. The rest audit. Print your layout in grayscale and calculate the approximate ratio of figure to ground. In most interfaces, ground should account for at least 40–50% of the visual field. If your layout is above 70% figure, you are not leaving enough room for the eye to rest or for individual elements to read as distinct objects.