The impact of colour blindness on web design

Richard Rutter shares a colour blind person’s views of how colour blindness affects web browsing in Colour blindness on the Web.

As Richard states, colour blindness does not often cause any serious usability issues on the web. There are examples of design that does not work, of course, and a couple are mentioned in the post. One example is dark red links in paragraphs of black text - such links can be very hard or even impossible for people with certain types of colour blindness to distinguish. That is why the dark red links on this site are also bold and have a bottom border, by the way.

Despite saying that colour blindness on the Web isn’t a big deal, Richard’s post highlights the importance of not relying on colour alone to highlight critical elements.

Posted on November 9, 2005 in Accessibility, Quicklinks


  1. I like the yellow grasshopper in your page header… :D

    Richard’s quite right about not relying on colour too much.

  2. As someone who doesn’t suffer from colourblindness, I can honestly say you have to test for it if you care about designing to accomodate it (unless you’ve lots of experience with colourblindness I guess).

    I chose the background colours for some adverts that used white text - the colours rendered the adverts totally invisible when viewed through a deuteranope simulator, even though they looked fine to me!

    BTW, I’m glad the grasshopper is no longer dissected by adsense, just the skip links to move now ;-)

  3. November 9, 2005 by Roger Johansson (Author comment)

    Matt: The header does look a bit weird when you use something like Sim Daltonism or ColorDoctor to simulate various kinds of colour blindness.

    Steve: You should keep it in mind, definitely. But common sense goes a long way.

    The skip links are looking for a new home. Not sure where to move them. Any ideas?

  4. Roger: Thanks for the link…that looks really useful.

    And as for those skip links? How about on the left instead, vertical list stylee, same size and in a similar/same font to the ‘456 Berea St’ badge? (Just a thought!)

  5. Skip links: I’d put them on the left too, not sure about a vertical list though, horizontal would leave the header more space to breathe.

    I’d move the styleswitcher link there too, maybe put it first. Tucked in the side bar I doubt those who need it would find it - at least not quickly?

    Must go re-read the post about why the skip links should be visible, they’re display:none on my normal layout. I figure if you need skip links, you need zoom too - so pick that and they’re waiting there for you… simplify.

    Don’t get me wrong tho’ - I love your site design :-)

  6. Sorry, my link still points to my rubbish blog, which has no zoom layout yet (and still doesn’t work in Opera- sshhh). I changed my link the day you posted about 9rules, changed back now…

    Any tips for a blog topic to get my teeth into?

    I’ve been thinking about aesthetic accessibility as a general direction? Would be fun getting slagged by Joe Clark and Chris Heilmann if they ever stopped by… :)

  7. November 10, 2005 by Roger Johansson (Author comment)

    Steve: Moving the styleswitcher is probably a good idea - I’ll look into that.

    Skip links, if you choose to hide them, should not be hidden with display:none since that will hide them from screen readers.

    I made the skip links visible since that way they benefit the largest number of people - they aren’t only meant for screen readers, but also people with reduced mobility and keyboard only users to name a couple.

  8. Yes, thanks Roger, visibility:hidden would be more appropriate oops fixed now :-)

  9. Colour blindness is of course not a big deal. But even without considering its possibility designers should diverse the risk of leaving the main word or frase or whatever without necessary attention. So we should combine colour with bold or anything else.

Comments are disabled for this post (read why), but if you have spotted an error or have additional info that you think should be in this post, feel free to contact me.