Colour Blindness and Link Colours

The following was posted to the Advanced HTML mailing list on June 13th, 1996. I thought it should be up on the web somewhere, so after receiving permission from the author I put this up. The important part, as far as accessible web design, is near the end.
Marvin Crippen
Date:    Thu, 13 Jun 1996 11:57:09 -0700
From:    Samu Mielonen <samu@uta.fi>
Subject: COMMENT: Colour Blind People and Link Colours

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

[discussion of anomalous trichromatic colour vision removed]

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 lightness 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 (lightness 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 judgment. 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...

I hope that clears some of the issues on color deficit vision.
If you feel like you want to know more about color spaces (like
HSL) I suggest you take a look at the Color Space FAQ that also
talks about these things more in-depth:
http://www.well.com/user/rld/vidpage/color_faq.html

Best regards,
Samu Mielonen


--
© 1996 Samu Mielonen. All rights
"All I wanna be is smarter than my enemy
 All I wanna have is everything I haven't got
 All I wanna take is everything ever made." IF, 'Saturdays Angels'
DO-IT Resources
DO-IT search
DO-IT home page