Learning never exhausts the mind
Home >  Web Design > Colour blind Web Design

Published 25th September 2008 by

As a web designer blessed with colour blindness I often find that other people remark on my choice of colours and ask "what was I thinking?" While the colour schemes look perfectly fine to my eyes, they can be contrasting or too strong for "normal" eyes.

The best example I can think of is my photography portfolio (which is no longer online, instead visit Tim Trott on Flickr). On my original portfolio, I created a brown/gold/grey palette. I was quite pleased with it until a friend commented that blue and green didn't go together, to which I replied: "there is no blue...".

Since my colour palette didn't go down too well I had a look on the web and found a colour-blindness filter which reads in a website and produces a filtered version based on various colour blindness defects. Apparently, I have an anomalous form of protan, commonly called red-green colour-blind.

When I showed my friends the filtered version - the version where I could see no difference between the real version and the filtered version - and they could see what I saw, they then all said that my choice of colours was good after all. It's just that I saw the colours wrong.

The two screen shots below show my first version (left) and how I see the colours (right).

Color-blind Web Design

Color-blind Web Design

I cannot see any difference between the two, but apparently, the links on the left-hand side are blue, not grey and the logo and heading are bright green, not gold.

Although there are good guidelines on developing websites and how to design web accessible pages for the colour-blind as well as tools for evaluating how colour-blind people will see various web design graphics, there does not seem to be any resources for colour-blind web designers who need a filter to see how the palette looks to a normal person.

This is a great shame, as I could really do without this handicap especially seeing as I have enough trouble with a lack of colour creativity in the first place!

What number do you see here? "Normal" sighted people will see the number 45, while colour-blind people will see nothing but dots.

What number do you see here? "Normal" sighted people will see the number 45, while colour-blind people will see nothing but dots.


The Ishihara test for colour-blindness shows a random pattern of dots and depending on colour-blindness you will either see a number, a pattern or nothing.

If you have any colour blind resources that could be of help, please let me know and I'll gladly put up some links.https://www.flickr.com/photos/timtrott/

3 thoughts on “Colour blind Web Design
  • 14th December 2010 at 12:00 am

    Great article. I do some website design and "I am" color blind. I think my website for breeding cats http://www.jungletouchexotics.com is most likely off on the colors.

    I am currently looking for something that will match colors for me. i.e. website, a program, a friens etc.

    I am red green color blind and it is a challenge for sure. I tried the color blindness filter on the website and saw no difference nor what it does. sigh.


  • Randall G. Leighton
    24th October 2009 at 12:00 am

    This is an excellent article, Tim. I'm a web developer in California and am not color blind. However, I have friends and clients who are. I'm trying to raise awareness among web designers of the condition and how it impacts the work they do. It's interesting you're coming at the problem from the other side. While, I believe, you're primary concern is making the page attractive in terms of pleasing colors my main concern is making sure the page is legible.

    From my point of view, turquoise lettering on a light gray background looks beautiful. However, I've learned turquoise looks gray to many color blind individuals. Thus, making what I see as beautiful both dull and illegible.

    As you point out, there are several pages that are intended to show how colors/web pages look to color blind individuals. There's even one that lets you adjust the degree of color blindness. But, it wouldn't be possible to have a similar example for color blind web designers because you don't see as many colors. For example, I see 4 distinct colors that all appear as gray to you. How would you take a shade of gray and know which color it maps to for me, especially if it's a color you've never seen? Personally, I find it an interesting issue since it has implications about how much of reality we are all blind to.

    With your permission, I'd like to link to this article from my blog. Also, if you'd consider being a guest writer sometime for my blog, that would be great. Of course, if I can assist you in any way at all please don't hesitate to ask. Thanks again for a wonderful article.

    • 9th November 2009 at 12:00 am

      Hi Randall

      Thankyou for your words. Of course you may link to my site. I'll have to think about something to write about on your blog!



Leave a Reply

Fields marked with * are mandatory.

We respect your privacy, and will not make your email public. Hashed email address may be checked against Gravatar service to retrieve avatars. This site uses Akismet to reduce spam. Learn how your comment data is processed.