What makes a shape read as an object

Every mark is either a thing or the space behind a thing

Before the eye can rank anything, it has to decide what the objects are. This happens early, fast and below the level of deliberate thought, and it is called the figure-ground decision. A shape that the eye assigns as figure gets treated as a thing with edges, a location and a meaning. A shape assigned as ground gets treated as nowhere — it has no shape at all, as far as perception is concerned.

You can feel this with the classic faces-or-vase image. Whichever region you read as the figure appears to have a boundary; the other region appears to extend behind it, edgeless. The two readings never happen at once. This is not an illusion so much as a demonstration of a decision your visual system makes about every part of every image.

In design the practical question is mundane: how do I make this card, panel or button read as a distinct object? There are four answers, and they are not equal.

The four devices, ranked by strength

1. Space. An element surrounded by a clear gap is an object, with no other treatment at all. This is the strongest and cheapest device, and the one beginners use least, because it consumes area and looks like doing nothing. A block of text with 48px of nothing around it is unmistakably a unit.

2. A fill. A change of background. This is strong, but only in proportion to the lightness difference. A card at 98% lightness on a 100% background is invisible on most phones in daylight; the same card at 96% on a 100% background is a real object. Measure it rather than trusting your calibrated monitor in a dim room — a 2% difference is about 5 levels out of 255, and a great many screens will not resolve it at all.

3. A border. Weaker than people expect. A 1px line at 10% contrast against its surroundings does less work than a 4% lightness fill, because the border is a thin high-frequency detail and the fill is an area. Borders come into their own when you need an edge that survives on a coloured background, or when you want to define an object without changing its brightness.

4. A shadow. The weakest and the most abused. A shadow says this object floats above that surface, which is a depth claim rather than a grouping claim. Real shadows are large, soft and low in opacity — something like 0 to 4 pixels down, 12 pixels of blur, at 8% black, not a hard 2px offset at 50%. A heavy shadow reads as a sticker, and a page of heavy shadows reads as a page of stickers.

The common failure is to reach for devices 3 and 4 while leaving device 1 unused. A card with a border and a shadow, crammed 8px from its neighbour, is still hard to read as a separate thing. Give it 32px of space and it does not need either.

Ambiguity is the fault, not weakness

A figure-ground relationship fails when it is ambiguous rather than when it is subtle. Two panels of equal area and near-equal lightness, side by side, both trying to be the object, produce a layout that feels unstable in a way viewers cannot name. Nothing is wrong with a quiet distinction; something is wrong with a contested one.

Watch for it in these places:

• Inverted sections. A dark band across a light page reads as figure — a large object — not as a section of the ground. That is often what you want, but it means the dark band is now competing at the top of your hierarchy.
• Images with pale edges. A photograph that fades to white on a white page has no boundary and reads as several disconnected objects.
• Sidebars the same colour as the content. If the only thing distinguishing them is a 1px rule, the eye keeps re-deciding which is the main region.

A rule of thumb for nesting

When you put a card inside a section inside a page, each level needs a visible relationship, and the usual mistake is to keep stepping the lightness in the same direction until you run out. Three levels of grey, each 3% apart, fail. Two work.

The reliable pattern is to alternate rather than accumulate: page light, section slightly darker, card back to light — or to change device between levels, using space for the section and a fill for the card. Depth in interfaces is almost never more than two levels deep, and a design that needs four is usually telling you the information architecture is wrong.

Checking it

The blur test from earlier in this block is the right instrument. Blur the layout and ask, of each region: is this a blob, or is it part of the field? If a card dissolves, it is ground, whatever the border says.

A second check, free and fast: turn the screen brightness down to about 30% and look at it in a bright room. Every marginal fill disappears. What remains is what a reader on a bus in the afternoon is working with, and it is a more honest account of your design than the one on your desk.