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

Color Blindness

From: Harvey Bingham <hbingham@ACM.org>
Date: Thu, 20 Aug 1998 02:18:57 -0400
Message-Id: <4.0.1.19980819070202.00fcbc90@pop.tiac.net>
To: "Greg Lowney" <greglo@microsoft.com>
Cc: w3c-wai-gl@w3.org
Thanks to Greg Lowney for important info on color blindness in 
"But Can They Read It." 
http://msdn.microsoft.com/developer/news/devnews/julaug98/access7.htm

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

    http://www.lighthouse.org/1lh32a.html

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 only 
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
    http://www.cimmerii.demon.co.uk/colourblind/

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

http://www.cimmerii.demon.co.uk/colourblind/design.html

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 Thursday, 20 August 1998 02:28:41 GMT

This archive was generated by hypermail 2.2.0+W3C-0.50 : Monday, 7 December 2009 10:46:58 GMT