Transcript of a short conversations with Samu M.

Samu wrote -

We should definitely be concerned about changing link colours, (and of course, text and background colours) of our web pages.

Having an anomalous trichromatic colour vision myself and having used WWW extensively since '93 I know that most of you don't think about color blinds for a second :)

And I can't really blame you... Designing for people with deficit color vision like myself is complicated. It's not a matter of green/blue or yellow/blue combinations, which happen to be dichromatic color vision deficiencies. There's also total color blindness called aptly monochromatism (very rare). The third group of "color blinds" have anomalous trichromatism and have one or more of their primary color (R G B) sensing cones on their retina deficient at certain wavelength(s). This results in a much more complicated color confusion than with duochromatism. And as anomalous trichromats are probably the biggest group of color blinds, this makes designers life tricky.

I for example may confuse green with brown, blue with purple, yellow with green, ad nauseaum. The key here is understanding color space and what enables us to distinguish colors apart.

You can understand color by it's three different components: hue, saturation and lightness. Think of the standard Mac color picker that has a circle in it and a slider at the bottom that washes or darkens out the colors in the circle. In that circle:

Hue (color) is the color at the edge of the circle. By dragging your cursor around the edge of the circle you notice how only the hue changes and ligtness and saturation keep the same.

Saturation (colorfulness) is the purity of the specified color. This is shown as how near the edge your color is. The closer to the edge of the circle, the more chroma you have. Closer to the center you move, the less chroma you have.

Lightness (brightness) is the intensity of the light that a surface or emitter reflects. The less lightness you have, the blacker/darker the image/color will look and vice versa. On the Mac color wheel this is shown as the slider under the wheel that makes the colors appear from black to full intensity and again to white.

Ok, so how does all this relate to anomalous trichromatism? Well, as you can't really predict what the kind of color deficiency each person has, you must count on other factors than the hue to make your colors distinguishable from each other.

How can you do this? Well, by specifying differing lightness values at big enough intervals (absolute 20% jumps, when 0% is min and 100% is max) and using as pure colors as your design makes possible (maximum saturation that you can use to make the color still be readable).

The problem with very intense colors with 100% saturation are psychological effects, like ghost images, after images, irritability, etc. So, having a bright red on a bright blue background might not be a good idea for text that you actually want people to read. Try walking the middle ground here. Make the other color quite saturated (preferably not the text) and the other less so. And the less of saturation difference you have between two colors that must be distinguished from each other the more lightness difference you must have between them.

And finally, to give a quick test to your design: Turn your monitor to 256 shades of grey and take a look at your design:

• Can you distinguish the different colors now yourself on the basis of their lightness values? Better yet, can somebody else who has not designed your screen make the difference?
• Is the text pleasant to read or does it tire you?
• Are you using too many different colors (ligthness values) that just confuse the reader without adding information to your design?
• Check for blue/yellow and red/green combinations. If you use these color pairs to distinguish information, you're in trouble with dichromatism.

If you have trouble with some of the above tests, you probably should tweak your design. Increase lightness contrasts between colors, reduce the number of colors if possible, use less/more saturated colors and use your own judgement. Once you start to think about these issues, you'll notice that you'll become more aware of them and can perceive things you didn't notice before...

Marty Replied -

I would like to add something to the message below. I am also color blind, but my particular symptoms are reflected in shade blindness. That is I can see primary colors, but have a difficult to impossible time seeing or distinguishing between shades of a color, or between shades of different colors. To illustrate:

I have a great deal of difficulty distinguishing between the different temperature band colors on the temperature maps of the TV news shows.

I cannot distinguish between the various color bands on standard elevation (altitude) maps.

I can't see Red on Black, Blue on Black, Red on Green, or colors of the same intensity on anything. I cannot see the numbers/letters on the standard color blindness test flipchart.

It further manifests itself in that I am not bothered by color combinations which seem to drive other people wild. (light green, chartruse(?) and yellow all look the same to me, as do blue/purple, magenta, etc.) I have had people turn in revulsion at the colors I used on my windows color scheme.

I have browsed hundreds, maybe even a thousand pages, and many are constructed with colors which I cannot see at all.

And when I hit a link which changes colors sometimes they "disappear" from my sight. I know that creativity is to be encouraged, but I for one would appreciate seeing a page/guide of "acceptable" or "recommended" color combinations, If only for those of us who would like to put color on our pages but who are afraid to publish without someone reviewing our color choices before hand. Last updated March 5, 2001