Firelily Designs

Home Sites Gallery Clients Opinions Tutorials About Contact
Firelily Designs

Color Vision, Color Deficiency

The subject of color usage on the web comes up once in a while, so I thought it might be useful to pull together some basic issues for people who might be interested in color. It is not a discussion of when and whether it is appropriate to use color at all, or of considerations for international use of color; those are huge topics deserving separate discussion.

There is a basic principle for visual design that I see being ignored a lot on the web: Design in black and white. Add color for emphasis, when your design is complete. Color should never be the only visual cue for anything.

This brings up an immediate frustration; every browser I've seen breaks this principle by providing no distinction between links and visited links except for color. Bad browser designers. No cookies.

One of the fundamental issues underlying the "design in black and white" principle is that color perception varies from one person to another.

A couple of years ago, I was involved in running a usability test. One of the subjects had trouble distinguishing some feature, and we asked for suggestions on how to improve the interface. He said, "Make it red." I had a bit of fun replying, "All three of us in the control room have color vision problems. Can you think of something else that might work?"

Color perception problems are more wide-spread than people think, and have more causes and variations. As many as one male in twelve may be affected to some degree; the number is much less for females, but definitely not zero (one estimate is around 0.4%). Before we try to understand color deficiencies, though, it would be useful to understand how color vision works.

Light and Color

Normal vision.
Normal color perception.
 

color vision and gray-scale vision
Color vision co-exists
with night vision (but not
with much rod sensitivity in daylight).
 

We need to begin at the beginning, with light, which is itself a human perception. Light is one portion of the electromagnetic spectrum, along with X-rays and radio waves. The tiny part of this spectrum that we call light is that portion to which the human eye is sensitive. Color is another perceptual value; there is nothing about light at a wavelength of 700 nanometers that makes it red. Red is simply a perception of light, as are all other colors. Even so, we will use "red light" as a shorthand to mean something like that, along with "blue light" and "green light" for other portions of the electromagnetic spectrum.

The eye perceives light and color because of cells in the retina which contain photosensitive pigments. When a molecule of these pigments is struck by photons, it gives up an electron; enough of these free electrons will cause a neuron to fire, reporting that the cell (a rod or a cone) has received a certain amount of light. Other chemical processes ensure that an electron is eventually returned to the pigment molecule.

At a basic level, that's really all that happens at this stage. There are three types of cone cells, each of which contains a different pigment, with each pigment being sensitive to a different range of wavelengths, corresponding to red, green, and blue. The rod cells, which are responsible for night vision, are sensitive across this entire range, and do not differentiate between "colors."

Note the basic simplicity of the process. A cell receives photons and says, "Oh, light, I'd better tell someone." That "someone" is the brain, in which various processes and groups of cells will aggregate and compare visual signals. Part of that process includes recognizing that a cone which is supposed to be sensitive to "red light" was triggered, and that the correct perception of this experience is to see red.

Take a moment to think about the complexity of color, brightness, and texture that you see constantly. Obviously there is more to vision than I have described, but most of it takes place behind the eyes. At the retina, sensation is limited to a small number of things: a range of wavelengths (only three, for red, green, and blue light), and intensity. The more light that strikes a cone cell, the more often it fires its neuron--up to a point, because the replenishment of electrons takes time and in bright light, a cone cell can run low on pigment molecules which can still give up that extra electron. The retina also does a certain amount of aggregation, both additive (to increase signal strength) and subtractive (which provides initial input for contrast detection).

With only three types of photosensitive pigments (erythrolabe for red, chlorolabe for green, and cyanolabe for blue), it might seem to make no sense that we can see so many colors. And yet we do. Each pigment is sensitive over a range of wavelengths, with a bell-shaped sensitivity curve that peeks at a specific wavelength. CIE, the International Commission on Lighting, has established three wavelengths that correspond to primary colors (700 nm for red, 546 nm for green, and 436 nm for blue); these are used for color matching. The sensitivity curves for the cones are centered around wavelengths of approximately 425, 525, and 625 nm, respectively, but these sensitivity curves spread out and overlap. Understanding the overlap is crucial.

Graph of normal cone response curves

The effect of the sensitivity curves is complex. Each cone type responds to a broad range of wavelengths. At any given wavelength, the cone has a range of responsiveness that corresponds to the height of the curve at that point. At many wavelengths, more than one cone type may respond to the same stimulus.

Suppose that a low-intensity light is received by the red cone; the light is at the red cone's peak wavelength. Suppose the red cone then receives a high-intensity light which is well off the peak wavelength, but still within the red cone's range of sensitivity. it is entirely possible that these two situations would generate exactly the same neural response. This is an important concept: within its range of sensitivity, a cone cannot distinguish one wavelength from another. It's ability to measure the intensity of a light source is completely dependent on its sensitivity at that wavelength. In effect, all that a cone can report is how much its pigment responded to light.

How does the brain distinguish between two identical neural responses from red cones to interpret one as red and the other as, perhaps, yellow? In the case of a low-intensity red light, only the red cones will respond. In the case of a yellow light, both red cones and green cones will respond. Both cone types respond only by saying, "I was stimulated this much." What the brain brings to the equation is knowledge of the sensitivity curves for each cone type, and knowledge of the overlaps between the curves. It uses this information to interpolate the results, translating reports from red and green cones into a perception of a different color of light at the correct intensity. This knowledge is built in to the brain; it cannot be learned or unlearned.

This is exactly the mechanism that color monitors (and television) rely on to generate the illusion of full color. A color display really only generates three colors, which are red, green, and blue. By varying the intensity of light generated at these wavelengths, a color monitor mimics the way that the eye perceives wavelengths that fall between the peaks of the cone sensitivity curves. This mimicry is not perfect, though, and also enables a monitor to generate perceived colors that do not correspond to natural wavelengths of light.

This last issue generally falls into the area of spectral and non-spectral colors. A spectral color is one which the eye can perceive based on a single wavelength of light. Violet is a spectral color, but purple (a combination of red and blue, whose corresponding cone sensitivity curves do not overlap) is a non-spectral color. White is also a non-spectral color; it is perceived when all three cone types are stimulated by light.

Now we are prepared to talk about color vision deficiencies, and how they relate to computers.

Color Deficiency

Graph of color sensitivity for green-insensitive dicrhomats

The most commonly recognized form of "color-blindness" is the sex-linked red-green perception deficiency. Note that even the term "red-green" is misleading; the defect is always with one or the other, but with side effects, and that there are four distinctly different defects. The cone cells, which are the cells in the retina which detect color, each contain a light-sensitive pigment which is sensitive over a range of wavelengths. The sensitivity curve is roughly bell-shaped. Genes contain the coding instructions for these pigments, and if the coding instructions are wrong, then the wrong pigments will be produced, and the cone cells will be sensitive to different wavelengths of light. The colors that we see depend on the interaction between the sensitivity ranges of those pigments and the brain's expectations of those sensitivity ranges. When those expectations don't match the realities of the cones, perception of color suffers.

Green visual information missing.
Available light without green.
(green-insensitive dichromat)
 

Red perceived as red and green.
Red perceived as both red and green.
(green-insensitive dichromat)
 

The pair of images to the right shows a simulation of the effects when the red and green cones both contain erythrolabe, the pigment sensitive to the red portion of the visible spectrum. The only sensitivity in the green range is from the "overlap" segments of the sensitivity curves. The green-sensitive cones are active, but they respond to the red portion of the spectrum; the brain will respond to this as if the green-sensitive cones were responding to green light. A person with this defect would probably not be able to distinguish between this pair of images; in addition, these images should appear indistinguishable from the "normal" version further up the page.

To demonstrate how radically the different "red-green" defects can vary from each other, let's take a look at the opposite case, where the red and green cones both contain chlorolabe, the pigment which is sensitive to the "green" section of the visible spectrum. The sensitivity curve of the red cones matches the sensitivity curve of the green cones exactly; yet the brain will continue to interpret signals from each as corresponding to "red" and "green" light, respectively.
Graph of cone sensitivity curves, red-insensitive

The result is what you see in the pair of images below. As before, the first image shows what light is available, given that no cones are sensitive to the red segment of the visible spectrum. The second image shows approximately how the brain will interpret the results, given that the red cones are responding to "green" light. Again, a person with this defect should not be able to distinguish between this pair of images, or between these images and the "normal" version presented earlier in this article.


Red visual information missing.
Available light without red.
(red-insensitive dicromat)
 

Red visual information missing.
Green perceived as both red and green.
(red-insensitive dichromat)
 

This is a point that is frequently omitted or misunderstood in discussions of color perception. Many people think that because the eye is insensitive to a particular color range, that those cones are not functional at all. They are functional. The problem is that they see a different range of colors. This is crucially important to understanding how people with deficient color vision actually see their world.

It's also worth remembering that the rod cells aren't affected by color deficiencies, so low-level gray-scale vision is still available in affected ranges. However, at daylight intensities, the rods are normally overwhelmed and not very responsive to any light.

More Variations

There are actually four forms of red-green defects. We have talked about the dichromats; people with the other two of these variations are classified as "anomalous trichromats." These people can see red, green, and blue (corresponding to the peaks of the "normal" sensitivity curves), but either the red curve is shifted toward the green range of the spectrum, or the green curve is shifted toward the red. However, while the curve is shifted, laterally, to one direction, the effect seen by that person is that the eye is less sensitive (i.e., a perceived lowering of the sensitivity curve) to that color. At low saturation levels, that color simply disappears. Anomalous trichromats with deficiency in the green range account for over half of people with color vision deficiencies; about five percent of all males have this condition.


Anomalous trichromat
with a shift in green sensitivity


Anomalous trichromat
with a shift in red sensitivity

People with the first two variations are classified as "dichromats." In these variations, either the red cones contain the pigment intended for the green cones, or the green cones contain the pigment intended for the red cones. Either way, the result is complete loss of sensitivity to a portion of the visible spectrum. However, please remember that the cones are still functional; while red and green cones will both be sensitive to either red or green, they will report to the brain that they are seeing the colors they are expected to see. Nowhere in the brain, optic nerve, or retina is there any awareness of or compensation for the pigmentation defects in the cones.

I have been told that each of these four variations involves a defect to the same gene. Because this is a sex-linked trait, and the gene resides on the X chromosome, a genetic male should have at most only one of these four conditions.

Red-green color perception difficulties can occur in genetic females. For this to happen, a female would have to inherit defective red-green color vision genes from both parents. This is fairly rare, but can also result in a female with multiple forms of red-green color deficiencies. I remember one case study of a woman with both forms of the "dichromat" defect. No, they did not compensate for each other.

At this point I will mention that I am an anomalous trichromat, with a perceived sensitivity loss in both red and green. Why do I bring my own condition into this discussion? First, just to reinforce that various conditions exist; I'm not a classic dichromat, as the color-deficient are usually understood.

How is it that I have perception problems with both red and green, if I'm an anomalous trichromat? It's those sensitivity curves again. Let's say that my green cones have a sensitivity curve that centers in a yellow-green range. I'd have more overlap than normal between the red and green cones, and less overlap than normal between the blue and green cones. (I believe this to be the case for my vision.) How would this affect my perception of color?

For one thing, I have difficulty with certain red shades, but only pastels. Light, unsaturated reds (e.g., pale pink) seem to stimulate my red and green cones about equally. This color of light simply looks "dirty" to me. On the other hand, dark, unsaturated reds don't cause a problem; my red cones respond normally, and my green cones don't respond to this situation at all.

Low-saturation of green, though, can simply fall into a hole. Pale greens turn gray; very dark greens go black. In between, green seems basically "green" to me, very different from red or yellow. I probably don't see green as intensely as other people do, though.

The reason for discussing all this is that I want you to understand that I have a particular interest in the use and abuse of color in design. It forces me to question the numbers about how frequently color perception problems occur in the population. I don't know who might be color-deficient; it might even be me! More to the point, color perception problems are more subtle than most people appreciate, a fact that I've become very sensitized to.

How often does color deficiency occur? Don't place bets. Not all anomalous trichromats are even aware of their condition. I didn't know until I failed a color vision test at age 18. The safe figure is one in twelve for males, and it could be higher.

As long as we're on the subject of genetics, I will mention that blue color perception problems also exist, but they are rare, and they are usually accompanied by other, more severe visual difficulties. There are also monochromats who see no color at all. Again, there are accompanying visual difficulties; for monochromats, these include extreme sensitivity to light and difficulties with close focusing.

Is this it? No; diseases can also affect color vision. Of the two other people I mentioned in the usability test example, one was a male dichromat, the other was a woman with glaucoma. She has a non-acute form of glaucoma, and had some permanent damage occur before the condition was detected and treatment begun. Among other things, she now has different color perception in each eye. Yes, she finds this to be extremely distracting at times.

Although I have not heard specifically of this, I would assume that diabetes could do the same thing. Both diabetes and glaucoma destroy vision by reducing blood supply in the retina, even though the specific mechanisms are different.

The point of all this? Do not assume that your users have normal color perception. Many will not; many more than you assume. (In particular, I am one of those people. I might like to see and comprehend your web pages.) These are issues that cut across all segments of society. No matter whether you target a small group or the world, there will be people who cannot see everything you might choose to put on the screen. Color deficiency can occur in any population, trade group, economic class, or ethnic group. It even occurs among those of us who work with computer graphics--although you wouldn't want me doing fine color-correction work.

So what colors are safe to use? As a start, you need to distinguish between features that a user must be able to see in order to use your design, and those that would be nice to see. If you're using an imagemap and it has to use colors that may be problems, provide a text alternative!

I know this issue has been beaten to death in the context of people who choose not to load graphics or who use text browsers, but this is different! Even if you are designing for an internal web, with high-speed lines and a standard browser for everyone, this is still a reason to provide text alternatives for image links, and especially for image maps. And you can bet that any organization which can dedicate these resources will be large enough to include several people with color perception difficulties. They may want or need a text alternative, even with graphics loading turned on.

Awareness is the key to avoiding mistakes. Another key is to understand how color deficiency works with generated light (it's going to be different for computer monitors than it is for reflected light in real life), and to use this to avoid combinations that will be difficult for any individuals. Here's an overview of differences, based on my personal experience:

Generated light
Part of the visual spectrum is missing. Light in the range of insensitivity will not be seen.
Filtered light
If the filtering occurs in a part of the spectrum to which the eye is not sensitive, the light will appear slightly muddy and grayish. This might happen with a slide projector, or with light seen through colored glass or gem stones.
Reflected light
If the light reflected from an object falls in a range to which the viewer is insensitive, the object will appear black.

Note for all cases: Depending on the degree of overlap between the sensitivity ranges of green and red cones, some "non-yellow" colors may appear yellow.

So what is safe? Black on white is the safest. White on black is reasonably safe, but other colors on black are risky. Any text on any mixed-color background is risky. Blue is safer than other colors, but blue on black is bad for other reasons. (Visual acuity is worse for blue in everyone's eyes; this is based on the relative density of blue cones being lower in the optical center of the eye.) Dichromats will not be able to see either red or green on black, depending on the nature of their color deficiency. Mixing yellow and black is fairly safe; dichromats will even see it as yellow on black!

(Red letters)
Red letters
(normal color vision)
 

(Black letters)
Red letters
(red-insensitive
dichromat)
 

(Yellow letters)
Red letters
(green-insensitive
dichromat)
 

Saturated colors may seem to be reasonably safe. After all, if a red dichromat is looking at red-on-white, he will most likely see it as black-on-white. The problem actually occurs for the green dichromats, since red will be seen as both red and green, resulting in yellow on white. If you must use red or green text, make it large and bold enough to be legible in yellow.

Black on color is a special case, without the same straightforward rules. Black on red and black on green are not safe; some people will see them as black on black. However, black on yellow is OK, even though yellow is generated from red and green. The reason is that insensitivity to both red and green is rare, and in dichromats both sets of cones will see and report either red or green as bothred and green. Combining blue and black is safe enough as long as it's not used for fine detail (e.g., paragraph text). Purple and turquoise with black will degenerate to blue with black when seen by dichromats.

Color on color may seem (relatively) safe if you understand color deficiency, but there is one more catch. Did you ever look at something which had strong blue and red next to each other, and the border between the colors seemed to keep "popping?" The wavelengths for red and blue are different enough that the focal length is different for any given lens. Because of that, the eye has to refocus to go from one color to the other, even though the distance hasn't changed.

What's left, now that virtually every interesting combination has been eliminated? It depends. If an image is essential to the purpose of the page, either use "safe" colors, or provide redundant information that is color safe. One way, with image maps, is to provide text links. Another way, if designing a logo, might be to make the image legible and recognizable by all viewers. If the image is essentially decorative or carries non-essential information, you might provide a redundancy somewhere, and otherwise not worry about it. If the image is familiar from other contexts, then even partial recognition may be sufficient for recognizing the whole. If the purpose of a page is to display a graphic (such as an image of a painting), then there really isn't much to be done.

TriCHI logo in red and green
A color-safe logo
 


as seen by green-insensitive dichromat


as seen by red-insensitive dichromat

None of this really addresses the issue of anomalous trichromats. Our insensitivities are much more subtle, but just as real. The safe approach is to keep colors bright and bold; it is usually the low saturation levels (very pale, or very dark) that tend to cause problems. If the color level in the (much narrower) range of our insensitivities or overlaps is low in relation to other colors, we may miss details.

I agree that it makes sense for an individual with serious color deficiencies to set their browser color options and force an override. That works for text, but not for graphics, and stylesheets may eventually make overrides problematic even for text. At that point, it's up to the designer to avoid locking out users with color deficiencies.

---------------

Notes

The flower photographs were modified for color deficiency in Photoshop, first by blacking out the green channel, then by copying the content of the red channel into the green channel. This is a crude approximation, but probably not too far from the truth. Note that the organic green colors are complex, and carry a fair amount of red (as the reds include green). Note that while some greens appear as yellow, some also tend to gray or black. The latter have little or no red content.

If the concepts of gray (night) vision seem to be swept aside in this discussion, it is because the rod cells' primary sensitivity range is most effective in very low light levels. The photosensitive pigments in these cells will be saturated in brighter light, leaving the rods virtually non-functioning.

The idea of a "color-safe" logo designed in red and green may strike some as contradictory. There are two points to consider. First, the use of both red and green means that all dichromats will see part of the logo in black, and part in something else (probably mostly yellows and browns). Second, logos function by recognition, so consistency in using these colors, or in changing only to a black-and-white version, will keep the logo usable. It's recognition that counts in many cases, rather than a shared perception that can never happen.