Slashdot Mirror
Developing for Color Blindness?
Satan's Librarian asks: "I develop software in the music industry. Most of the software is very graphical, with lots of knobs, buttons, and various other custom controls. Recently I realized one of my interfaces would be difficult for someone who was colorblind - fortunately before it shipped. How do other developers avoid this? Is there software available on XFree86, Mac OS X, or Windows that can let you run in a modified-color mode to emulate the various kinds of colorblindness? I've found one site with some cool demos of how colors are perceived with the various types of color blindness, and a lot of self-help sites and software to help people who are colorblind, but no software to help developers and graphics artists avoid causing people difficulties in the first place yet - although from the demos and articles, I expect the algorithms would be trivial. Seems to me that if the statistics I keep seeing for colorblindness are correct (~8% of males, ~2% of females), this could be an often ignored problem that excludes a lot of people from some software. If you're colorblind, how do you deal with websites and software that was poorly designed for you? Is it a problem often?"
Visibone has a good page dedicated to the more common forms of colorblindness, including a link to an excellent article that has downloadable color palettes (for Photoshop and Paintshop Pro, but I would assume that the Gimp would also be able to make use of those palletes) that you can apply to screenshots / mockups / etc. to simulate colorblindness. Not quite as seamless as having a "colorblindness" video mode, but still useful for determining a color palette to use.
Corporate Jenga: You take a blockhead from the bottom and you put him on top...
I am visually imapired, and the biggest complaint I have about software, especially for Windows, is products that have their own hardcoded colors or widget sets. ...
I set my Windows to be white on black, and you would be surprised at how many programs have hardcoded black text, and as a result show up as black on black. I have notified many vendors about problems like this. Even Mozilla has suffered from this.
If there is any advice I can give you, it is that you *must* allow color customizatino of all things, either by using the OS/toolkit's theming, or by giving your own interface.
This includes text areas, menus, radio buttons (I've seen black on black ones), check boxes,
Beware, Nugget is watching... See?
Visibone carries free color blind palettes for photoshop, etc...
Also, required reading for anyone wanting to see just how color blind people see.
"...we dont care about the economics; we just want to be able to hack great stuff."
Try web design circles. These issues come up from time to time. For instance, Dive Into Accessibility has a lot of good stuff not limited to web design.
Recent versions of the GIMP have a color-blind display filter. This allows you to see what things would look like to a colorblind person. Because it is a display filter, you can turn it on and off as you work on a UI element.
--Ben
First, thank you for taking the time to make your program more accessible. Color-blindness is one of the most common accessibility issues, but it's very easy to overlook. Here's some suggestions:
* Don't rely on color alone. If you can provide indications other than color, and use color only as a supplement, it will make your program more accessible not only to color-blind people, but also to people with other visual impairments as well.
* Don't hard-code your colors. It requires very little programmer effort to store color values in a config file somewhere. This way, even if you screw up, users can still make the software usable for themselves.
* Actually check your colors. I don't know of any software to make your desktop run in a "color-blind mode" (though I'd love to see such software). But there are tools you can use to check screenshots and such. Vischeck is a great site that has software to simulate different types of color-blindness on images and web pages. You don't have to download anything. You can just upload an image to Vischeck, and it will transform it and give it back to you.
Being "colorblind," I'm amazed at how misunderstood it is!
:) ) the green and yellow interface buttons (for minimize and maximize) look like SIMILIAR colors, but I can distinguish between them.
The site you give only shows some of the most severe cases... most people who have color perception problems (as they typically are not blind to color) see almost all colors properly. The examples given are a complete *absense* of the indicated cones, not the typical "color shift" problem, where the red or green (and sometimes blue) cones have the wrong pigment in them and respond to slightly different colors.
This is the type of blindness I have... my red cones are just a slightly "wrong" color red.
Because of this, I have trouble decriminating between very light greens and yellow. Orange and green, if close enough on the color wheel, can also be confusing. UPS trucks look forest green to me in certain types of light (especially sunset) and bright brown in others.
HOWEVER, I can identify almost all colors in a controlled environment.
To give a good example most people could relate with... in MacOS X (my OS of choice
Say someone flashed me a card that was that color yellow and asked me whether it was yellow or green. I'd probably be right about 75% of the time, whereas someone with normal color vision would get it right every time.
I have somewhat average color blindness, meaning that most people have about as much trouble as I do.
However, a smaller percentage, about 3%, have very severe problems where they almost literally cannot see color at all. Greens appear black, reds are grey or pink, and blue and violet are just purply.
All opinions presented here aren't mine.
I'm moderately colorblind (y'all have WAY too many names for 'blue' - "purple", "mauve", "navy blue", etc.) I have even been known to take black and white photographs of fall foliage because I really can't see the subtle colors in the fall (yellow looks like green to me, red looks like brown).
I'm not sure that I have a good answer for the writer, but I have some suggestions:
1) Use icons to convey meaning, not just colors. So put up a triangle with an exclamation point instead of just writing text in red.
2) It really doesn't matter that we can see the colors, just that we can differentiate them! Most of us cheat by seeing contrast rather than hue - that is, if I see a dark purple and a light blue, I can see the difference between them easily. It's just when they have the same intensity that I get stuck.
3) we're pretty good at distinguishing a couple of colors - not so good with lots of them. So pick only a few colors - and change the intensity so they don't overlap.
4) Consider building a "simplified" UI (ie, a graphically minimal UI). In my experience, I can operate fine through a minimal UI - usually because the colors are reduced. And I never mind losing out on the "pretty" interface because I can't see the colors anyway.
5) Sometimes the ZOOM interface works wonders. If I can enlarge a picture 10x, I can usually see the subtle differences in the interface. It's just when they are really small and close together that I can't tell the difference.
I hope this helps.
-Peter Hamlen
Apple at least used to publish a set of UI Guidelines which talked about this issue. I last saw them 10+ years ago but they said never make color be the only thing that seperates two objects. (They also point out that not everyone has a color monitor, which was much more true in the late 80's).
If you can find a copy of the Apple UI guidelines they are very good reading. If not try looking at your UI in black and white, or at least in fewer colors than you normally do. Not everyone has a big fancy monitor and video card you know.
Erlang Developer and podcaster
In Mac OS X 10.2, you can open System Preferences -> Universal Access. There's a button there called "Set display to grayscale", which will do as it says. This is great to check things like this (also useful for web design).