Page is a not externally linkable
- WebmasterWorld
-- Accessibility and Usability
---- Colors, color-blindness and the web


ergophobe - 8:56 pm on May 23, 2002 (gmt 0)


This picks up on the discussion started in

[webmasterworld.com...]

This long post consists of
I. A few generalities
II. my experiences and pet peeves
III. some resources for those who want to make pages that are accessible to people like me.

I. Generalities


ergophobe brings up a VERY important point, beyond basic colors: viewability for the color impaired. Tom, I'd like to hear more of your experiences. I feel a new thread coming on...

Okay, a new thread it is with some notes on my experience as a color-impaired person (since my response was quite distant from what tesla wanted to know about in the first place).

First, let me reiterate what I said before


I say don't *depend* on color; I don't say not to *use* color. My graphic designer friend says that the thing to do is use colors, but make sure the grey levels are different. The quick way to check? Print it out on a black and white printer. If rendering it in black and white like this causes you to lose meaning, then you are certainly losing visitors on the web too.

I would add that another method you could use is to take a screenshot of your page, then open it in Photoshop and set the color saturation to zero. This won't be perfect, since the greyscale won't render exactly the same everywhere (depending on contrast etc), but it will give you a pretty good idea.

II. My experiences and pet peeves.

There are a surprising number of pages that are essentially useless to me because of color choices. This is not limited to web sites, but is also a problem with print media.

1. Some comments about colorblindness.
a. No I do not see in black and white. To describe it simply (and rather inaccurately as you'll see), the eye has three types of receptors, each of which has a bell-curve sensitivity peaking in the red, green and blue regions. In the case of a class blue, I probably see basically what you do. In the green range, however, my receptors seem to be very deficient and here the blue and red are insensitive. Thus a green traffic light looks much like a white light to me and I depend primarily on position (As a note, the streets would be much safer for me if GO was green/round and STOP was red/square and CAUTION was yellow/triangular).

b. some colors really stand out but others do not. My wife always laughs because I find purple, blue, orange and yellow flowers to be amazing, but I don't even see red flowers at a distance - they just fade into the green.

c. I key into shade; most people with normal color key into hue. I notice for example that when someone creates a graphic that uses the same hue, but different grey-levels, I easily read the graphics and I read it much easier than people with normal color vision because I am so used to distinguishing shade.

2. Common problems

a. Pie charts etc.
Basically, anywhere that you see a pie chart, a bar chart or any such graphic that uses color to differentiate the cases, you can be sure that it is very difficult for me to understand. A typical example would be almost any weather map that uses color - it was a lot easier for me when newspapers were straight B+W. It's real hard for me to read the maps at Accuweather.com and Weather.com for certain color combinations.

b. low-contrast fonts/backgrounds.
I know that these can be a problem for lots of people, but for me, if there is a color difference but no greyscale difference, it becomes a monochromatic screen with no text. I sometimes ask my wife to check for me and often she can read the text where I see nothing but a blank, albeit colored, screen. I can't find an example, but a surprising number of pages are completely inaccessible to me. I would describe the typical page that fits this as a page that tries to be "cool" or "hip". To me they are just web buildings without wheelchair ramps.

III Resources.

1. buckworks already posted the following

There's some good reading and links about colour-deficient vision at Visibone [visibone.com...]

2a. The absolute best tool I can find is the following that lets you select a text/background color and see how people with different color impairments will see it. The interface is a bit strange. You select "change text" then clikc on a color, then "change background color" then select a bg color, then you can click the radio buttons and see how it looks for people with all the major conditions.

[iamcal.com ]

2b. A fantastic tool that creates an image of YOUR page as it looks to a colorbling person.

Try Vischeck on a Webpage [vischeck.com]
Note that WW passes with flying.. er colors. See what it looks like to a deuteranope at
[vischeck.homeip.net ]
(I don't know how long it will be there).

2c. The most *accurate* simulation that I find is at
[vischeck.com ]

In fact:

Note that the digit (3) is practically invisible.

In fact, for me it is completely invisible in both pictures. I have no idea what digit they are taling about.

3. A good brief description of what colorblindness is
Color Blindness Theory, Simulation [research.microsoft.com]

4.A good quick look to get an idea of how things look to a colorblind person

The User Perspective: Color-blindness Simulation [webaim.org]

I should point out that this shows it a little more severely than it is for me.

5. This is a *great* page on vision impairments, including color-blindness
The User Perspective: Vision Impairments [webaim.org]

6. An article at about.com on
Designing for the Color Blind [webdesign.about.com]

There's more, including a really good simulation at Lawrence Livermore, but I can't find that one anymore. This should get a thread started! If not, I have a large collection of accessibility/usablilty links.

Tom


Thread source:: http://www.webmasterworld.com/accessibility_usability/18.htm
Brought to you by WebmasterWorld: http://www.webmasterworld.com