Figure-Ground

011 min

Figure-Ground at a glance

• What it is: The perceptual split of any scene into a figure you attend to and a ground it sits against, decided by cues like contrast, size, convexity, and surroundedness.
• Where it comes from: Edgar Rubin, a Danish psychologist, described it in his 1915 doctoral thesis, illustrated with the vase-or-faces drawing now known as Rubin's vase.
• Apply it by: Giving the one element you want noticed the highest contrast, the smallest relative size against its surroundings, or motion, and giving everything else none of those.
• It backfires when: Two elements both carry strong figure cues at once — the reader's attention splits, or flips between them, instead of landing anywhere.

022 min

What Figure-Ground actually says

Rubin's central claim is about the border between two regions, not about which shapes happen to look nicer. Writing up his research in Copenhagen in 1915, he identified a contour that separates a figure from its ground, and argued that a distinct effect comes from that exact contour rather than from either region alone. The psychologist Jörgen Pind, who has studied Rubin's original Danish text closely, summarizes the finding this way: a contour separating the two areas produces what Rubin called a 'shaping effect,' and this effect 'only or primarily affects the part seen as figure.'

That last clause is the whole mechanism. The figure gets a shape from the border; the ground does not. The ground is experienced as extending behind the figure, without an edge of its own, until the two regions swap and the ground abruptly becomes a figure with a shape it did not have a moment before. This is why the same black-and-white drawing reads as two facing profiles or as a single vase: the border is identical in both readings. Only which side the border belongs to flips.

That assignment is not arbitrary. The visual system weighs several cues to decide which region wins. Size is one: smaller regions are read as figure more often than larger ones, though not always. Convexity is another: shapes that bulge outward are read as figure more often than shapes that curve inward. Movement is a third cue — a moving region is read as figure against a static field. Color plays a role too, because a ground tends to continue as one color behind possibly several figures, while the figures themselves can vary in color. Where a viewer's gaze already happens to rest also matters: a fixated region is more likely to be read as figure than an unfixated one. None of these cues wins alone. The visual system combines them, which is why a design that sends mixed cues — a small, brightly lit shape that is also perfectly still, next to a large, dim shape that is also moving — produces a genuinely ambiguous read rather than a clean one.

031 min

Where Figure-Ground comes from

Edgar Rubin, a Danish psychologist, presented the figure-ground distinction in his 1915 doctoral thesis, Synsoplevede figurer: Studier i psykologisk analyse — in English, Perceived Figures: Studies in Psychological Analysis. Rubin finished an earlier degree in philosophy in 1910, then spent two years as a research associate for Georg Elias Müller in Göttingen, studying how people recognize visual figures at different angles and sizes, before returning to Copenhagen to finish the thesis.

The thesis is best known for one illustration, developed around 1915: a drawing read either as a white vase or as two black profiles facing each other, now called the Rubin vase. Rubin became Professor of Psychology at the University of Copenhagen in 1922, a position he held until his death in 1951. The Gestalt school was founded in 1912 by Max Wertheimer, Wolfgang Köhler, and Kurt Koffka, and Rubin's figure-ground work became one of its standard demonstrations. Figure-ground organization is one of the few Gestalt-era findings that is a genuine law in the strict sense used elsewhere in this library — a named researcher, a year, a described demonstration — the same evidentiary standing as Fitts's Law and Hick's Law, rather than a convention practitioners converged on later with no single originator.

042 min

How Figure-Ground shows up in real interfaces

Modal dialogs and sheets are the clearest applied case, and Apple's own interface guidance describes the mechanism directly: a modal sheet's guidance states that "all uncovered areas are dimmed to prevent interaction with them," so the sheet becomes the unambiguous figure and the interrupted screen behind it recedes into ground. The same structure appears across almost every current operating system and app framework that supports modals — the dimming is not decoration, it is the size and contrast cues from figure-ground applied on purpose.

The violated case is cookie-consent banners, and it has been studied directly. A 2021 paper by Philip Hausner and Michael Gertz at Heidelberg University examined real banners and found that "the button that gives consent to cookies is highlighted by using a contrasting foreground color," while "the alternative is less prominent and is displayed using just a slightly different shade than the background color." That second button has not been hidden — it is on the screen, the same size, in the same row. It has simply been denied the contrast cue that would let it read as a figure at all, so it visually recedes into the ground the accept button stands against. The technique works precisely because figure-ground assignment is a real perceptual mechanism, not a matter of taste, and it can be aimed at a user's disadvantage as easily as their benefit.

A design-critique scenario for this audience: a designer building a settings screen puts a "Delete account" action in the same red used for genuine warnings elsewhere in the product, at the same size as every other row. Because nothing about it carries stronger figure cues than its neighbors, it does not stand out as the one action on the page that deserves a second look before a click — the visual system has no reason to treat it any differently from "Change password" just above it.

Giving one row this kind of deliberate distinctiveness is a figure-ground move, not a memory one, which is worth separating from the Von Restorff Effect: that concept explains why a distinctive item is recalled better afterward, while figure-ground explains whether it gets noticed at all in the first place. A screen can win the first and still lose the second if the distinctive element is never looked at again after the initial glance.

051 min

How to spot Figure-Ground going wrong

An interface with a figure-ground problem shows a specific, checkable symptom: users' eyes (or a session recording's gaze or click heatmap) land on the wrong element first, or split evenly between two elements that were meant to have one clear priority. A support ticket asking "where is the submit button" on a form that visibly has one is a tell — the button likely shares too much contrast, size, or color with its surroundings to win the figure assignment automatically.

The opposite symptom is a page where everything competes: several call-to-action buttons in equally saturated colors, or a dashboard where every card uses the same weight of border and shadow. Here the tell is not that nothing gets noticed, but that attention visibly bounces between elements in a recording rather than settling, which is the same multistable flipping Rubin's vase produces, just spread across a full layout instead of contained in one illustration.

062 min

Applying Figure-Ground

1. 1

   Give the one thing that should be noticed the strongest combination of cues

   — higher contrast against its immediate surroundings, a smaller relative footprint than the space around it, or motion if the interface allows it. Combining two or three cues on the same element removes ambiguity faster than maxing out any single one.

2. 2

   Audit competing elements on the same screen.

   If two calls-to-action carry similar contrast and similar size, neither wins the figure assignment cleanly — pick one as primary and visibly de-emphasize the other, rather than emphasizing both.

3. 3

   Check WCAG contrast ratios as a floor, not a ceiling.

   4.5:1 for text and 3:1 for interface components is the minimum for legal accessibility; a genuinely clear figure often needs more headroom than the minimum to read instantly rather than merely pass an audit.

4. 4

   Run a heuristic pass with the sound off, literally.

   Squint at the screen, or view it at reduced size, and note which element your eye lands on first — the same blurred-screen technique a Heuristic Evaluation pass uses to catch visibility problems without needing real users in the room. If it is not the element you intended, the cues are pointing the wrong way regardless of what the design intended.

5. 5

   Never use figure-ground cues to hide a real, required action.

   The cookie-banner case shows the same mechanism that helps a modal read clearly can be used to make a "no" option functionally invisible — the technique is neutral, the intent using it is not.

071 min

Figure-Ground vs. nearby concepts

The concept this gets confused with most is closure — the Gestalt principle that people mentally complete a shape whose outline is only partly drawn, such as a logo made of separate dots the eye still reads as one circle. Closure is about filling in missing edges within a single shape. Figure-ground is about deciding which of two complete regions, sharing one edge, is the shape and which is the backdrop. A page can use one without the other: a fully-drawn, high-contrast icon needs no closure at all, and a partially-drawn logo still needs some background to sit against.

It is also worth separating from plain contrast as a value. Contrast is one of several inputs figure-ground assignment uses — alongside size, convexity, and motion — not a synonym for it. Two elements can have identical contrast and still resolve unambiguously if their relative size or shape differs enough, which is why "just add more contrast" is not always the fix for a figure that refuses to read clearly.

081 min

Accessibility

Figure-ground assignment is also a formal accessibility requirement, not only a perceptual tendency. WCAG 2.2 Success Criterion 1.4.3, Contrast (Minimum), requires that "the visual presentation of text and images of text has a contrast ratio of at least 4.5:1" against its background, with a 3:1 minimum for large-scale text. A separate criterion, SC 1.4.11 Non-text Contrast, extends the same 3:1 minimum to "visual information required to identify user interface components and states" — icons, input borders, focus indicators — not just body text.

These numbers exist because people with low vision rely far more heavily on the contrast cue than on the others figure-ground assignment can draw on; a sighted person with typical vision can often resolve an ambiguous figure using shape or motion even when contrast is weak, but that fallback is exactly what low vision degrades first. A design that reads clearly to its own designer, who already knows which element is meant to be the figure, can still fail this criterion for someone who does not have that foreknowledge to compensate with.

091 min

Where the evidence is contested

Figure-ground assignment is probabilistic, not absolute, and subjective factors can shift it: where a viewer's gaze already happens to be fixated, or what a viewer intends to look for, can tip an ambiguous case toward one reading over another, even when the compositional cues are balanced. This means a figure-ground choice that reads perfectly clearly to a designer who already knows what they are looking for can still read ambiguously to a first-time user with no such expectation — testing with people unfamiliar with the interface, not just internal review, is the only reliable check.

A separate limit: figure-ground answers "which element wins visual priority," not "should this element exist at all." Making a poorly-conceived feature into a strong visual figure does not fix the feature — it just guarantees more people will notice the thing that did not need building in the first place.

102 min

Frequently asked questions about Figure-Ground

?6 questions

Questions people ask

§10 sources

Sources