jonlee.ca

Every site has a color theme or color combination that defines it: Msdanielle’s is white and pink, Gary Lee’s is orange, gray and white, mine is teal, gray and white. All of these are perfectly good color schemes (especially teal, gray and white ). You probably wouldn’t make your theme yellow and lime green – it hurts the eyes and just doesn’t work. But what about the colors of Christmas, red and green? Or what about blue and yellow, like Nice4Rice?

In theory, red/green and blue/yellow color combinations are great since they compliment each other fairly well. But from my experiences in teaching, one thing I have discovered is to stay away from the red/green color combination. Not only in web development, but also on PowerPoint presentations, brochures, handouts, etc. Blue/yellow is less of a concern but to be safe, you should try to use it sparingly.

Are you confused? So what makes red/green so bad? It is because 7 to 10% of males have some form of red/green colorblindness and 1% of males have some form of blue/yellow colorblindness! This doesn’t mean they see red and green as shades of gray, they just can’t distinguish between them.

For an individual with deuteranomaly, they have a hard time distinguishing between red and green whereas an individual with deuteranopia cannot distinguish between red and green at all. Here is a visual representation of what a person with normal vision sees (left) compared to what a person with deuteranopia sees (right):

So when you create anything, make sure you’re not using red on green or vice versa. Up to 10% of your (male) audience may have a hard time making things out. Imagine how traffic lights appear to them if green looks the same as red… they have to note the position of the lights. Interestingly enough though, this condition is fairly rare amongst females (around 0.4%) and more prevalent amongst Caucasian males than Asian or African males. If you want to check if you’re red-green colorblind, see if you can make out the number in the picture to the right. Answer is in the comments.

(1) Statistics from Howard Hughes Medical Institute
(2) Images stitched from several images on Wikipedia.

Popularity: 4% [?]

This entry was posted on Tuesday, April 3rd, 2007 at 7:59 pm and is filed under Web Development. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.