Colour Blindness and Web design – screen grabs

I actually wrote this series of articles over tens years ago so the screen grabs below are rather dated, but do still show that choosing the right colour scheme makes your site easier to read to everyone. I suppose, in retrospect, I should have also used a series of images to show the reverse, how the wrong combinations can make your grand designs look like a blank page to some people! The degree of the colour blindness conditions makes a difference too – mild forms like protanomaly sees the colour muted whereas in the more severe protanopia, with the long cones absent, red is seen more like black.


Screen shots of Ackadia’s home page 2004 – build v6.0

Web page as seen by normal sighted people.

Old Ackadia home page, as seen by normal-sighted people.

Same web page as might be seen with protanope (red) colour blindness. Notice how the ‘visited’ links for News and Computers are very hard to distinguish, compared to above.

As might be seen with protanope colour blindness

Same web page as might be seen with deuteranope (green) colour blindness.

As might be seen with deuteranope colour blindness

Same web page as might be seen with tritanope (blue) colour blindness.

As might be seen with tritanope colour blindness

Same web page as might be seen with rod monochromacy.

As might be seen with rod monochromacy


Examples Screen shots of Ackadia’s links in 2004 – build v6.0

Sample links as seen by normal sighted people.

v6links-normal

Same sample links as seen with protanope (red) colour blindness.

Same links if you were protanope colourblind

Same sample links as seen with deuteranope (green) colour blindness.

Same links if were deuteranope colourblind

Sample same links as seen with tritanope (blue) colour blindness.

Same links if you were tritanope colourblind

Same sample links as might be seen with rod monochromacy.

Same links if you had rod monochromacy



Colour blindness and web design menu :

[ Intro ] [ Charts ] [ Conditions ] [ Examples ] [ Links ]


Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.