| This 35 message thread spans 2 pages: 35 (  2 ) > > || |
|Colors, color-blindness and the web|
experiences, pet peeves, resources
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.
ergophobe, THANK YOU!
This is a hallmark thread!
I've already bookmarked the links for study. I admit, I am one of those people who sometimes takes "vision capabilities" for granted. No longer, thanks to this excellent post.
Thanks for the kind comment. I wish I had thought of this earlier.... sneak onto designer forums, get designers thinking about color issues, end up being able to actually use more websites myself.
I'm going to make a comment that may "raise a few hackles," though it is meant as a reality check, not as criticism: I believe there are far more Web Developers concerned with NN4 compatibility than with the WAI or accessibility in general. From just about any perspective I can think of, there is something drastically wrong with that.
The reasons are many, and really don't need to be debated here; that belongs in the past. What belongs in the present and in the future is greater awareness of these issues from all of us.
I have a good feeling this thread may inspire more than a few ideas on how to address this very important issue.
>>>This is a hallmark thread!
I agree. It's given me cause to revaluate the color schemes on my Web sites.
Thanks for an excellant post! As a colorblind person life can be inetesting enough, without having to wonder if one is seeing all there is to see on a web page.
I once was unable to find my green Chevy crew cab pickup because someone parked it on the lawn.
Although I am not colorblind, I find the visual assault of color and chaos overblown on many websites. (warning:an Opera plug coming). Most days I run in User Mode with Opera just to slice through the colors myself. This thread in user mode and in normal:
Great post. Thanks Ergophobe.
Thanks for all the kind comments. I'm overwhelmed.
far more Web Developers concerned with NN4 compatibility than with the WAI or accessibility in general. From just about any perspective I can think of, there is something drastically wrong with that.
I couldn't agree more. As I said in another thread, one reason this is true is simply that a page that can't be viewed in NS4 can be solved with a free download. A page that can't be viewed by colorblind is inaccesible to them forever.
I once was unable to find my green Chevy crew cab pickup because someone parked it on the lawn.
Yeah, people just don't get it unless they live it! My particular bane is that I'm a rock climber and I practice at an indoor gym where the routes are defined by little pieces of colored tape that mark which holds are on route. I'm always hanging up there while my wife yells up "That's not on. No. Up and left. Next one. That's on." Web designers aren't the only culprits!
THANKS FOR THE GREAT POST!!
Main question here: What is the % of people which have colorblindless?????
I think, that might be important of how many people we were losing!!
The percentage varies according to what kind of colorblindness. People who are achromatic are very rare. I've often seen that 2% of males are color blind (meaning dichromatic vision), but most sources say that 8% have impaired color vision. I do not have severe color blindness, but many web pages are hard for me, so I would say 8% is a good number.
ergophobe - Great post. Thank you. To add a thought, I feel that designing for color blind viewers will improve design in general.
I also work as a filmmaker, and my early background included black and white photography. When color became de rigueur in cinematography, I continued to use light as if I were shooting in black and white. This approach provides increased separation in grey values, which works better in color too. It makes sense for graphic design also. The Wired Magazine approach to design, of dark purple (or red) type on black backgrounds, doesn't really work for anybody.
(edited by: Robert_Charlton at 4:37 am (utc) on May 24, 2002)
article [webexhibits.org] - pretty sobering statistics.
|Approximately 5% to 8% of the men and 0.5% of the women of the world are born colorblind. That's as high as one out of twelve men and one out of two hundred women. People who are protans (red weak) and deutans (green weak) comprise 99% of this group. |
The answers for us as Web developers begins with understanding the needs and limitations and then finding solutions. Here is an instance where CSS knowledge and implementation will be particularly useful in addressing the issue.
I see it as a win/win situation all the way around. Developers can offer a more user-friendly product, and an additional 5-8% of the surfing public will have reason to be appreciative.
...time to start beta testing some color schemes!
This is a side note, but fascinating. Some people have FOUR color receptors instead of three - but this situation very rare. article [redherring.com]
We don't need to consider these folks in our designs - they do better than almost everyone of us!
fascinating, thanks tedster!
I am colorblind but it was just recently that I discovered that this actually was an issue when doing web design. We are about to launch a new website where my brother is doing the main design. For many of the sections he had made a color code explaining the status for some material presented on the site. Well, to me they all had the same status…so it was a good thing I was colorblind LOL …otherwise we would probably not have changed it and 10% of our visitors would then have been totally confused about our status system. Taking into account that our goal for the first year online is 10 000 daily visitors, it came clear to me how important this issue is. 10 % out of 10 000, that would have resulted in mass-confusion of 1000 visitors daily, which also could mean losing them for good to be a bit dramatic!
Excellent post ergophobe! When I'm building a website I try my dammned hardest to make it accessable to as many people as possible.
I think the aim of any site is to encapture the widest possible audience that it can so your post has opened my eyes certainly.
Thanks for the post ergophobe.
I believe that most people who read this thread will strive to make their designs color blind friendly. However, educating all the web designers about these issues would be quite a major undertaking.
I would have thought that there would have been a browser developed that could automatically modify the way a web page is displayed to best suit a particular type of colorblindness. A basic version of this might be a reassignment of the colors grey levels before displaying in grey scale. For example a person could browse in color but on a page where the colors started merging together, the person could click over the modified grey scale. I would be surprised if a more sophisticated (color) version of this didn’t already exist . . . 2% to 8% of all web surfers is quite a big incentive for any software company.
On a fun side note: I have heard that Google is able to detect things like white text on white background and it has been known to penalize websites search engine rankings for such practices. Perhaps we can convince Google to find a way to detect non colorblind friendly websites and punish the respective websites search engine rankings. That would surely get every web designer to snap to attention.
RE the number of color-impaired I said
Papabaer said 5% to 8% based on his reading. Though I said this in my post, I should reiterate that this is 8% of males, not 8% of visitors.
Some people have FOUR color receptors instead of three
Also, some people are synaesthetic (rare - between 1/2000 and 1/250,000) where they see text (about 70% of synasthetics) in color. My wife (a neuroscientist by the way) has a co-worker who is a synaesthetic and she reports that it becomes difficult for her to read if text is colored. For her every letter/word has a color and this is information she uses to read. When a word appears in the "wrong" color, it overrides her color perception and makes it hard to recognize, perhaps like a blue stop sign would be for us.
There was a recent study done on this where they created a random field of numbers in black and white and asked people to find all the 5s. Synaesthetics could do this something like 10 times faster than "normal" people because they searched by color, whereas people with normal vision needed to first identify the fives, then count them. This demonstrated that synaesthetic color perception takes place very early in neural pathway (i.e. *before* synaesthetics interpret the grapheme as a 5, they already see it in color).
Pages on synaesthesia:
My main job is as a sixteenth-century historian and I have to say there's a lot to be said for black on white, ink on paper. I walk into the archives, pull out a manuscript from 1539, and read it with no worries about hardware/software compatibilities.
I would have thought that there would have been a browser developed that could automatically modify
There isn't even a word processor on the market that does footnotes well (if you really want it right, you need Quark or In Design), so I wouldn't hold my breath waiting for software aimed at a minority of people with relatively mild impairment.
The amazing thing to me is that nobody has done anything about traffic lights (as I mentioned before, you could add shape to color). This would actually save lives. I often need to stop at flashing yellow lights and get honked at by the people behind me, but I can't tell easily whether it's red or yellow. I'm just waiting for the day when some impatient person behind me doesn't realize I'm stopping and slams into me.
Also, some people are synaesthetic ... where they see text ... in color.
Wow. That's such an odd concept, I find it hard to quite totally comprehend it. I'd heard on some PBS special once that some head injury patients lose the ability to distinguish shapes. Square or Circle? Who knows? That's another mind-bender for me...
I personally have never cared for designs with a lot of color-on-color in the layout... The "Wired" aesthetic grates on my nerves. I just don't think it looks good 99% of the time to have colors overlapping or next to each other with the same color intensity/saturation, so I tend to mix pastels with more saturated colors... or if I put colored buttons on a colored background, I use text on the buttons that is much lighter or much darker than the button color.
Good tonal (grey-level) contrast makes a design easier for *everyone* to see & use... it just looks nicer, as well as being more usable to those with color impairment. (I must admit, I've never designed anything while thinking, "But would a colorblind person see this properly?" I just like white space and good contrast...)
I must say though, on a lighthearted note: I find Christmas season store decorations SO overwhelming and obnoxious, it would be something of a relief if all the red and green everywhere blended together. ;)
I'm one of the 8%, having what used to be called "red-green" colorblindness. When I design color motifs, I always used the "hex codes" to do it, as the hue/saturation and color-picker charts leave me totally confused. But thankfully, if you know how mixed colors are made up of the three RGB components, it helps a lot.
After doing the basic layout, I call in any normal-color "consultant" I can find handy, and ask them to help me tweak anything that looks "funny" to them. By making this a collaborative project between me and a normal-color-vision person, I work around my own deficit, and at the same time, assure that the site looks good to both groups.
Thanks for the links, too. I intend to go through all of those thoroughly this weekend. Too bad there isn't one that compensates for color-blindness by accentuating the colors so that moderately color-blind people could see what a page looks like to people with normal color vision! ;)
For those of us who drew Santa Claus in a chartreuse suit as kids there is a pretty useful Shareware Eye Dropper that names colors at this URL, along with other good resources
(edited by: Xoc at 12:46 am (utc) on May 25, 2002)
Somebody asked how widespread this is and wanted stats. Perhaps the most interesting stat is that among the posters on this thread, I count five so far who are colorblind. We're out there all over.
I dropped in on this forum following an invitation from Papabaer, and I'm soooo glad I did!
I'm one of the many color-blindees (is that a word?!) who is lumbered with the unfortunate combination of color-impaired vision and a passion for web-design.
It's very interesting to see the 2 sides of the coin - the aspects that those web-designers with normal color vision need to consider for the color-impaired, and vice-versa.
Some of the links on this thread are invaluable - thanks to everyone involved and to Papabaer for pointing me to this forum :)
Solfer (who always used to paint the sea purple!)
Welcome to WebmasterWorld! Glad you picked up on the invite... we have a pretty amazing group of members here. It looks like we just gained another! ;)
I am very glad to see you find this thread and the info contained useful. Without a doubt this is a very important topic to us all. And hey, purple seas are kind of nice! Glad to have you join us! ~ papabaer
I am a graphic designer, and yep I am colour blind, (although i am only partially so)
It is a pain sometimes but it doesn't make design impossible, any design should look good in b+w anyway, colour should be used to 'enhance' and often the simplest uses of colour are the most effective.
Webdesign isn't my forte, being primarily a print designer but i use named colour swatch books to get cmyk values that i cannot mix myself or just learn the basic mixtures and alter the hue. There is also the 'advantage' that any design i do will be fully visible by both colour normal + deficient people.
The way i see it is that if you have a passion for something nothing should stop you, there is always a way.
Welcome to Webmaster World! Do you have any special color preferences when you design? Color combinations that work well for you? I'm interested!
|brotherhood of LAN|
Wow, what a great thread! Just spent 20 minutes reading it all, will have to jump online, post this and read all the references ;)
Its' interesting to note that more men are colour blind, this is because it is a sex linked characteristic on the X chromosome (responsible for hairy ears too ) ;)
Also, it is possible that this genetic trait is geographically specific (i.e. maybe more dominant in the west), like some other traits.
I now have to re-assess my whole site because of this - I choose not to be ignorant to colour blindness :) It opens a whole can of worms in respect to design practices and choice of colours.
I hope this colour discussion goes on further (its great)...in fact it's a good article for me to write new content about! :)
/replaced it with it's :P
[edited by: brotherhood_of_LAN at 6:11 pm (utc) on June 8, 2002]
Yes, wonderful thread!
I've started testing all my sites (thankfully they all look the same from the color-blind test web - so far).
Was wondering if some company couldn't make inexpensive "sunglasses" that would let we normal vision folks experience a more of less real simulation of color-blindness, using plastic filters. They could be sold to science museums, schools, eye doctors, medical associations, etc. Sort of like the inexpensive Red/Blue 3-D glasses.
When I was an art student studying B&W fine art photography, I came up with the idea of wearing very deep red welder's googles for a few days (and used only red lights at night) to try to experience a totally monochrome world. Two interesting results (not counting my driving) were that my color sense gradually got more acute, so that I started seeing (limited) colors again, despite the googles and that the experience of color when I first removed the googles was amazing.
Also did a project (off topic here) to see if graduate photo students could descriminate levels of gray values better than folks I dragged in off the street - they certainly could.
Oh, another interesting color vision experiment most anyone can do is to "de-focus" your eyes (so you see 2 somewhat overlapping images) and compare the colors seen on a white sheet of paper. If you've never done this, you'll probably be suprised how different your 2 eyes are from each other!
Strictly from my own personal experiment, there is a definite warmer/colder color difference. I assume this is typical :)
It's so easy to slip into the assumption that what we experience is actually some kind of absolute reality, but of course all our senses act as heavy filters (because of their mechcanisms and natural limitations) of what is really out there.
>>>...despite the googles and that the experience of color when I first removed the googles was amazing.
hehe, you must have Google on your mind. :)
| This 35 message thread spans 2 pages: 35 (  2 ) > > |