Begin site navigation:
End site navigation.
Talking Caller ID device.
Color is an amazing component of our lives. Engineers use color to guide traffic. Marketers use it to
sell products. Artists use it to define their work. Chefs use it for presentation. And we all use
color to make statements, create our personal environments, and impact our emotions.
You likely have at least one favorite color. But, does everyone see that color the same way as you do? Probably not. In fact, about one in 20 people have some sort of color vision deficiency. These people are considered color blind, which is a bit of a misnomer. People who are color blind can see, and they can also typically see a variety of colors. However, they are unable to distinguish some colors, such as reds from greens, or yellows from blues.
To understand color and to use it correctly, it helps to know a little science, and a little about art.
Sunlight, or white light, is comprised of different wavelengths which appear as different colors. Anyone who has ever split rays of sunlight through a prism has replicated a similar experiment conducted by Sir Isaac Newton to reveal the full spectrum of visible light. When white light hits a colored surface, some of the wavelengths of light are absorbed and some are reflected. The color that you see depends on this combination, along with the proper function of your vision.
Within your eye, you have approximately 7 million photoreceptor cells called cones that perceive this reflected light. There are three different types of cones, and each one responds to a distinct wavelength centered at 430 (blue), 535 (green), or 590 (red) nanometers. Combinations of these cones respond at different intensities to produce the spectrum of colors in various degrees of brightness and saturation. This sensory information is then transmitted via the optic nerve to your brain, which interprets the color.
Any single color that you see is defined by three attributes:
In the art world, traditional color theory states that there are three primary hues. These are the colors of red, yellow and blue which cannot be created by any combination of other colors. They are the color equivalents of mathematical prime numbers. All other colors are derived from these three hues, including mixing the primary colors to create secondary colors of green, orange and purple. And, mixing one primary and one secondary color to produce the tertiary colors of yellow-orange, red-orange, red-purple, blue-purple, blue-green and yellow-green.
The value of a color can be considered in terms of white and black, for example, when mixing paints. Most colors can retain the same hue while adding more white pigment, and these make up the pastel colors. Colors with more black pigment are the darker versions of the same hue. In visual terms, colors that reflect back the most white light are the pastels, and colors that absorb the most white light are the darker colors.
Saturation can be thought of in terms of grey. Adding more grey pigment to a color muddies or dulls it, whereas a more translucent or pure color will be more vivid or saturated. In visual terms, when the surface of an object is colored, for example, blue, the blue wavelengths are reflected and the others are absorbed. The surface will look bright blue (highly saturated) if most of the other colors are absorbed and only the blue wavelengths are reflected. If most of the other colors are not absorbed, the surface will look dull blue (low in saturation) because only some of the blue light is reflected.
Colors are perceived differently by a person who is color blind. In this case, his or her cone photoreceptors respond abnormally, or not at all. As a result, they experience a color deficit. The most common category of color blindness is often called red/green color blindness. There are two similar types: protanopia and deuteranope. Another form of color blindness is tritanopia which is an insensitivity to short, or blue, wavelengths. In either case, these individuals cannot easily distinguish some hues that have the same value or saturation. However, they may easily be able to distinguish the same hues as long as there is a high contrast between them.
So what does all of this mean to you, the Web developer? Well, your Web page is something you are creating to present information to an audience. A pleasing and well-designed presentation will make your audience want to explore the information. You will also want to be sure that your design is accessible by the largest audience possible so that everyone can receive the information. Understanding these fundamentals can help you use color in ways that it is most effective. And, following these guidelines below will give you confidence that your design is also accessible.
When using color on your Web page, or in your images, charts or graphs, make sure that all information is clearly available without color. Making information available without color also means that the color choices you make can't obscure meaning. For example, black text and red text look the same for people with protanope, so important text that is presented only in red will not stand out to these users. It is fine to use color on your Web page, just ensure that the information you provide and its meaning is the same if the page is viewed in the absence of color.
Technique:
Please enter your name!
Error! Please enter your name.
You might also need to provide additional text or visual cues to make your information available. This is particularly true for charts and maps, which usually have color-coded legends. For these items, label elements of the graph or map on the image itself, rather than providing a legend. Using symbols or numbers can also help distinguish portions of the graph or map.
Examples:
Image courtesy of Masataka Okabe and Kei Ito
Plain map, and map in grayscale
How the map appears to someone with protanope or deuteranope, and tritanopia
Plain map with visual cues appears better in grayscale
Related Section 508 checkpoint: Paragraph (c)
Checking your design on a black and white display is not necessarily enough to determine if the information will be discernable by someone with color blindness. Some color combinations may appear as though they have enough contrast when viewed in grayscale. But, they may still be problematic for people with color blindness. Don't assume that the contrast you perceive will be the same as the contrast perceived by people with color deficits. You can generally assume that they will see less contrast between colors than you.
Technique:
Bottom row image transformations: tritanopia, deuteranope, and protanope.
Images courtesy of Lighthouse International.
The hue combinations you choose are less important than the value or saturation of those hues. Color combinations that have the same value but that differ only in hue should be avoided. A red/green combination with the same value will be indistinguishable to someone with deuteranope or protanope, however, increasing the value of one color and decreasing the value of the other color will create greater contrast between the two colors. High contrast means that your combinations will generally be viewable by individuals with any category of color blindness. Effective contrast also makes your content more accessible to people with low vision.
Related W3C WCAG 1.0 checkpoint: 2.2
Color references such as "green", "blue", "red," are not universally interpreted by all Web browsers. Instead, always choose the hexadecimal color references for your Cascading Style Sheet references.
Technique:
<span style="color: green;">Contact Us</span>
<span style="color: #339933;">Contact Us</span>
Related W3C WCAG 1.0 checkpoint: 2.2
According to color theory, harmonious color combinations can be created by using any two colors that are opposite from each other on the color wheel, any three colors that are equally spaced around the color wheel forming a triangle, or any four colors that form a rectangle (or two pairs of colors opposite each other). These combinations lead to a variety of pleasing color schemes. Discover the artist within you by experimenting with the color wheel and various color schemes, just remember to follow accessible color guidelines.
