How We See Color
Chapter 4 of Designing with the Mind in Mind talked about reading and how we process language (both spoken and read), along with ways to improve scannability and comprehension. Chapter 5 talks about color, including how our eyes process colors, visual limitations and guidelines for using colors.
If you’re someone like me who never learned about the anatomy of the human eye, reading about it was mind tingling! There was a lot of internal “ohhhh, so that’s how it works” moments. So let’s start!
How does the eye work?
Here’s a quick overview of the first layer of the retina’s anatomy. Our retina, where visual images, are formed has:
- Rods that detect brightness and are mainly used in low level lighting like a candle-lit dinner to help us get around.
- Three types of cones that are sensitive to the different light frequencies.
- Low frequency light cones – span the entire spectrum of visible light but mainly yellow (middle) and red (low).
- Medium frequency light cones – are the blues (high) and yellows and oranges (middle).
- High frequency light cones – are the violets and blues (high) and some greens (middle).
How does our brain process the colors that we see when the cones detect color?
In the visual cortex of the brain, there are neurons grouped into three different channels called color-opponent channels. Each channel performs differently from each other and each does one of the following:
- One subtracts the signal that is received from optic nerves coming from the low and medium frequency cones, creating “Red-Green” difference signal.
- Another one subtracts the signal from medium and high frequency cones producing “Yellow-Blue” difference signal.
- The last adds the signal from the low and medium frequency cones that produce luminance (black-white).
What can affect the way we perceive colors?
- Our visual system is sensitive to contrasting edges rather than seeing in absolute brightness or color. This allows us to see the same object on different background conditions. (See Figure 5.2)
- Factors such as paleness, color patch size and separation can affect our ability to differentiate color.
- Paleness – less saturation between two colors makes distinguishing them harder. (See Figure 5.4 A)
- Color path size – The size of the of the object will affect how hard or easy it will be to determine the color. The smaller the object, the more difficult it is to tell the color. (See Figure 5.4 B)
- Separation – The greater the distance between two somewhat similar colors will make it more difficult to tell them apart. (See Figure 5.4 C)
- Dysfunction of one or more color subtraction panels (i.e color blindness) can limit a person’s ability to determine a particular color. The most common type of color blindness is “red/green.” Folks with this sort of dysfunction can’t tell the difference between colors like blue and purple or green and khaki.
Guidelines for using colors
- Colors should have great difference in contrast and avoid subtle color difference. Test the design/color by turning it into gray scale and if colors aren’t distinguishable, the colors aren’t different enough.
- Use of distinctive color such as black, white, red, green, yellow, blue. This causes a strong signal on one of the three color-perception channels. Other colors triggers more than one of the channels, making it harder to differentiate the colors as quickly and easily as black, white, red, green, yellow and blue.
- Use dark colors against light colors. Avoid pairing colors that are hard to distinguish by color blind people. Colors like dark red on black, dark red on dark green, blue on purple, light green on white.
- When using colors to determine differences between objects, use additional cues to help set one from another. (See figure 5.13)
- Separate the use of multiple strong opponent colors to avoid a clashing and disturbing shimmering sensation. (See figure 5.14)
Hope you learned something new as I have. Till next week!