Gestalt Principles
Gestalt: Figure-Ground
The eye separates a subject (figure) from its surroundings (ground) — that separation must be unambiguous.
Where it comes from
It's one of the Gestalt principles of perception. Figure-ground describes the instinctive way the eye separates a subject — the 'figure' — from its surroundings — the 'ground'.
Why it matters for your website
The eye needs to know what to look at. The Gestalt principle of Figure-Ground says we instinctively separate a subject from its background — and when that separation is weak (text on a busy image, a modal that doesn't lift off the page), the brain works harder and the message gets lost. Overlays, scrims, and contrast make the figure unmistakable.
The brain is always asking 'what's the subject here?' When the separation between figure and ground is clear, the answer is instant; when it's weak — text laid over a busy image, a modal that doesn't lift off the page — the brain has to work to pick the subject out, and the message gets lost in the effort.
The tools for strengthening it are familiar: a scrim or overlay behind text, a shadow that lifts a modal off the page, sufficient contrast between subject and background. Each makes the figure unmistakable so the eye doesn't have to hunt for it.
Wrong vs right
Text laid directly over a busy photographic background, so the eye can't cleanly separate words from image.
A scrim or overlay behind the text, making it stand clearly out from the background.
A modal or card that doesn't visibly lift off the page, so it's unclear what's foreground.
A shadow and dimmed backdrop that lift the modal off the page as a clear figure.
Weak contrast between subject and surroundings, making the brain work to find the focus.
Strong figure-ground contrast that makes the subject unmistakable at a glance.
Understanding Gestalt: Figure-Ground
Figure-ground is one of the Gestalt principles of perception: the eye instinctively separates a scene into a subject (the figure) and its background (the ground). This separation is one of the first things perception does, and it determines what the viewer treats as the thing to look at versus the surrounding context.
When the separation is clear, the subject is obvious and the eye lands on it instantly. When it's weak — text over a busy image, a modal that doesn't visibly lift off the page, a subject that blends into its surroundings — the brain has to work to pick the figure out, and that effort costs attention and can lose the message entirely.
Strengthening figure-ground is a matter of a few reliable tools. A scrim or overlay behind text, a shadow that lifts a modal off the page, and sufficient contrast between subject and background all make the figure unmistakable so the eye doesn't have to hunt for it. It connects to the other Gestalt principles, contrast, and visual hierarchy.
How Kweri checks it
Figure-ground separation is partly assessable — Kweri can flag some concrete weak cases, such as text placed over busy imagery without a scrim, or overlays and modals that don't visibly separate from the background, and it overlaps with contrast checks it can measure. What it can't fully judge is whether a given separation reads as clear to the eye in every context, which is partly perceptual. So Kweri surfaces likely figure-ground problems — text on busy backgrounds, insufficient separation — and prompts fixes like scrims and contrast, while the final perceptual call is confirmed by looking.
FAQ
What is the Gestalt figure-ground principle?
It's a Gestalt principle describing how the eye instinctively separates a scene into a subject (the figure) and its background (the ground). This separation determines what the viewer treats as the thing to look at, and it needs to be unambiguous.
Why does weak figure-ground separation cause problems?
Because the brain has to work to pick out the subject. Text over a busy image, or a modal that doesn't lift off the page, makes the figure hard to distinguish from the ground — costing attention and sometimes losing the message entirely.
How do I strengthen figure-ground separation?
Use a scrim or overlay behind text on images, a shadow to lift modals and cards off the page, and sufficient contrast between subject and background. These make the figure unmistakable so the eye finds it instantly.
What's an example of a figure-ground problem?
White text laid directly over a photographic hero, legible on the dark parts of the image and invisible over the bright parts; or a modal dialog that doesn't visibly separate from the page behind it. Both blur the figure into the ground.
What is a Gestalt principle?
Gestalt principles describe how the mind organises what it sees into coherent wholes. Figure-ground, proximity, similarity, continuity, and closure are among the best known, all from early-20th-century perceptual psychology.
Related principles
When faced with ambiguity, the brain resolves it toward the simplest possible interpretation — the one requiring least cognitive effort.
Text needs enough contrast against its background to be read — WCAG's ratio is the floor, not the goal.
Space around and between elements is not wasted — it creates hierarchy, grouping, and focus.
Attribution & sources
Identified by Gestalt psychologists (applied by Nielsen Norman Group). Catalogued from Nielsen Norman Group — Principles of Visual Design (Gestalt).
One of the Gestalt principles of perception applied to UX by NN/G; the linked article is the reference used here.
See Gestalt: Figure-Ground on your own site
Run a free Kweri audit — a plain-English review of your site’s speed, accessibility, SEO and design, ranked by what to fix first. No login, no jargon.
Run a free audit →