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
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.
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 - 2017 Web Page Mistakes. All rights reserved.
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