This is the first in a three part post on color. This first post addresses some common drawbacks to using color; the second, Emotion and Color, examines common emotional interpretations of color; and the third, Designing A Color Palette, presents some approaches and tools for building a color palette.

The Visible Spectrum

The visible color spectrum is measured in wavelengths and beginning with violet at 380 nm and ending with red around 750 nm. This band makes up the full spectrum of what can be seen by the human eye. However, the human eye and the devices we use to capture and reproduce color have their limitations.

Color Blindness and 508 Compliance

The retina has two types of cells that respond to light, rods and cones. Rods pick up on the intensity of light and give us low light vision. Cones are more specialized and occur in three types, each containing photosensitive proteins that respond to different frequencies of light. When these rods or cones are missing or damaged, an individual is said to suffer from color blindness. Though color blindness is typically classified as a mild disability, it affects a large number of people and can become a severe disadvantage when data is represented with color. In the DC metro map below you will see it can be quite difficult for someone with color blindness to follow the subway lines, especially where the Green and Red lines intersect for people with Deuteranopia. To compensate for this, you will notice that the map designers have add labels at the ends of each line, making it possible to identify them without color.

If you are concerned about how your data is perceived by people with color blindness or need to be 508 compliant, you can check it with one of the many free tools listed at the W3C.

Device Color

Device color is another limitation to be aware of. Have you ever taken a photo of a beautiful sunset, only to print it out and see that your masterpiece photo is dull and murky?

Inherent hardware limitations restrict the range of reproducible colors. Your computer monitor is not able to produce the full color spectrum and printing technology is capable of producing even less. The equipment we use to capture images, such as scanners and cameras, have their own range of colors they are limited to. In addition to that, all of these things, including our eyes, are susceptible to environment, age and the amount of time they have run that day.

Below are two representations of the ranges, or gamuts, of color devices. In the first shape, the rounded outer shape represents the visible spectrum mentioned above; what we can see with our eye. The inner triangle shows device color. As you can see it is quite a bit smaller than the visible spectrum. The second image is more device specific and shows the top and bottom of a 3D color model (created with ColorSync Utility available on most Mac computers). The outer shape represents the color that a typical LCD monitor can produce. The inner core is what can be produced by a high-end printer. Once again, it is a much smaller space and you will notice that there are some colors that can be produced in print that cannot be captured on a monitor.

http://en.wikipedia.org/wiki/File:Cie_Chart_with_sRGB_gamut_by_spigget.png

You Can't Always Trust What You See

One of the most shocking things I learned as an artist is that color has the illusion of energy and motion, and not just in the poetic sense. If you know how to harness this illusion, you can use it to great affect. If not, you can literally repel your users. In fact, one of the contrast effects is so powerful I am only linking to it, as it makes it text near it very difficult to read.

Vibrations

Some colors vibrate when put next to other colors. In the chart below from the Penn State Accessibility site, you can see that, not only does it almost “hurt” to look at these colors, the text becomes very difficult to read without looking away, not something you want your audience to experience. However, this same effect is often used by artists to add energy to their paintings. Notice how in Van Gogh’s Café Terrace, the artist uses the vibration of orange on the distant blue buildings to make the lights pop. Additionally, the yellow/orange of the cafe pushed forward and in front of the taller blue building behind it.

Contrast

Each color has their own value, or level of “greyness.” if the values of two colors are too close, like the example on the left, the contrast is too low and can be difficult for someone with vision problems to see it. Again, there are many free contrast checking tools listed at the W3C.

Contrast can also cause vibration, to the point of movement. The work of Akiyoshi Kitaoka literally has to be seen to be believed.

(link: http://www.ritsumei.ac.jp/~akitaoka/index-e.html)

Finally, if you still think your eyes are the ultimate truth of the visible world, watch the video below. Color that does not exist will appear before your very eyes. Enjoy!