Which color is heavier? Visual weight and balance

Short answer

Visual weight is a metaphor that describes how much attention an area draws in a composition and how far it shifts the balance toward itself. Experiments show that colors look heavier as they grow darker and more saturated, while hue plays only a small role in this judgment. A small red area can balance out a large gray area, because red's high saturation and conspicuousness compensate for its smaller size; but how well this balance holds depends on the size, position, and viewer of the areas.

Weight is a metaphor

Looking at a painting, a magazine page, or a shop window, you might say "this corner feels heavy." No one thinks that corner is actually heavier; what's meant is that the eye is drawn there more, and the composition looks as if it's leaning in that direction. In art and design education, this feeling is called visual weight.

Visual weight rests on the metaphor of a scale. There's a balance point at the center of the composition, and each area pulls that point toward itself, in proportion to its weight and its distance from the center. A large area pulls more than a small one, and an area far from the center pulls more than one close to it. Color is one factor in this calculation.

What determines weight?

An early study that tried to measure color's effect on weight was published in 1976. Kenneth Alexander and Michael Shansky asked observers to estimate, with numbers, how heavy colored samples looked. The result was clear: a color's apparent weight increased as its saturation increased and decreased as its lightness increased, while the effect of hue was small.

Read together with DT-01's three dimensions, this finding gives a useful rule. Lightness: a dark navy looks heavier than a light sky blue of the same area. Saturation: a vivid red looks heavier than a brick gray of the same lightness. Hue: red and blue move closer together in weight once their lightness and saturation are equalized. Most common judgments like "red is heavy, blue is light" actually come from those colors' typical lightness and saturation.

Temperature and depth can also affect weight. As DT-05 showed, warm colors appear to come forward and cool colors to recede for many people; an area that comes forward draws more attention and takes up more room in the composition. Even so, for some eyes the depth order of red and blue reverses, so this contribution varies from person to person.

Small red, big gray

The question on the lesson card asks how these factors work together: how can a small red area balance out a large gray area?

The answer lies in the different sources of weight on the scale's two arms. The gray area is large; it draws its weight from its size. But its saturation is zero and its lightness is middling. The red area is small, but highly saturated; according to Alexander and Shansky's finding, this makes it far heavier per unit of area. What's more, as DT-12 showed, a saturated color standing alone in a neutral surrounding draws the eye on its own. Once these two effects combine, the small red can fill the scale's other pan against the large gray.

Position also enters the calculation. As on a scale, a small weight standing far from the center can balance a large weight standing close to the center. A wide gray block covering the left half of a page can be balanced by a small red square placed near the right edge; if the same red square is placed close to the center, the balance breaks and the page tilts to the left.

A study that showed this balance is genuinely perceived was done in 2005 with adaptations of Piet Mondrian's abstract compositions. Paul Locher, Kees Overbeeke, and Pieter Jan Stappers rearranged the red, yellow, and blue areas in six of Mondrian's works to prepare thirty-six variations, and asked participants to mark the balance center and to rate the weight of the colored areas. A color's perceived weight, especially for red and yellow, changed with the size of the area it covered; when the colors' positions changed, participants saw the balance center shift too.

Opposing view

The soundness of the visual weight concept is contested, and there are two strong objections.

The first is linguistic. In English, the word "light" means both "light-colored" and "low in weight"; Turkish speakers likewise call light colors hafif ("light/soft") and dark colors ağır ("heavy"). The judgment that dark colors look heavy might come not from perception but only from this language habit. Walker, Francis, and Walker tested this in 2010. When they showed observers balls that differed only in color, the observers found the dark balls heavier. But once the balls were picked up and weighed by hand, the relationship reversed: the dark balls felt lighter in the hand. This is an illusion similar to large objects feeling lighter in the hand than small ones, and it suggests that the link between darkness and weight comes not only from words but from perception itself.

The second objection is individual. The Mondrian study showed that only participants with design training reliably noticed the subtle balance shifts among the adaptations. In other words, visual weight doesn't operate with the same sensitivity for everyone; it sharpens with training and experience. A spot a designer calls "heavy" might go completely unnoticed by an ordinary viewer.

These objections don't invalidate the concept, but they do determine how it should be used: visual weight isn't an exact measure; it's an intuition a trained eye uses, partly supported by experiments.

Example — the weight of faces

An organization is arranging employee portraits from different skin tones in a grid for its "our team" page. One of the designers, relying on this lesson's rule, proposes that dark-skinned faces will be visually heavier and that the portraits should be distributed according to skin tone to preserve balance.

This proposal is wrong for two reasons. The first concerns perception: in a composition, human faces draw the eye strongly regardless of their color. A face's visual weight mostly comes from its being a face, from its gaze and expression; the lightness of the skin is only a small part of this calculation. The second concerns people: placing people as a compositional element according to their skin color reduces them to color areas. A grid's balance is achieved by keeping the portraits' backgrounds, cropping, lighting, and size equal; which face goes where is instead determined by the team's own logic, for instance by department or alphabetically.

Where visual weight genuinely does its job is around the portraits: the lightness of the backgrounds, the color of the frames, and the accent elements on the page. Once these are balanced, every face looks the same weight.

Common misconception

Summary

1. Visual weight is a metaphor that describes an area's power to draw attention and shift the balance toward itself; it's determined by size, position, shape, and color.
2. According to experiments, colors look heavier as they grow darker and more saturated, while hue has a small effect; a small but saturated, conspicuous red, placed far from the center, can balance out a large gray area.
3. The concept is contested: language habits and differences in training influence judgments, but the brightness-weight illusion suggests the link has a perceptual component; human faces, meanwhile, carry a weight independent of their color and shouldn't be placed according to skin tone.

Test yourself

1. (Easy) What is visual weight?
2. (Easy) According to Alexander and Shansky, how does a color's apparent weight change with lightness and saturation?
3. (Medium) How can a small red area balance out a large gray area?
4. (Medium) What is the brightness-weight illusion, and why does it matter in the visual weight debate?
5. (Hard) How do the results of the experiment with Mondrian adaptations limit the idea that visual weight works the same way for everyone?
6. (Hard) Why is "balancing" portraits by skin tone on a team page wrong, and how should balance be achieved instead?

Answers

1. An area's power, within a composition, to draw attention to itself and shift the balance toward itself; a perceptual quality determined by size, position, shape, and color ("Weight is a metaphor").
2. It increases as saturation increases and decreases as lightness increases; the effect of hue is small ("What determines weight?").
3. The gray area draws its weight from its size but has zero saturation; the red is small but highly saturated, which makes it look heavier per unit of area and makes it draw the eye on its own in a neutral surrounding. Placed far from the center, its effect grows even more, as on a scale ("Small red, big gray").
4. It's dark objects looking heavy, yet feeling lighter once weighed by hand. This reversal suggests that the link between darkness and weight comes not only from language habit but from perception itself ("Opposing view").
5. Only participants with design training reliably noticed the balance shifts among the adaptations; sensitivity to visual weight changes with training and experience ("Opposing view").
6. Faces draw the eye strongly regardless of their color, and placing people according to skin color reduces them to color areas. Balance should be achieved by keeping the portraits' background, cropping, lighting, and size equal; placement should instead follow the team's own logic ("Example — the weight of faces").

Sources

• Alexander, K. R. and Shansky, M. S., "Influence of hue, value, and chroma on the perceived heaviness of colors," Perception & Psychophysics 19(1): 72–74, 1976.
• Locher, P., Overbeeke, K., and Stappers, P. J., "Spatial balance of color triads in the abstract art of Piet Mondrian," Perception 34(2): 169–189, 2005.
• Walker, P., Francis, B. J., and Walker, L., "The brightness-weight illusion: darker objects look heavier but feel lighter," Experimental Psychology 57(6): 462–469, 2010.

Next step

TK-12 moves from color to language: it discusses the absence of a separate word for blue in some languages, Berlin and Kay's ranking of basic color terms and the criticisms raised against it, the two separate words for blue in Russian, and the distinction between gök and mavi ("sky" and "blue") in Turkish, along with experiments that test whether language affects perception. GT-03, meanwhile, turns weight into a reading order: it explains how to draw the path the eye will follow on a page using sparse emphasis and calm white space, and how to test hierarchy by blurring a design.