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
How to Measure Color Contrast, for Web Accessibility
the reality of color contrast is more complicated. There are a lot of assumptions to work out before you can be confident that visually impaired shoppers can use your ecommerce site.
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.
Color Blindness Myths and Misunderstandings
Tips for Designing for Colorblind Users
Copyright © 2005 - 2024 Web Page Mistakes. All rights reserved.
What's next?
Follow our new articles via RSS, follow us on Twitter and submit to your favourite social networking site:
21 Responses to Effective Colour Contrast
Effective Colour Contrast Was Mentioned Here:
- What is the best choice in CSS?
- Colour scheme suggestions?
- Color schemes affecting CTR?
- Website Testing
- Please suggest good background colors for my blog
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 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 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.
April 30th, 2010 at 6:43 am
Thanks so much for posting this. There’s something about the colour scheme on my website that I just don’t like – I don’t think it will appeal to the people I need to attract for my business. At least this information may help point me in the right direction.
May 4th, 2010 at 1:07 am
The right combination of colors will make your webpage look better. Always try to make a webpage color contrasted so that it should neither look darker nor lighter.
September 3rd, 2010 at 4:24 am
Contrasting colors can create a real impact in the visual appeal of the website or any graphic design artwork
March 21st, 2011 at 7:24 pm
thank you for this reminder. would hope that we all consider the psychological impact that color makes – it forms much of the initial impression of a site, which determines your bounce rate! get the color scheme right for your niche and beware of common misinterpretations and sight deficiencies with your viewers. this is a great reminder.
April 19th, 2011 at 9:05 pm
I never knew about color contrast issues. I just created the graphics for my site in Photoshop and put it out there. I’m going to go test my site — thanks for the tips!
April 21st, 2011 at 11:48 am
I never rely on my judgment alone when it comes to picking colors for a website I was get some input from artistic friends of mine. One other thing that I like to do when picking colors is go with proven winners, take a look at Amazon or even Googles there is a reason why they use a white background
May 4th, 2011 at 6:03 am
Actually I am question priced at how many websites are really crappy when it comes to having a good contrast between the background and the text on the page. Obviously webmasters don’t want to just follow the crowd all have a white background but think it’s really important to have a few different people from different age groups look at your color choices and get their input. What’s the point of going to the trouble of creating a website that some or most people can hardly read
June 9th, 2011 at 2:55 am
I’ve actually tested this and have found that, without a doubt, colour and layout can have a HUGE impact on the effectiveness of a site.
June 29th, 2011 at 4:30 am
– TRUE STORY. One mistake I had before that I was so into the details of making my website look good that I overdo everything especially the colors.The result was colors are too strong to the point that it’s so disturbing you cant pay attention to the content. 🙁 good color combination is very important. I say, simplicity is the key!