Maroon. Chartreuse. Marigold. Cerulean. There are many colors to choose from when designing infographics and data visualizations, as well as when creating content for social media. Is there such a thing as the “right” color or the “wrong” color to use? I’m not going to tell you that my favorite color is better than yours, but there is something special about the color yellow.
To understand what makes yellow unique, you need to know how the human eye is built. The back of the retina is covered in light-sensitive neurons known as cone cells and rod cells. There are three types of cone cells, each sensitive to different ranges of light. These ranges overlap, but for convenience, the cones are referred to as blue (short-wavelength), green (medium-wavelength), and red (long-wavelength). The rod cells are primarily used in low-light situations, so we’ll ignore those for now.
When light enters the eye and hits the cone cells, the cones get excited and send signals to the brain through the visual cortex. Different wavelengths of light excite different combinations of cones to varying levels, which generates our perception of color. You can see that the red cones are most sensitive to light, and the blue cones are least sensitive. The sensitivity of green and red cones overlaps for most of the visible spectrum.
The Opponent Process Theory of Color
Here’s how your brain takes the signals of light intensity from the cones and turns it into color information. To see red or green, your brain finds the difference between the levels of excitement in your red and green cones. This is the red-green channel.
To get “brightness,” your brain combines the excitement of your red and green cones. This creates the luminance, or black-white, channel. To see yellow or blue, your brain then finds the difference between this luminance signal and the excitement of your blue cones. This is the yellow-blue channel.
From the calculations made in the brain along those three channels, we get four basic colors: blue, green, yellow, and red.
- Seeing blue occurs when low-wavelength light excites the blue cones more than the green and red.
- Experiencing green takes place when light excites the green cones more than the red cones.
- Encountering red happens when only the red cones are excited by high-wavelength light.
Here’s where it gets interesting.
Seeing yellow is what happens when BOTH the green AND red cones are highly excited near their peak sensitivity. This is the biggest collective excitement that your cones ever have, aside from seeing pure white.
Notice that yellow occurs at peak intensity in the graph to the right. Further, the lens and cornea of the eye happen to block shorter wavelengths, reducing sensitivity to blue and violet light.
This, combined with the neuronal nirvana resulting from the overlapping sensitivity of the red and green cones, is why yellow appears to be the brightest color in the spectrum, making it a unique and useful color.
Have you noticed that “dark blue” seems perfectly natural but “dark yellow” sounds a bit paradoxical? “Bright yellow” is just plain redundant. Yellow is also colorblind-safe.
About 8 percent of males can’t distinguish between signals from red cones and green cones, which means that they don’t have the red-green channel. To them, the color spectrum might look like this:
This makes it obvious that using purple/blue, and yellow/orange allows for colorblind-safe design. Some people don’t have the blue-yellow channel, but that is far less common. (Instead of having color deficiency, some people have FOUR types of cones, which gives them color superpowers!)
Let’s look at a few examples of color selection:
Single Object on Background
The goal of color selection is to create elements—such as words or shapes—that are quickly and clearly distinguishable from the background and from surrounding elements.
Because the yellow-blue channel is closely related to the luminance (“brightness”) channel, it provides nearly as much luminance contrast as black-white. Contrast is a good thing. Blue, when used with green or red provides moderate contrast.
Because the red-green channel is used by the brain only for difference in color, but not brightness, the contrast between red and green is less distinct. You might even feel a bit funny or cross-eyed when looking at the red-green boxes.
Sequence of Colors
For the reasons mentioned above, the transitions from white to black, and from light yellow to dark blue provide high contrast and ease of visual scanning for each unique color.
Again, the red to blue sequence offers moderate contrast. The red to green sequence falls within a very tight range of luminance values, so it does not support easy visual searching and scanning. Notice how difficult it is to differentiate between the smaller regions as compared with the other versions.
Color map generated with ColorBrewer, © Cynthia Brewer, Mark Harrower and The Pennsylvania State University
3D Shapes
The luminance channel gathers information about depth, shape, and shadows—necessary for seeing three-dimensional objects. For this reason, it should be clear to you that the black-and-white version of this illustration of Yosemite is a landscape with crests and valleys. The yellow-blue version is a bit less clear, but 3D perception is not entirely destroyed. However, no shape information comes from red-green, so this version appears not as a landscape, but a random pattern of color information.
The Bottom Line
When it comes to selecting colors for your designs, remember that luminance is important for 3D perception, and not all colors are created equal when it comes to contrast.
The smaller an object, the more contrast required to distinguish it from the background and surrounding objects. Yellow and dark blue are a great place to start for high contrast (take a look at the use of yellow/blue in movie poster designs), and you can experiment from there to add unique character to your designs.
Avoid mixing red, grey, and green, as they will be difficult to differentiate even for those who aren’t colorblind. For more on this topic, see Colin Ware’s book, Visual Thinking for Design.
