Tips for Designing for Colorblind Users

by on 28th July 2010 with 52 Comments

screenshot

It’s estimated that about 8% of males and 0.5% of females are born colorblind. That may seem like a low number but if you’re designing for a large audience, having a site that’s unusable for eight out of every hundred males is definitely less than desirable.

Fortunately, you can fairly easily make sure that your site is colorblind friendly by always keeping in mind the information below. We’ll take a look at what colorblindness really means and how you can tweak your designs based on a few simple principles.

I’d like to start by saying that even though I am by no means an opthamologist, most of the men in my family are colorblind and any examples given below have been run by bonafide colorblind men. If you’re a colorblind person, your description of the examples below might be slightly or even considerably different as no two set of colorblind eyes will quite be the same.

The Science

A discussion on colorblindness can get really scientific really fast. Terms like Protanopia and Anomalous Trichromacy are enough to get even considerably intelligent people tongue tied and confused.

Fortunately, as a designer you don’t need to become an expert on colorblindness. Instead, you can make widely applicable generalizations about what colorblind users do and don’t have trouble perceiving. This not only saves you a science lesson, it helps ensure that you are designing so that nearly all colorblind users can effectively use your site rather than only a single type.

Keep this in mind as you read the information below. Every statement made will not be true for all colorblind users, but at least some of it will apply to a very large majority of them.

If you are interested in the science, check out Wikipedia’s explanation as it is far more advanced that is appropriate in this article.

Busting the Myth

First of all, you can confidently bet that no one you know is literally colorblind. The title is in fact (in most cases) a complete misnomer. A tiny percentage of humans are born with truly monochromatic vision.

Far more accurate terms include “color impaired” or “color deficient.” Instead of seeing the world in black and white, colorblind people can usually perceive and understand almost every color in the spectrum. One of the silliest, and most annoying, questions you can ask colorblind people is whether or not they can “see” yellow, green or any other color.

The real problem is that it is quite difficult for colorblind users to distinguish between two colors that are similar. This is really tricky to figure out when you consider that colors that don’t seem similar to you in the least might seem very similar to a colorblind person, and vice versa.

It’s All About Shades

To make this easier to understand, think about all the shades of all the colors you’ve ever seen. For instance, when you think of the color “green,” think about how many completely different color swatches could match your definition of green. Bright, dark, muted, watercolor, neon; on and on. This includes the slightest variations where one green might contain just a tiny bit more red or blue light than the another green.

Now imagine you counted all of these different shades of green that your eyes are capable of perceiving and they equaled, say 1 million (completely arbitrary number). Now give the same task to a colorblind person and they might come up with 500,000 or less.

So you see, it’s not that colorblind people (in most cases) are incapable or perceiving “green,” instead they merely distinguish fewer shades of green than you do. So where you see three similar shades of green, a colorblind user might only see one shade of green

To make it even more complicated, similar shades from different colors often run together and make it difficult to determine precisely what color something actually is.

Examples

It’s always a bit easier to understand with a few solid examples in front of you. Consider the following four swatches.

screenshot

First look at the bottom two swatches. Consider primarily the brightness of the swatches, even more so than the basic color. Colorblind users should easily be able to distinguish between these two swatches; just like you can. Whether or not a colorblind person will correctly identify the colors is a completely different story, but at the very least, it’s easy to tell that they are different colors.

Now, the top two swatches are a different story. The previous example might have you thinking that colorblind users can easily differentiate between brown and green, but you’d be wrong. Again, comparing only the relative brightness/darkness of the two swatches, you can probably see how these two swatches might look more similar. Now consider that, to many colorblind individuals, the top two swatches will be identical.

To travel even further down the rabbit hole, let’s repeat the dark brown and add a shade of dark red.

screenshot

Again we see two shades that are different colors, but again the relative brightness of the swatches is so similar that a colorblind user will have trouble distinguishing between them.

A set of normal eyes should see five different color swatches in the arrangement above (one is repeated). A set of colorblind eyes will probably see three or less!

Painful Color Combinations

Mix similar shades as in the examples above and your colorblind users either won’t notice of will be mildly annoyed. But if you really want to make your site completely unusable, start overlapping shades of colors that have similar brightness values but have the potential to seriously clash.

Reds and blues, purples and reds, pinks and blues and almost any combination of these are a great example. As an example of what not to do, consider the image below.

screenshot

Whereas you might see merely some ugly text, many colorblind users will see such vibrating colors that their eyes nearly begin to water (the further away they are the worse it becomes). It’s difficult to explain properly when you can’t see it but basically what happens is that it’s evident that the colors are very different but they’re actually similar enough that the edges where the two colors meet become very difficult to distinguish. This causes an altogether unpleasant experience for many colorblind users when viewing an image like the one above.

So What? How Does This Affect My Designs?

This information is all well and good but how does it practically apply to design? The answer is that there are a few key areas where you should really pay attention to how colorblind users might experience your site differently.

One of the most common mistakes that I see is in link hover effects. Countless designers simply apply a color shift as a hover effect and call it a day because they can perceive it just fine.

When in doubt, remember that colorblind users can perceive brightness shifts, for the most part, just like you can. A really dark blue and a really light blue will be an obvious switch. So if you switch colors on a hover, make sure the two colors are very different in their relative brightness. You can switch from a dark brown to a bright green, just not from a dark brown to a dark green.

Further, it’s always better to add something else visually in addition to color shifts. When the user hovers over a link, add a stroke, drop shadow, or anything else you can think of to make for an increased visual difference that doesn’t simply rely on a color change.

screenshot

Infographics

Another key area where color differences are important is with data visualization. Choosing the wrong colors for a chart can make it literally unreadable for a colorblind user.

screenshot

Even if your colors are very different, it’s often a good idea to add a little pattern or texture to different parts of a chart to make for easier visual differentiation.

screenshot

In the example above, even though the colors are still similar enough that a colorblind user might not be able to see the difference, the stripes make for a quick and easy visual reference for all users.

Games

As you can imagine, the possibilities for colorblind users to be left out are endless, but one final place I want to discuss where this can be particularly frustrating for them is with games.

Imagine trying to play the iPhone game below as a colorblind user. Matching the colors up to complete the puzzle could be quite difficult!

screenshot

Many iPhone games have compensated for this by having an optional colorblind mode, but to make it simple just consider adding symbols in addition to color to make it easier for everyone to play. As an illustration, consider a deck of playing cards. There’s more going on than red cards and black cards. Everyone playing, colorblind or not, knows that the diamonds and hearts are the red cards while clubs and spades are the black cards. Even when you see these symbols in a black and white photograph, you can confidently distinguish between the red and the black cards. This is exactly how your games should be developed.

Conclusion

In closing, just remember that it’s actually really easy to make your site accessible for colorblind users. You only have to put forth a conscious effort where it affects how the site works or when color perception could impair the readability of text. Who cares If you have a brown background that colorblind users think is green? Most of the time, they sure won’t.

Just make sure that when it matters, such as with links, charts and games, you look for ways to add contrast. Use highly contrasting colors colors, implement patterns, apply symbols, and use tricks with strokes, shadows and the like to make sure there is significant visual difference in all the right places. It can often be helpful to use a colorblindness simulator to help decide how the colors on the page affect the overall experience.

Leave a comment below and let us know if you ever consider colorblind users when designing a site and how you accommodate their needs.

Comments & Discussion

52 Comments

  • http://ibrandstudio.com Eko

    Great post…that’s true, so far I have never considered this.
    Thanks for the tutorial

  • http://www.lukebalson.com Luke Balson

    Great post.

    You hit the nail right on the head. I am a website developer myself and am slightly colour-blind (nothing too drastic, when it comes to coding no big deal), but as you said the biggest problem lies in having difficulty differentiating similar colours more than anything else. Some might see one colour as a different colour, but as long as they can tell the two apart that’s all that matters.

    One thing I found that really works is when creating the website create it in black and white first in Photoshop, to make sure the shades are ok then add colour.

    Its one of those things I have never really thought of too much. As long as I can see it alright, shouldn’t be a problem for users, lol.

  • Pingback: CSS Brigit | Tips for Designing for Colorblind Users()

  • Niubi

    Interesting! I reckon that the DubLi website is probably quite good for the colorblind as well as the rest of us :)

  • http://www.nexj.com Cheryl Taylor

    PhotoShop and Illustrator both have proofing tools that will help you design for colour blind users. I test for the difference in shading when I am producing UI designs.

  • http://www.ree-she.com Rishi Luchun

    Great post, I’m colourblind and a designer! Always an issue that I face everyday. Also a pain with the mobile games as you have mentioned, a lot do not have colourblind mode!

  • http://www.goblinridge.co.uk Ted Thompson

    Great article. Learnt a lot, very helpful. Thanks for sharing!

  • Pingback: Tips for Designing for Colorblind Users | Design Shack « Design Studies at Dundee()

  • Duy

    Thanks for great article. Never thought about this before.

    @nhtd0511 – Twitter

  • http://www.dreamsmedia.in Harish Chouhan

    Nice article puts complex things in simpler way. I had read a more detailed article about this on Wikipedia few years back.
    There is a website that allows us to an extend how our websites would appear to people with colour blindness.
    http://colorfilter.wickline.org/

  • Pingback: Friday Focus 07/30/10: Centered Seals | Devlounge()

  • http://www.developerweb.co.uk Richard Havelock

    I am a colourblind web designer and I have a set hex colours that I pretty much know off-by-heart as the basics (red, blue, green etc) so I use them in Photoshop and then fiddle them to match what I am looking for.

    However I do remember designing one of my first websites for a university project not realising that the site was pink, not red!

  • http://www.scottfillmer.com Scott Fillmer

    great post, every designer should read it.

  • Pingback: Best Web Design and Web Development Tutorials Roundup [July 2010] | Propeople Blog()

  • http://Jarederickson.com Jared erickson

    I have this pretty easy… Because I’m a designer that is color blind…

  • http://www.KuawaRoad.com KuawaRoad

    What about Gradients? Is it hard for the ‘color impaired’ to see a very fine transition? Or is everything fine as long as the shades in the gradient’s colors differ enough?

  • http://shikebali.co.cc Shikeb Ali

    After a long time I read something really different and constructive in approach, with a great sense for helping others.

  • Rachel Rodenborg

    Great information to have! I’d never thought about it before, but I can see how challenging a website design could be to use as a color blind person if this issue isn’t considered. Thank you for the informative approach.

  • Pingback: Linkspam: Feminism, Science & Usability()

  • Trevor L

    This is great! There aren’t many people who touch on this topic. Being quite severely colourblind myself, it’s hard to look at websites and play games without feeling a bit frustrated.

  • Pingback: 色覚障害者に配慮したWebサイトの作り方 | Webクリエイターボックス()

  • Pingback: WebAxe Podcast #86: EDUCAUSE Review, AHG Preview, HTML5 Audio with Terrill Thompson « The BAT Channel()

  • http://www.ianferguson.me.uk Ian Ferguson

    Good article – that red/purple clashing pic makes my eyes water, and when colleagues choose that kind of scheme for a design, I practically scream at them. Cyan/white is another classic combination that is almost completely invisible to us.

    However… you need to take your own medicine. The text links on this site (at least, in this article) are hardly recognisable to me from the regular text. For example, take this line, the fourth paragraph in;

    Like the article? Be sure to subscribe to our RSS feed and follow us on Twitter to stay up on recent content.

    I realise ‘RSS feed’ and ‘Twitter’ are links, as they were likely to be so, and I can hover over them to see. If I look closely, I can see they are slightly lighter than the regular text, and they are brown or green (?). However, I don’t know if there are more links in the body of your article, as merely being slightly lighter doesn’t make them stand out. There should be more of a difference in colour, slightly lighter; or much better, a different style (bold or underlined – the HTML default of underlining links exists for a reason).

    I realise this would muck with your brand; as a designer/coder I’ve had eternal battles with brand vs. accessibility. The best thing is to find a happy medium; most people who need accessibility concessions are well aware that they have to work a bit harder to consume content, and as long as you follow the basic and obvious rules, they won’t mind.

  • Pingback: Double Treat: Ultimate Web Design and Development Tutorials | Webblog360()

  • Pingback: Effective Colour Contrast()

  • http://www.designmontage.com.au Jen

    Great article!! I am researching this at the moment and can’t believe how many designers just don’t consider people with colour blindness when designing for the web.

    I’ve found that a common problem is grey text. So try to avoid using grey body copy on sites as there’s not enough contrast with the background.

  • http://www.easyate.com/ Jordan fans

    good job.

  • http://www.slimming-products.net slimming products

    I like it very much and which you shared the info in this post is very useful. Thanks for sharing a wonderful post. I found this post while surfing the web.Thanks for sharing this article.

  • Thomas

    I always use a tool like “Sim Daltonism” (http://michelf.com/projects/sim-daltonism/) for colorblindness simulation to check my interfaces or websites. I’m not sure how accurate it is, but it’s a good start.

  • Pingback: Can Colorblind Users See Your Website? « COM585()

  • Duane R. Olson

    I am looking for someone to design color-blind adds for color-blind people re-produced on cloth. Can you help me locate such a person or company? Duane Olson 1037 Bayberry Drive, State College, Pennsylvania (814)238 0304

  • Duane R. Olson

    Olson’s e-mail address is

  • Pingback: Accessible Web Design « yasminelizabeth()

  • Pingback: Tips for Designing for Colorblind Users | Design Shack | UXWeb.info()

  • http://www.astraglaxo.com TA-65

    Just want to say what a great blog you got here!I’ve been around for quite a lot of time, but finally decided to show my appreciation of your work!

  • http://www.junyuetrade.com LiMelia

    Awesome article!Thanks for ur nice sharing!!

  • http://www.junyuetrade.com NikeJordans

    I got more useful information on this blog.. Thanks to sharing the useful information.

  • Rurik Lofmark

    Perfect!
    How can we sell the idea to the authorities and media who are supposed to inform in a just way?

  • Dylan

    Thank you. This is a great resource!

  • http://spotunaruc1652.tumblr.com/ worldofwarcraftgold

    Magnificent goods from you, man. I have understand your stuff previous to and you’re just too excellent. I actually like what you’ve acquired here, really like what you’re saying and the way in which you say it. You make it enjoyable and you still care for to keep it smart. I can not wait to read much more from you. This is actually a great site.

  • Pingback: Noble Master Developer's Blog » OpenGL Shader to Correct and Simulate Color Blindness (Experimental)()

  • Pingback: Disability user groups of the internet | Designing websites for accessibility()

  • Pingback: Disability user groups of the web | Designing websites for accessibility()

  • Pingback: HoverKraft blog | Kleurenblind()

  • Pingback: Graphic Design & visual impairment #01 – Colorblindness | TOM CLABOTS()

  • Pingback: » Colour blind mode: a way to include more players into the game()

  • Pingback: Don’t Forget About Color Blind People! | Algonquin Studios()

  • Pingback: Eight Tips for Design a Site That’s Colorblind-Friendly - Byte Technology Website Design Blog()

  • Pingback: Colorblind Accessibility Web Design Tips | Design Roast()

  • https://www.youtube.com/watch?v=vqtfL8HYLEE french for learn

    It’s actually very complicated in this busy life to listen news on TV,
    so I simply use internet for that purpose, and get the most recent
    news.

    Look into my site – french for learn

  • Pingback: How to ensure your site is accessible to the visually impaired ? | My musings on UX()

  • Pingback: Why all designers need to understand color blindness()

Subscribe
Membership
About the Author