Guiding the eye: hierarchy through color

Short answer

When everything on a page is emphasized, nothing is emphasized: the eye easily finds an element that stands out from its surroundings, but when every surrounding element is different and bright, finding what you're looking for becomes harder. The basic way to build hierarchy with color is to keep most of the page in calm, neutral colors and give a single accent color to the one or two most important elements. Whether a design actually builds this hierarchy can be tested by blurring it and seeing what catches the eye first.

What is hierarchy?

When you look at a poster, a web page, or a menu, your eye doesn't see everything at once. It goes to one point first, then moves to another, and only at the end scans the whole thing. The designer's job is to establish the order of this journey — that is, the reading order: first the headline, then the image, then the price, and the details last.

Color is just one of these tools, but a powerful one: the eye catches a single element that stands apart from the others in color before it even starts searching; DT-12 touched on this "pop-out effect." This is the foundation of hierarchy through color. The scientific explanation of attention is the subject of PS-04; this lesson looks at how that knowledge applies to design.

What happens when everything is emphasized?

The question on the lesson card asks about the most common mistake in hierarchy through color. A designer makes the headline red, the subheadings orange, the buttons blue, the prices green, and the warnings yellow. Because every element is important, each one gets its own color. The result is a page where the eye doesn't know where to go.

The reason lies in how visual search works. The theory John Duncan and Glyn Humphreys published in 1989 argues that how easily you find a target depends on two things: how different the target is from the elements around it, and how similar those surrounding elements are to each other. Later research also showed that search is easiest when the surrounding elements are completely similar to each other, and slows down as the surroundings become more varied.

This translates directly into page design. On a neutral, homogeneous page, a single red button is a target the eye finds instantly. But on a page where every element is a different, saturated color, the red button becomes just one more colored element; its surroundings are no longer homogeneous, and the eye has to work to separate it from the rest. When everything is emphasized, the accent loses its power to stand out from its surroundings.

There's also a memory dimension. According to the isolation effect, known since the study Hedwig von Restorff published in 1933, an item that's markedly different from its surroundings in a series is remembered better. On a page, a single different element sticks in the mind; ten different elements cancel each other out.

A single accent color

The design principle that follows from these findings is simple: choose a single accent color to carry a page's or screen's most important action or piece of information, and use it sparingly.

The accent color doesn't have to be the liveliest color in the palette, but it does have to be the color that stands out most from its surroundings. On a neutral, light page, a dark, saturated color can be the accent; in a dark interface, a bright color can be the accent. What matters is that this color appears in only a few places, on the genuinely high-priority elements: the main button, an important price, a warning.

If there's more than one important element, color alone can't establish this order. For the second and third priorities, size, weight, position, and space are used instead; color is saved for the very top of the order. If a page genuinely needs two separate accent colors, one of them must be clearly chosen to be stronger than the other.

Neutral areas carry the accent

What makes an accent color powerful is the calm around it. When most of a page is covered in white, gray, beige, or very pale colors, the accent color stands out from that background on its own. DT-12's dominant and supporting colors become the accent's stage here.

Neutral areas aren't empty areas. Text, images, and layout are still there; they just resemble each other in color. In Duncan and Humphreys's terms, they form a homogeneous surrounding. The wider this homogeneous surrounding is, the more powerfully the accent works with the least amount of color.

The blur test

The most practical way to test a design's hierarchy is to view it blurred. Once the details disappear, only large blotches of color and lightness remain, and the eye can tell right away which of those blotches catches it first.

Here are the steps. Take a screenshot of the design and apply a strong blur to it in an image tool, until the letters become unreadable. Then ask yourself: where did I look first? Is that point the page's most important element? Do the second and third places I looked match the order of importance? If more than one blotch says "look at me" at the same time, the hierarchy is scattered.

A second step is to convert the blurred image to grayscale. If the accent still stands out in grayscale, the hierarchy rests on lightness as well as hue, which, as GT-02 showed, is also safe for people with color vision deficiency and for poor screens. If the accent disappears in grayscale, the hierarchy is being carried by hue alone, and that's fragile.

Example — the status dot next to the avatar

A messaging app shows whether users are online with a small green dot placed in the corner of their photo. This dot is one of the page's accent elements: a piece of information the eye needs to find in a single glance.

In the first design, the dot falls directly on the photo, often right over the person's face, neck, or hair. The problem is that photos vary enormously. Next to a light-skinned person's face, the green dot creates a strong separation, while on a medium skin tone, a green shirt, or a green background, it can nearly disappear. The same accent meets a different surrounding in every avatar and works with a different strength in each one.

The solution is to fix the accent's surroundings: put a thin ring in the page's background color around the dot. That way, the green dot never directly touches skin, hair, or clothing; it always sits inside the same neutral ring and stands out with the same strength in every photo. This is small proof that an accent color's power comes not from the color itself but from its surroundings. As users' skin tones grow more varied, the photo, not the designer, starts to determine the accent's surroundings; the ring takes that control back.

Common misconception

Summary

1. Visual hierarchy establishes the path the eye follows through a design, and color is one of its powerful tools; a single different element is both noticed more easily and remembered better.
2. When everything is emphasized, the surroundings become varied and finding the target gets harder; that's why a single accent color is used sparingly and most of the page is covered in neutral, homogeneous areas.
3. The blur test and the grayscale test show whether the hierarchy is really established; when an accent's surroundings are variable, as in photos of different skin tones, a fixed neutral frame keeps the accent at the same strength in every case.

Test yourself

1. (Easy) What is visual hierarchy?
2. (Easy) How is the blur test done?
3. (Medium) What happens when everything is emphasized?
4. (Medium) Why does the isolation effect matter for a designer?
5. (Hard) How does Duncan and Humphreys's theory explain why neutral areas strengthen an accent?
6. (Hard) Why does the status dot in the corner of an avatar disappear in some photos, and how is this solved?

Answers

1. The arrangement that makes the elements in a design perceived according to their order of importance; it's built with size, position, lightness, color, and space ("What is hierarchy?").
2. The design's image is blurred until the letters become unreadable, and you check whether the element that catches the eye first is the page's most important element; then the same image is tried in grayscale as well ("The blur test").
3. Nothing is emphasized: when every element is given its own saturated color, the surroundings become varied, the accent can no longer stand out from them, and the eye doesn't know where to look ("What happens when everything is emphasized?").
4. An element that's markedly different from its surroundings is noticed more easily and remembered better; on a page, a single different element sticks in the mind, while many different elements cancel each other out ("What happens when everything is emphasized?").
5. According to the theory, finding a target gets easier as the surrounding elements become more similar to each other; because neutral areas form a surrounding that's homogeneous in color, the accent color stands out from it on its own ("Neutral areas carry the accent").
6. When the dot falls directly on the photo, its surroundings differ in every avatar; on some skin tones, clothes, or backgrounds, the green dot can't stand out. Putting a thin ring in the background color around the dot fixes its surroundings and makes it appear with the same strength in every photo ("Example — the status dot next to the avatar").

Sources

• Duncan, J., and Humphreys, G. W., "Visual search and stimulus similarity," Psychological Review 96(3): 433–458, 1989.
• von Restorff, H., "Über die Wirkung von Bereichsbildungen im Spurenfeld," Psychologische Forschung 18(1): 299–342, 1933.
• Treisman, A. M., and Gelade, G., "A feature-integration theory of attention," Cognitive Psychology 12(1): 97–136, 1980.

Next step

GT-04 expands this hierarchy from a single page to an entire brand: it covers how a brand's palette is built by comparison with competitors, what you gain and lose by matching or breaking from your industry's usual color codes, and how a palette stays consistent between screen and print. GT-05 then moves down to the shelf: it explains how color codes aroma and variety on packaging, how cardboard, metal, and plastic each change the same color, and how store lighting shows off the packaging.