Colors that fool your eyes

Short answer

The visual system measures color and lightness not as absolute values, but by comparison, across time and space. When you stare at a color for a long time, its channel tires, and afterward you see an afterimage in the complementary color; that's a comparison across time. The same gray square looks different against different backgrounds, or under different shadow and light conditions, because the brain compares each square with its neighbors and factors in the shadow and light conditions; that's a comparison across space.

Three illusions, one principle

This lesson looks at three well-known visual illusions: a flag that appears in inverted colors after you stare at it, Adelson's checker shadow illusion, and colored shadows. At first glance, all three look like "a flaw in the eye." In fact, all of them are side effects of a system that does its job very well most of the time, showing up only under unusual conditions.

The shared principle is this: the visual system codes differences, not absolute values. It decides a surface's lightness and color not by looking at the amount of light reaching it alone, but by comparing that light both with the light that arrived just before and with the light coming from neighboring surfaces. BI-13 showed how this comparison produces color constancy; here, you'll see where the same mechanism goes wrong.

Comparison in time: the afterimage

Try this experiment. Picture the Turkish flag with its colors inverted: cyan where the red ground was, black where the white crescent and star were. Stare without moving at a point in the middle of this image for about half a minute, then shift your eyes to a plain white surface. For a few seconds, you'll see a white crescent and star on a pale red ground.

The cause is adaptation. While you look at the cyan ground, the visual signal pathways in that region keep receiving the same stimulus and reduce their sensitivity to it. When you look at the white surface, white light carries all wavelengths, but the pathways with reduced sensitivity to cyan respond more weakly, while the others respond comparatively more strongly. The balance shifts toward red. In the region you looked at as black, the pathways were never stimulated and stay sensitive; once you shift to the white surface, that region looks brighter than its surroundings.

Where this adaptation takes place was debated for a long time. Some researchers argued that the afterimage forms in the cortex. In 2012, Qasim Zaidi and colleagues, with recordings they made in monkey retinas, found that all three classes of ganglion cells — which carry signals from the retina to the brain — show slow, subtractive adaptation to prolonged stimuli and produce rebound responses once the stimulus stops. According to the authors, afterimage signals are generated in the retina, but like other retinal signals, they can also be shaped further in the cortex.

The fact that the afterimage appears in complementary colors is consistent with the brain processing color through opponent color pairs; the opponent process theory itself is the subject of BI-11.

Comparison in space: two squares of the same gray

The question on the lesson card starts here: why do two squares of the same gray look different?

In its simplest form: a medium gray square in the middle of a black background looks lighter than the same gray square in the middle of a white background. The same thing happens with color: a gray square on a green background looks slightly pinkish, and the same gray on a pink background looks slightly greenish. Each surface gets pushed toward the opposite of its neighbor. This effect is called simultaneous contrast; DT-08 covered, from a design standpoint, how it makes opposite colors look brighter next to each other. Here's a look at the mechanism behind it.

At the root of simultaneous contrast is the center-surround structure of many cells in the retina and the brain: a cell is excited by light falling on the center of its receptive field and suppressed by light falling on its surround, or the reverse. A bright surround suppresses the signal from the gray square at the center, making the square look darker; a dark surround doesn't suppress it, so the square looks lighter. The system transmits not the absolute light level, but the difference between center and surround.

But this explanation doesn't account for everything. The checker shadow illusion, published in 1995 by Edward Adelson of MIT, goes beyond local contrast. A checkerboard made of light and dark squares has the shadow of a cylindrical object falling across it. A dark square labeled A, sitting in the light, and a light square labeled B, sitting in the shadow, carry exactly the same numerical value on screen. Even so, A looks dark and B looks light, and this difference is almost unbelievably strong, until a strip is drawn connecting the two squares.

According to Adelson's explanation, two things work together here. The first is local contrast: B is affected by the dark squares around it, A by the light squares around it. The second is stronger: the brain notices the shadow's edges, its soft transitions, and the presence of the cylinder, and decides that B is in shadow. A surface in shadow reflects less light than it otherwise would; the brain factors this in and concludes that B is actually a light square. The visual system's goal isn't to measure pixels but to find the true properties of surfaces, and in a scene like the checkerboard, this goal leads to the right answer. The illusion is only an illusion if the question being asked is "what is the pixel value?"

Colored shadows

The third illusion is, in fact, half real. Johann Wolfgang von Goethe, in the color book he published in 1810, describes this observation: at dusk, set a lit candle on a sheet of white paper, and place an upright pencil between the candle and the fading daylight. The shadow the pencil casts from the candlelight looks a beautiful blue where daylight illuminates it.

The physics is simple. The candle's light doesn't reach inside the shadow; only the faint, bluish daylight coming from the sky does. So the shadow really is slightly blue. But the blue you see is far stronger than the blue that's physically measured. The reason is perceptual: the candlelight is the scene's dominant light, and the brain treats it as white, meaning it subtracts out its orange tint. Next to this warm surround, and with simultaneous contrast adding its effect, the shadow's faint blue turns into a noticeable blue.

The same effect shows up often in everyday life: on a sunny afternoon over snow, shadows are blue, because only the blue sky's light reaches into them; under streetlights in the evening, shadows can take on unexpected colors.

Example — the background's effect on skin

A photographer shoots portraits of three people with different skin tones, photographing the same person first against a dark gray background, then against a light gray one. In both photos, the light falling on the person's face and the camera settings are identical. Even so, viewers judge the face in front of the dark background as lighter, and the face in front of the light background as darker. The effect shows up on every skin tone, because the face's lightness is read relative to its background.

Against a colored background, the effect shows up in the tone as well. A saturated green background pushes skin, through simultaneous contrast, toward its complement — a more reddish, pinkish direction; a saturated orange background can make skin look cooler and paler. This is one reason portrait and product photographers favor neutral gray backgrounds: the background doesn't lend its own color to the skin. Choosing a background is a color decision for anyone who wants to show skin tone as it really is.

Common misconception

Summary

1. The visual system codes color and lightness relatively, not absolutely: it compares against the preceding stimulus in time and against neighboring surfaces in space.
2. The afterimage seen after prolonged staring arises from the adaptation of signal pathways in the retina and carries complementary colors.
3. Two squares of the same gray look different because of their surroundings' local contrast and because the brain factors in shadow and light; in colored shadows, by contrast, a real color difference is amplified by perceptual contrast.

Test yourself

1. (Easy) What do you see after staring at a flag in inverted colors for a long time and then turning to a white surface?
2. (Easy) What is adaptation?
3. (Medium) Why do two squares of the same gray look different?
4. (Medium) In Goethe's experiment, why does the pencil's shadow look blue?
5. (Hard) Why can't the checker shadow illusion be explained by local contrast alone?
6. (Hard) Why does the same person's face look different when photographed against a dark versus a light gray background, and what does this mean for choosing a background?

Answers

1. A temporary afterimage carrying the complementary colors and inverted lightness of the original image; after a flag with a cyan ground and a black crescent and star, a white crescent and star on a red ground ("Comparison in time: the afterimage").
2. The reduction in a nerve cell's or perceptual channel's response to a stimulus after prolonged exposure to that same stimulus ("Comparison in time: the afterimage").
3. The visual system compares each square with its surroundings: a bright surround makes the square look dark, a dark surround makes it look light. In addition, if the brain decides a square is in shadow, it calculates that the square is actually a lighter surface ("Comparison in space: two squares of the same gray").
4. The candle's light doesn't reach the shadow; only the bluish daylight does. On top of that, the brain treats the dominant candlelight as white and subtracts out its orange tint, and the shadow's faint blue is strengthened by contrast ("Colored shadows").
5. Local contrast explains part of the effect, but the main effect comes from the brain recognizing the shadow's edges and the object, and deciding that square B is in shadow; the brain then calculates the reflectance of the surface in shadow ("Comparison in space: two squares of the same gray").
6. The system compares the face with its background: a dark background makes the face look light, a light background makes it look dark; colored backgrounds also push skin tone toward complementary directions. This is why a neutral background is preferred for showing skin tone as it really is ("Example — the background's effect on skin").

Sources

• Zaidi, Q., Ennis, R., Cao, D., and Lee, B., "Neural locus of color afterimages," Current Biology 22(3): 220–224, 2012.
• Adelson, E. H., "Checker Shadow Illusion," MIT Perceptual Science Group, 1995.
• Goethe, J. W. von, Zur Farbenlehre, 1810; English translation Theory of Colours, 1840.

Next step

BI-19 turns this lesson's question into a measurement: it covers the CIELAB space, built to express numerically how different two colors look from each other, its goal of perceptual uniformity, the conversion from XYZ, and lightness, chroma, and hue angle. DT-16, meanwhile, turns these same illusions into a design tool: it covers Josef Albers's exercises, which make one color look like two and two colors look like one, and his teaching method.