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?"
Why not add... textures or patterns or something an option for those with colorblindness. Know anyone who is colorblind (1 in 11 people guys or so)? You could always have them demo it. Maybe someone here on Slashdot.
Just make sure you can tell where the Aqua buttons are, or you'll be stuck in color-blind mode. ;)
Just keep a second monitor on your system with an A/B switch. Adjust the color/tint/etc... settings on the monitor so that everything comes out monochrome.
This would avoid tailoring for one kind of color-blindness as opposed to another.
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?
Or maybe just look for one already working with you. From the statistics, it's fairly likely that even small companies will have at least one colour blind person... Far easier than messing around with wierd software hacks which may or may not actually work.
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.
My color blindness is fairly severe -- red/green, red/black, brown/green, and trouble distinguishing shades. Some people who try to accomodate the color blind only think about red/green -- that doesn't help me.
The cardinal rule for accomodating color blindness is this: don't make color the sole distinguishing aspect. Use text, symbols, whatever -- just make sure that you're using something other than color for identification. Best suggestion -- remove all color from your application and see if you can still use it. If you can, I'll be able to too. (Assuming, of course, that I can distinguish the identification from the color. Black text on a red widget doesn't help me. Think high contrast.)
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
My father has sight problems from diabetes. He has a problem with blues, and clarity. I have him running XP on a 19" monitor at 800x600, and that is sometimes not enough. Usability and layout are more important than using colors to differentiate between controls. I just got him into email and surfing a few years ago and I see how he struggles with colors on the screen, even when viewing a simple local news site. The ones he has good luck are ones with very large contrasts in colors. He visits casino sites to check his points and comps, he lives in Southern NJ only an hours from AC. Those sites give him problems with their dark on dark color schemes. But the ones that are simple and have dark text on light backgrounds work great. This goes for other programs like Outlook and Act!. Outlooks default worked fine, but in ACT! Not so. Is had a dark grey background, small text boxes, and just ugly. So I made the background white and text boxes a medium gray, more or less reversing the colors, and all is well. I have used Pro-Tools and various other audio programs and it can be difficult to navigate, and I am not color blind.
Fear Is the Only God
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.
Here's one thing that I find frustrating: web design pundits love to talk about color palettes, and how using the correct one can supposedly maximize monitor compatibity and sight-impaired accessibility. But that's an obsolete concept, based on video adapter limitations that no longer apply. What I would find useful is sets of color pairs that could be used in combination to maximize contrast, and still design a web site that looks cool in full-color mode.
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
Colorblindess emulation modes that require cross-mixing color channels would require more than a simple gamma ramp modification AFAIK but if you're just interested if some colors are distinguishable, monocrome emulation should do just fine.
_________________________
Spelling and grammar mistakes left as an exercise for the reader.
yuk-yuk-yuk
mod down as unfunny
-73, de n1ywb
www.n1ywb.com
I never thought I'd see an article about this. This is really cool. I'm colorblind myself and this is a huge problem for me.
I do essential everything using positioning. I have an excellent memory for where I put things and where things are located on the desktop and on menus, etc. etc.. I use OSX as my primary desktop and I can't tell any of the stinkin' buttons apart. I especially have trouble with iTunes when in its shrunken format.
Another problem is my love of web design. Although not as much of a problem anymore, back in the day, people would use colors that were very similar to one another in terms of darkness, this is very difficult for me to see. Especially in the day of patterned backgrounds and such...I never really found a work around, except back when my monitor had a 16 color option, which made things much more distinct (e.g. red was red, no worries of weird halfshades and such). However, now it is much more difficult to find a graphics card that supports 4-bit graphics. (Why have millions when you can just have 16...). So if something is really difficult (like some games... for example) I'll have a friend or my sister help me out. I'd just like to put in a plug for the only game that has a colorblind option (at least that I've seen, please tell me others if you've seen them, thanks), which is Frozen-Bubble. I'd just like to tell those developers how much I appreciate it.
I have a friend who is colorblind and so I have put some thought into this. I think the best thing to do is support color schemes (which can be read from a file or something) and have four color schemes in addition to full color:
I think this is really all you can do. A color monitor has only three spectral lines, anyway -- red, green, and blue -- so if a user has trouble distinguishing two of them, connect those two (so no distinction is necessary), and if a user has trouble distinguishing any of them, connect all three.
Sunlit World Scheme. Weird and different.
I'm kinda color-blind - I test color-blind, but I can tell red/green. I can't tell blue-purple-navy-black more than 75% of the time, and yellow/green yellow/orange are hard. I don't have *too* much trouble with software, other than games.
Make an option, like in the Google Toolbar for MSIE (I know, i know) to have icons, text, or both. Put icons where text won't fit, and options to change colors so it's tailor-built for anyone who takes 10 minutes. Maybe even a specific "color-blind profile"?
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
You can also use this greyscale bookmarklet (IE only) to get a rough idea of how a web page may look to some colorblind users.
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).
vischeck.com has a tool to change the colors of websites to show what they might look like to someone who suffers from colorblindness. Here's slashdot through a colorblind eye.
In the majority of my applications, colour is more of a style thing than actual functionality, but when it is, there are build in methods that can explain functionality without being related to colour.
eg. Using tooltips on the specific colours, or make use of a status bar for when they mouseover specific items.
It may also be worthwhile to create a UI based on text (and little graphics), for the colourblind, as well as people who get pissed off at fancy interfaces.
Are there common color schemes that Windows come with for these color blindness folks?
:)
Thank you in advance.
Ant(Dude) @ Quality Foraged Links (AQFL.net) & The Ant Farm (antfarm.ma.cx / antfarm.home.dhs.org).
I wrote a path-finder program using Dijkstra's algorithm (and then A*, etc.). At any rate, it dynamically displayed its results showing a red path over a green graph (you can see where this is going...).
It was working very nicely and the animation was very fun to watch. I was proudly demonstrating it to a co-worker - "See how it just sniffs this dead-end and back-tracks left here?". He looked bewildered: "I don't see anything". Exasperated, I pointed to the bright red line of the path: "Here, *this*! - what are you, color blind?".
Him: "Yes".
Oops.
I spent the next 5 minutes apologizing and then another half hour adding user control over the animation colors so he could see the results. And never took this for granted again.
This is exactly what the high contrast-themes in most window-managers are for (even Windows 3.11 had those).
Here are some good articles/pointers to find out more about designing with high contrast colors in mind:
Hig High Contrast Color Design
Effective Color Contrast Design
The key thing, as others have identified, is to use color + something. Or, put another way, something + color.
The something can be things like line weight, line pattern, object/symbol shape, position, and/or font style.
A good example is that links are typically in a different color *and* they are underlined.
For a row of status "lights", you might have a lower and an upper set of "lights" (really, round icons) where the lower one is green and the upper one is red. To make things really clear, add labels to the left of each row.
With all of the talk about software, let's not forget one of the worst offenders, battery charge LEDs.
:)
"The indicator will be red while charging and turn green when charged."
Fantastic. That doesn't help me a bit
If you ever work on a charge indicator, please add a blink pattern as well.
Multi-color LEDs are evil to color blind folks.
Of course the other comments on not relying on colour as indicators is important, but remember 'colourblindness' is a very wide range of problems that don't mean the same thing.
For example, I have a red/green and slight red/blue colourblindess. I can tell you the difference between red and green. I can tell you the difference between red and blue. I can read a stoplight. But if you put red text on a green background or vice versa, it is very difficult to read. This is especially a problem around Christmas as TV advertisers and such think it is a good idea to put red text on a green background or something like that.
So, basically, what I am saying is don't put red and green or blue on top of each other, as some really awful web designers have a habit of doing.
A better solution is to use a specialized palette, or to convert reds to greens (RGB-wise, not perceptually)-- and even then keep in mind that someone's gamma may be hideously off.
In the end, it's best to design with multiple cues: textual, color (hue, brightness, AND saturation), iconic, spacial (size & location), and contextual (grouping, logical ordering, etc.) This takes care of not only color blindness, but all the other physical and mental disabilities-- not to mention all the simulated disabilities that people have when they are inattentive or in a hurry.
This isn't much help for software, but for web page designers there is a page that will allow you to see how your page looks to those who are colorblind. Color Blindness Check Unfortunately it requires IE5+ and Direct X to work.
Most people would die sooner than think; in fact, they do.
I do it all the time for my clients. Look at the colors they pick. http://www.justinlovejewelry.com/
-------------------------------------
Technically, we are beyond survival.
I have Protanomaly progressing towards Protanopia. I've been this way since birth and it gradually7 gets worse as I age. It's compounded by the fact that I also have detatched retinas that seriously hampers my sight as well. I can speak for most colorblind people when I say, don't worry about it. Chances are, we'll figure it out anyways. We've spent our lives learning how. It's second nature. I've beaten many a player at games like Bust-A-Move and other color-matching things, even though I often can't tell the blue/purple, red/green, red/brown, green/yellow apart. I learn from other clues and patterns.
..." or "tell me how you cope with this part of life that is based on color ..." I can answer them all in one simple concept ... "Memorization by association." I know grapes are purple ... not cause they look it to me, but because I was told so. Same with grsas-green, go lights-green, jeans-blue. etc. That's what I was taught, so that's what they appear to me. My mind makes it so. You show me a piece of paper the EXACT same hue as grass, and I can't tell you what it is. Maybe a few educated guesses (green or brown), but never anything certain. Same way I know Red light is on top, yellow in the middle, green on bottom (which, incidently, is stark white to me).
PS, If you do find a colorblind person to help you out, please don't insult him by constantly asking "What color does this look like? How 'bout this?
now that I'm done ranting, the secret to dealing with us and programming is not to try and beat the system. I've never met anyone that I can explain fully how it works. Try explaining what red is without being able to use any color related terms. That's where I'm at. Make your software, then ask someone who is colorblind to test it. We'll let you know right away if something is really hard to notice, pick up on, or use.
-Ab
credentials: 1. Colorblind since birth
2. Passed PSU IE408: Human Machine Interaction & Perception Analysis with an A
3. Designed an interface for use in Nuclear power plants that was colorblind & colorsighted friendly
Nothing fails quite like prayer.
can you see white text on a black background ? how about yellow & grey icons on a white background ? can you see blue on white and blue on black ?
In terms of utilities, iChat is by far the best for those of us who are colorblind. It has an option that allows you to use shapes to designate the status of a buddy. It is very helpful as the red and green always look the same because it uses very small circles. Most certainly recommended.
If you actually get back to this thread, are still willing to test, and have a fairly heavy duty PC with 32-bit Windows on it, I went ahead and wrote a simulator to help me out with designing software - kinda surprised there wasn't anything out there already to run locally, but, well, now there's something for windows at least.
Since I was mucking with hues and stuff anyway, I played with doing hue compression and some other tricks, and it seems like it might be useful as a side utility when you have to deal with bad websites or interfaces that use otherwise ambiguous coloring schemes. It can also convert any color channel levels to grey to help out with any one *opia, magnify stuff, give a little gamma, etc.
It's a prototype, not a finished program, so treat it as such. With the refresh rate full out, it brings my 1GHz to its knees and pegs my 2Ghz at 100% processor usage (but runs SWEET). Higher magnifications and lower refresh rates make it less abusive to the processor.
BTW - in the simulation modes, I don't expect them to be exact to any one person's experience. What I do hope the sim modes do is show when colors would be ambiguous, so that I can avoid creating bad interfaces.
Here's the link - Information page here, Download here
I write code.
But, it works for me. Thanks to everyone for all their input! I've learned a lot about color blindness and how to better design my interfaces.
If you're colorblind, the simulator might also be useful to you. It's basically a fancy screen magnifier with color mods. Feel free to try it out, but it's at your own risk.
Here's the info page.
I write code.