Searching for the Moon

Shannon Clark's rambles and conversations on food, geeks, San Francisco and occasionally economics

Yellow and Green – color blindness and UI design

Posted by shannonclark on July 19, 2007

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.

4 Responses to “Yellow and Green – color blindness and UI design”

  1. […] Clark is only slightly colorblind, but he has anyway many stories to tell us about it. Specially Yellow and Green – color blindness and UI design caught his attraction. And in the end he pleads: “Test your UI with people who have color […]

  2. […] You can design to cater for colour blind users in a very simple way. When you finish your design in Photoshop simply save it and then convert it to grey scale. If everything is still easily read and understood then congratulations there is a good chance it will be fine. Remember that red and green are the common culprits. Something I recently read is that when we as designers remove the underline on anchors and change the colour to a different shade it can often make it hard for someone affected by colour blindness to see the link. You can read about one persons experience with minor colour blindness in this article ‘Yellow and Green – Colour Blindness and UI Design‘. […]

  3. emmy said

    omg i showed dis to my mate, and now she finally understands wat its like to be color blind. i am yellow/green too. i hate when people ask me what color i see, cos i don’t no how to describe it . then there all like well is it yellow or more green but what can i say i can’t tell the difference

  4. vira said

    I have this same colourblindness, I can not see any difference in light green and yellow.

Leave a Reply to 4th Day of Links on Color Blindness Cancel reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: