Effective Colour Contrast
Have you taken a serious look at the colour scheme your website uses? Are all parts of your web page visible to everyone?
Some times when we pick a colour scheme for our website we forget that there are people with poor vision and colour deficiencies. Even website visitors with “normal” vision can have difficulties reading a web page that has poor contrast between the colours used.
For a person with poor eyesight or colour blindness, certain colour combinations are hard to see. If there isn’t enough contrast between the colours used, they just meld together for these visitors. This also happens for visitors with normal sight.
The colours you have picked may appear in enough contrast to you but they might not be for another person.
Testing for Effective Colour Contrast
How does your web page look in black and white? Take a screen shot of the page, open it in your graphics program and change the colour mode to gray scale. Can you clearly read the page?
The Web Accessibility Toolbar comes with a colour contrast tool built in. You can open your web page, click a spot on your text then click a spot on your background to see if the colour contrast is enough for various colour deficiencies.
There is another tool for colour contrast testing available at Snook.ca. With this tool, you use sliders to pick the foreground and background colours you wish to use and the results are shown on the right.
Another interesting colour contrast tool available is the colour contrast chart for colour blindness available at Standardzilla.com. With this chart you can see how people with different types of colour blindness will see certain colour combinations.
To learn more about colour blindness and how type and colour choice are important, read through Chapter 9 of Building Accessible Websites, available online.
Lighthouse.org has an extensive article on effective colour contrast which gives some guidelines for choosing a colour scheme with effective colour contrast.
Effective colour contrast is not just an accessiblity issue, it’s also a usability issue. We have some preconceived ideas of colours that do well together but these do not necessarily make the page accessible, and usable by all your website visitors.
Take the time to check your colour combination’s colour contrast, if the visitors can’t read your page, they won’t be sticking around to see what you have to offer.
Additional Resources to Check for Effective Colour Contrast
10 colour contrast checking tools to improve the accessibility of your design
Colour blindness on the Web is written by a person with colour blindness. Within the article he points out:
“…aspect of red-seeming-black that causes me problems on the Web. The issue arises when designers specify links to be dark red but don’t underline or embolden them. This means the link is indistinguishable from the rest of the text. …So be careful with your link colours (or simply make sure they are all underlined or emboldened)…”
Accessible colour combinations – 456 Berea Street’s post where commentors are invited to provide sources of accessible colour combinations. The second comment is a colour blind person’s perspective on this issue.
Copyright © 2005 - 2008 Web Page Mistakes. All rights reserved.
June 11th, 2009 at 9:34 am
[...] with colour schemes already compiled. When selecting your colour scheme you also have to consider colour contrast. Sometimes, even for visitors with regular vision, combining colours without enough contrast [...]
June 12th, 2009 at 6:06 am
well my website is very rich in color scheme i always preferred to use a specific color scheme with not more than two colors in my web design process.
June 16th, 2009 at 10:26 am
[...] started: Color Combinations ColorSchemer When using the colour scheme selected, make sure that the colour contrast is enough between the background and foreground colours so they are readable. The Color Matters [...]
June 25th, 2009 at 1:44 pm
Colour contrast is not only important because of the reasons detailed in the post above, but also because Google can consider that you’re trying to hide text. If your text colour is quite close to your background colour, you can be penalized as Google thinks you’re using desertive techniques to improve your position in serps.
July 19th, 2009 at 9:23 pm
[...] would think that if your ad doesn’t have enough colour contrast then it would be hard to read = low click through rate. As our society ages, you do have to [...]
July 29th, 2009 at 8:27 am
Really interesting stuff – I’m slightly colour blind myself but I’ve never thought of it in terms of web design / colour contrast issues. I normally have difficulties distinguishing shades of green and red or brown and red – can’t think of any examples where this has affected my ability to use a site, but certainly it could be a subtle factor in things like ad clickthroughs etc.
August 26th, 2009 at 7:29 am
Not enough website designers realise how important colour contrast is to the success of a website, its something i take very seriously
September 9th, 2009 at 9:57 pm
During the beginning of the “web 2.0″ look, there was very little contrast… everything was very washed out. Its nice to see good use of colors and contrast coming back into web design.
September 28th, 2009 at 4:08 pm
Contrast as you mention is one of the big keys for accessibility. Lighthouse.org does have some good articles on this subject too.
I agree with one of the other comments that things became very subtle with lots of gradients etc. etc.
If you look at the top websites in the world on alexa.com you will find simple designs and simple colour schemes.
October 5th, 2009 at 7:51 am
Very good point you make here – particularly if your website is aimed largely at a male audience (a larger percentage of men are color blind). A professional web design service should offer accessible and striking, eye catching color contrasts. If what they create looks like a five year old’s picture, run, don’t walk away.
November 5th, 2009 at 12:00 am
[...] the correct colour contrast between the elements of the web page can make the difference between the website visitor staying [...]