Web Design that taps into the haromny and vision of your dreams.

Colour blind Web Design

By on in Graphic Design

355 words, estimated reading time 2 minutes.

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 where 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.

Last updated on: Wednesday 27th June 2018



Have a question or suggestion? Please leave a comment to start the discussion.



Great article. I do some website design and "I am" color blind. I think my website for breeding cats 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.


Reply to Gary
Randall G. Leighton

Randall G. Leighton

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.

Reply to Randall G. Leighton
Tim Trott

Tim Trott

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!


Reply to Tim Trott


Leave a Reply

Please keep in mind that all comments are moderated according to our privacy policy, and all links are nofollow. Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.

Your email address will not be published.