| This 35 message thread spans 2 pages: < < 35 ( 1  ) || |
|Colors, color-blindness and the web|
experiences, pet peeves, resources
| 8:56 pm on May 23, 2002 (gmt 0)|
This picks up on the discussion started in
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.
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.
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.
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
(I don't know how long it will be there).
2c. The most *accurate* simulation that I find is at
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.
| 7:54 pm on Jun 8, 2002 (gmt 0)|
No matter where you go.... there's Google! :)
This thread is not only providing great information and valuable resources, it is having a positive effect on those who read it: we are all becoming just a bit more aware of coding for accessibility. And that's a very GOOD thing!
| 7:56 pm on Jun 8, 2002 (gmt 0)|
LOL Key_Master! Yep 'Google On My Mind' - my new theme song...
| 8:33 pm on Jun 9, 2002 (gmt 0)|
An excellent thread. It moved me to register and submit a post. I also suffer from red / green deficiencies...I went through a period of time where I was convinced there was a conspiracy going on with the test where the number is "hidden" in the coloured circle...I could never see any number! Luckily my partner is always on hand to review my colour choices and point out those little inconsistencies "Thats Pink not Blue", etc, etc :)
Colour is an integral part of good site design. Some non-professional designers would be well advised to pick up a "colour wheel" that interior designers use. Just so they can see which colours go well with others. Yes, it is a matter of taste...but some things just do not go.
| 10:27 pm on Jun 9, 2002 (gmt 0)|
Welcome to Webmaster World! We're happy to have you join us...
Ergophobe's thread on Color, Color Blindness and the Web has certainly been a learning experience for many of us and has provided valuable insight and resources for us all.
I'm confident that this, and future threads relating to accessibility issues will aid in a fuller understanding and appreciation of the W3C's Web Accessibility Initiative (WAI) [w3.org...]
While many of us may already coding methods that provide logical text structure for sceen readers and Braille browsers, we also need to consider designs favorable to color-impaired surfers who, undoubtably, are often overlooked in web color schemes. When the colors used muddle included graphic imagery, it is unfortunate, when they obscure navigation and other essential user-interface elements, it becomes tragic.
A line from an old Christmas carol asks: "Do you see what I see?" The answer in light of this thread is: maybe not. Food for thought....
|brotherhood of LAN|
| 10:37 pm on Jun 9, 2002 (gmt 0)|
I also thought this whole thread emphasises the factors beyond PC technology that affect the end product (web sites, purchases etc), and places more emphasis on human factors as opposed to the net.
It's another issue to add to the webmaster plate that's for sure :)
| This 35 message thread spans 2 pages: < < 35 ( 1  ) |