There are a lot of things to consider when building or updating your website. You need to think about layout, navigation, SEO and color. Most people and companies will spend a lot of time choosing the “right” colors – the colors that look good together. But have you ever thought about how your website “reads” to someone who is color blind? They could be experiencing your website in a whole different way (and not necessarily positively!)
You can check to see how “color compliant” your site is by using a Color Contrast Check Tool. This not only helps in checking for how a site reads to someone who is color blind, but also how well the contrast is when you have two colors layered on top of each other (i.e. text on top of a navigation bar). The tool I use is the Snook.ca Colour Contrast Check.
Here’s an example… One of the sites I am currently working on uses a sea-foam green for their main logo color. So I wanted to incorporate that same color in their navigation menu. Here is the color:
When choosing the text color for the navigation bar, my initial choice was white – as there is a lot of white in the logo too and I thought it looked great. But then I ran it through the color contrast check – and it FAILED every measurement that they test for. It was an easy fix… I changed the font in the navigation bar to black. That quick change PASSED all of the measurements and I now know that anyone who has some type of color blindness can now read it. And honestly, as someone who is over 40, my eyesight isn’t the best anymore either. I could immediately see a change with the font looking crisper, clearer and easier to read.
So pick your colors carefully! Make sure your colors or not only complementary to each other – but also provide enough of a contrast for all of your visitors.