W3C home > Mailing lists > Public > w3c-wai-gl@w3.org > July to September 1998

RE: Color Blindness

From: Greg Lowney <greglo@microsoft.com>
Date: Sun, 23 Aug 1998 17:25:29 -0700
Message-ID: <4FD6422BE942D111908D00805F3158DF08CF910F@RED-MSG-52>
To: Harvey Bingham <hbingham@ACM.org>
Cc: w3c-wai-gl@w3.org, ableweb@microsoft.com
Thanks Harvey,

As you probably saw, the primary emphasis of my article was on making colors
configurable by the user so they can adjust the presentation for their
needs. I think we all agree that a well-designed Web page should be usable
when the user overrides the author's colors. For us to be successful, it's
important that our recommendations allow authors and designers to keep
control of and have great freedom to choose the default presentation, as
long as the user can override it without causing problems. 

Images and printed documents are really the only places where the user
should have to deal with fixed colors, and so that's where selecting colors
according to the guidelines below becomes important. Beacuse of space
limitations I could not go into detail on every aspect, so I'm very glad
that more detailed references like the ones below exist. 	

A few other comments:

* Why recommend using MouseOver to give additional information about images,
when TITLE= already does this? (Actually, today neither helps users who rely
on the keyboard...)

* The specific guidelines below on avoiding red/green combinations is one
good example, but we have to be careful not to reinforce the common
misconception that red/green combinations are the only problem area.

-----Original Message-----
From: Harvey Bingham [mailto:hbingham@ACM.org]
Sent: Wednesday, August 19, 1998 11:19 PM
To: Greg Lowney
Cc: w3c-wai-gl@w3.org
Subject: Color Blindness

Thanks to Greg Lowney for important info on color blindness in 
"But Can They Read It." 

That material explains a lot, but doesn't repeat specific
color choice contrasts and reasons as in your primary reference.


That reference gives examples, then explains the three dimensions
available for choosing colors: lightness, hue, and saturation 
in a three-dimensional color space.
[My paraphrase: Lightness is grey scale, white to black top to bottom.
Hue is spectrum of colors of rainbow, joined onto itself around
a circle at red-violet. Saturation is color intensity: grey at center to
pure color radially at the outside.]

The three recommendations there are illustrated:

1. Exaggerate lightness differences between foreground and background
     colors, and avoid using colors of similar lightness adjacent 
     to one another, even if they differ in saturation or hue. 

2. Choose dark colors with hues from the bottom half of the hue 
     circle in Figure 7 against light colors from the top half of 
     the circle (or white). Avoid contrasting light colors from 
     the bottom half against dark colors from the top half (or black). 

3. Avoid contrasting hues from adjacent parts of the hue circle, 
     especially if the colors do not contrast sharply in lightness. 

I found another good reference:

Web Page Design for Colour Blind Readers

Included there are a different list of DO's and DONT's that would
be useful for WAI guidelines, with specific color problems


DO provide ALT="..." text for all your images. If a user cannot 
understand your image they can reload with images off.
Consider using JavaScript MouseOver events to provide status-line 
descriptions of images- especially maps and navigation bars. 

DON'T use [red | green | brown | grey | purple] 
           [next to | on top of | changing to] 
          [red | green | brown | grey | purple]. 

DO have a strong, bright contrast between foreground and background 
colours- not only for your page text but also in your images. 
Even totally colour blind readers can differentiate similar colours 
which contrast bright with dark. 

DON'T use colours in images to denote special areas, such as bar 
charts, maps and navigation bars. Consider using textures or line 
shading instead (try the "paper" or "pattern" function in your 
graph or painting program). Alternatively, provide 
additional written labels. 

DO use blue, yellow, white and black if you really must use 
colours to distinguish items. These combinations are less
likely to be confused than others. 

Regards/Harvey Bingham
Received on Sunday, 23 August 1998 20:25:07 UTC

This archive was generated by hypermail 2.3.1 : Tuesday, 16 January 2018 15:33:27 UTC