AKA Marketing.com Logo            VISIT THE BLOG            

Blogged thoughts, is our web blog. Expect views, opinion, rants and tirades about everything and anything 

« Home / Forums »        


Subscribe to our SEO / IT related blog by entering your email address below

Blogged thoughts

| by the www.akamarketing.com team

Archive for November, 2007

Web design and colour blindness

Friday, November 30th, 2007

It is estimated that 1 in 10 men worldwide are colour blind, additionally it is thought that 1 in 100 women are colour blind. If you design for the estimated 10% of users who are still on 800 * 600 resolutions well then why not develop with colour blind users in mind too?

There are three main types of colour blindess, and I’ll get to them in a moment but in an overall sense colour blindness relates to how some people cannot distinguish between certain colours. The graphic to the left (credit to¬†http://en.wikipedia.org/wiki/Colour_blindness) shows how colour blind people see certain colours.

Colour BlindnessThe three main types of colour blindness are:

Tritanopia is a very rare form of colour blindness. It revolves around the inability of a person to discriminate between blue and yellow hues.

Protanopia is a more common form of colour blindness and effects people who have a defective vision of red and confusion of red with green or bluish green.

Deuteranopia is the most common form of colour blindness. Deuteranopia also relates to the inability of a person to tell certain greens and reds apart.

Remember all colours are made up of certain percentages of the three primary colours, red, blue and yellow. This means despite the fact that Deuteranopia (for example) relates to confusion of greens and reds it will ’show itself’ in many secondary and tertiary colours too as usually they contain some amount of green and red. In this respect classifying types of colour blindess as blue/yellow or red/green can be slightly misleading.

What does this mean?
The fact that some form of colour blindness effects a relatively large proportion of the population means you must factor this in when designing your website. If you make extensive use of colours to differentiate between different elements on a page, the page may become unusable by some visitors. You should therefore follow the advice of all the accessibility gurus and be certain not to use colours alone to convey important information. Practical tips to implement this might include:

Use high contrast colours next to each other in your designs. Black text on white background works best.

Specifically try to avoid using red and green next to each when the colours are significant within?your designs.

If you must use any hues of?red and green next to each other always provide a textual cue too.

Make?important text stand out not only with colour difference but also with bold, italics, underline etc.

Follow the above but also ‘vet’ your designs as outlined in the next paragraph.

Tools to ‘vet’ your designs
Take a screenshot of your site and grayscale it in your favourite graphics program. Does it still look good (and work) without colour?

Run your URL/screenshot through Vischeck. Vischeck is a way of showing you what things look like to someone who is colour blind. The tool is free and is located at http://www.vischeck.com/vischeck/. The URL mode is a bit ‘flaky’ particularly if your site makes extensive use of complex CSS, flash, javascript etc., so if you have the time (make the time if you don’t) I recommend taking an screenshot of your designs and running graphic mode instead.

Run your screenshot through the Etre Colour Blindness Simulator tool. This tool is similar to Vischeck.

Run your URL through the Wickline.org Colour filter tool located at http://colorfilter.wickline.org/. This tool is similar to Vischeck.

How do Irish web design companies fare?
I decided to run a couple of screenshots from some?well known?design houses around Ireland through the Etre colour blindess simulator tool to see how they got on. As Deuteranopia is the most common form of colour blindess, this is the condition I have opted to simulate. I decided to test Continuum, Fusio, Red Sky, Arekibo and Webtrade. I won’t put screenshots for them here as they pretty much all passed with flying colours (pun intended :-)). I don’t know if this means they designed with colour accessibility in mind, my choice of test sites was brutal or they fluked it.

One pair of ‘before’ and ‘after’ screenshots which I will include below is for Continuum. Continuums’ site uses plenty of colours via their primary tab analogy navigation so their site is particularly susceptible to ’shortcommings’ as far as colour blinded users are concerned. It’s good to know however that their site passes with ‘flying colours’ (sorry I couldn’t resist using that one again…). The regular and Deuteranopia simulated screenshots for the Continuum home page are below. Although some colours appear similiar they are not beside each other in the tab navigation.

Continuum Normal Vision ViewContinuum Colour Blind View

How can I tell if I’M colour blind?
There are a couple of online colour blind testing tools available. It should be noted however that due to the hugh variations in screen resolutions and colours that these should not be considered a replacement for proper medical diagnosis. Two tools I’m aware of include the one located at http://colorvisiontesting.com/online%20test.htm and the Ishihara one located at http://colorvisiontesting.com/ishihara.htm

As always your thoughts and comments on my posts are greatly appreciated.

12 Lorcan Crescent, Santry, Dublin 9, Ireland +353 87 9807629