Colour contrast – It’s not just an accessibility thing

Posted by on September 22nd, 2012 in ,

Sometimes when people hear me talk about colour contrast I can guess what’s going on in their heads:  “What’s the accessibility guy going on about now?”, but to me, colour contrast is one of the most important aspects of web design, not just accessibility.

The simple fact of the matter is that if text does not have sufficient contrast compared to its background, people in general, not just those with visual impairments / deficiencies will have problems.

Let’s forget for a second that colour contrast is an accessibility issue, and focus on the fact that good colour contrast is good practice in design.

The job of the designer (web / print / whatever) is tell a story and communicate a message, and in the digital world, this means not only getting people to interact with your webpage or application, but getting them to read your content.

With people said to leave webpages within 10-20 seconds, you don’t have much time to make sure your message gets across and that the user takes the action you want them to.

More and more people are using smartphones, tablets or devices other than desktop computers to browse the web, and as a result, it means that they can access information on the internet at ANY time.

A by-product of the rise in ‘smart device’ usage is that designers and developers of digital content have lost some of the control they once had, and text size one area in particular where this control has been lost.

The text-size displayed depends on a combination of the size defined in the code and the user’s display or user-agent settings. As a result, good colour contrast is vital.

Why? Because you need to make sure your content is readable in all conditions, and the contrast between text and background is a major contributing factor to the readability of a website.

Low contrast irritates the reader and causes eye fatigue. For example, try reading the text below:

This is an example of low contrast

Combine low contrast and variable text sizes with the possibility of poor light conditions (given the fact that you can use your smart device anywhere) and it makes it difficult to differentiate colours, making it more difficult and in some cases near impossible read the info on the screen.

On the other hand, using high-contrast foreground/background colours allows for reading without squinting or experiencing eye fatigue.

The example below is probably an extreme case of a high contrast foreground/background combo, but it’s quite obvious when compared to the previous example that it would be easier to read, regardless of the device it’s viewed on.      

This is an example of high contrast

So, what’s the point I’m trying to get across in this blog post? Everyone benefits from a colour combinations that are easy on the eye; it’s not just an accessibility thing.