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.
- Previous post: Usability of tabbed browsing in Firefox
- Next post: Camino - a Mozilla browser with Safari polish
Information, sponsorship, and externals
About the author
Roger Johansson is a Swedish web professional specialising in web standards, accessibility, and usability. More about me and this site.
Latest articles
- Validation statistics from Nikita the Spider Comments off
- An analysis of the sites crawled by the bulk validation tool Nikita the Spider during March 2008.
- Authentic Jobs API and Affiliates program Comments off
- The Authentic Jobs job listing service now has a public API and an affiliate program.
- What does Acid3 mean to you and me? Comments off
- Opera and Apple have announced that their web browsers pass the Acid3 Browser Test, but how will that help web designers and developers?
- Designing Web Navigation (Book review) Comments off
- Learn the fundamentals of navigation design and design better navigation systems for large and small sites as well as for web based applications.
- DOMAssistant bundle for TextMate Comments off
- To save keystrokes and speed up development I have created a DOMAssistant bundle for TextMate.
- First impressions of Internet Explorer 8 Beta 1 Comments off
- My impressions after trying out Internet Explorer 8 Beta 1 for a couple of days.
Comments
I like the yellow grasshopper in your page header... :D
Richard's quite right about not relying on colour too much.
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 ;-)
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?
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!)
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 :-)
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... :)
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.
Yes, thanks Roger, visibility:hidden would be more appropriate oops fixed now :-)
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.
Sorry, comments are closed for this post.