Colour Blindness and Web design - screen grabs

Update

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 web page 2004 – build v6.0

Old Ackadia home page, as seen by normal-sighted people — { Web page, as seen by normal-sighted people. }

Now, the 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.

{ Web page might be seen with protanope colour blindness }

Web page as might be seen with deuteranope (green) colour blindness — { Same page as might be seen with deuteranope (green) colour blindness. }

Web page as it might be seen with tritanope colour blindness — { Same web page as might be seen with tritanope (blue) colour blindness. }

{ Same web page as might be seen with the much rarer rod monochromacy. }

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

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

{ Same links if you were protanope colourblind }

Same links if were deuteranope colourblind — { Same sample links as seen with deuteranope (green) colour blindness. }

Same sample links as might be seen with rod monochromacy. — { How you might see the same links with rod monochromacy }

A word on browser compatibility

(2022) More as an historic interest…

I’ve included a few more screenshots I have of the time. They are all almost identical – or at least should be if I was doing my job well. However, that was often not the case and a frustrating part of being a web developer in the early years was the “browser wars“. Some companies (*cough* Microsoft *cough*) were particularly notorious for breaking pages because their idea of ‘web standards’ and agreements conflicted with others as they each vied to be the most popular. Twenty years on it’s still a problem, if only mostly for supporting legacy browsers. These days, the browser wars are fought with features, like privacy (or not! “Oh, hey, Google!”), VPN options and so forth, rather that making our life a misery by breaking layouts.

Anyway, W3schools is excellent for saying who supports what in HTML and CSS, but the go to site is probably Can I use who, I note, not better support colour blindness themselves if only with style swap link and toggle: Can I Use: theme