Yellow and Green – color blindness and UI design

I am partially colorblind. In college I briefly worked for an eye researcher and took what was then the most accurate colorblindness test in the world. My color blindness is about as minor as possible to still deem me as having colorblindness, but it is very real.

In my case, there is a band of “orange” which appears undifferentiated to my eyes, but which a person with normal color sight would perceive as having variation.

The impact, however, of this very seemingly trivial difference in my eyesight, is that in general there are many yellows and light, yellowy greens which I do not perceive as different.

Take any Mac window. You know those three buttons on the top left side of the screen? I see a red button and then two yellowish buttons. Looking quickly, I can’t tell which is yellow and which is green (I only think that one is green because people have told me).

Or look at the LED’s on an iPod Shuffle (at least on the first generation) there too apparently, I’ve been told, the LED will show yellow for one signal and green for another – but I do not perceive this difference at all.

On the web almost all flash (or javascript) games which involve matching colors end up using yellow and green in a way that make it impossible, literally impossible, for me to play these games with any degree of success.

Windows is by no means exempt here either, in the midst of my troubleshooting my tablet issues today (tablet stopped working as a tablet, system is running insanely slow – 5-6 minutes to boot up, 3-4 minutes to wake from sleep, 10+ minutes sometimes to shut down, 3-5 minutes to sleep) I am running Diskkeeper to defragment my hard drive. Nice, except it too uses yellow and green to show certain different types of files on the system – I literally cannot see which is which.

It is important to realize that this is not a case of I see something as “yellow” which you would call “green”, rather it is that I see both of these shades as the same – I can’t see that there is any difference between them at all – especially when quickly glancing at them (as in playing a game). Intellectually I know there is a difference (say between the buttons on a Mac Window), but my eyes do not show me that difference.

Years ago this is why I never played many computer games and almost never played team online games such as Doom, Battletech, etc. I usually could not perceive the signals they used to show friend or foe. Or in the case of many of the games with puzzles, often they included an aspect which relied on color differences which I could not see. In the case of the first person shooter this lack of differentiation meant that my reactions were much slower, I would have to look for other signals as to “friend or foe” or for targeting etc.

So though I love games, love design, and spent the majority of my time in front of computer screens my colorblindness means that I have not been able to enjoy many of the even very simple pleasures, let along complex ones such as World of Warcraft, which many others enjoy.

I am also not alone with this, figures differ a bit and do have some racial/geographic differences, but something like 10% of the population (more men than women since it is at least in part tied to the same chromosomes as gender) are color blind. Some yellow/green like myself and others red/blue. A few do not see color at all, but I most, like myself, see color, just not all the same variations as someone with normal sight.

I will try to find illustrations and examples, but if you read this post and are involved in UI design – on the web, on desktops, or for that matter in any game console or other consumer product, TEST YOUR UI with people who have color blindness. There are many colors you can choose from – select ones which very rarely have perception problems. Also, whenever possible use MULTIPLE signals to show difference, rather than only using color (as in the case of the mac buttons without a mouseover action), do something like those buttons do on mouse over – show symbols on them as well. But realize that even then people such as myself literally cannot act on an instruction such as “click on the yellow button”. Make sure you say something like “click on the middle, yellow button with the minus sign”

And if you work for Apple or Microsoft – can you please change your defaults.