Skip to content Skip to footer

Introduction to colour contrast

An illustration of 3D film glasses, reflecting the disorientating effect of poor color contrast.
Article content
  • The importance of colour contrast in ensuring all users can access your content, particularly those with colour blindness, and disabilities such as Dyslexia and ADHD.
  • What is meant by colour contrast and why you could not have white text against a white background.
  • The different grades the Web Content Accessibility Guidelines (WCAG) give for colour contrast explained.
  • How the colour contrast ratio’s used in these grades are useful guidelines when you text, colour contrast in software tools.

Achieving the right colour contrast is vital in ensuring content can be easily and comfortably read by the user. If your website is not legible to everyone, it’s not accessible.

 The importance of ensuring colour contrast is reinforced by the difference in how users perceive colour. You may see colour in one way, but some users cannot see colour at all or struggle to perceive shades of red or green.

Colour contrast can affect people with disabilities such as dyslexia or ADHD. If you already find it difficult to read and concentrate, having colours which affect legibility can make this task even more challenging. As with all accessibility, it is about being empathetic to the user and considering these differences from the outset of the development of your design.

Useful Tip

For more information on colour blindness and its effect on how you perceive colour. I would highly recommend Regine M Gilbert’s inclusive design for a digital world, which goes into great detail on the different types of colour blindness and its effect. (Follow this link to buy Regines Book or read a summary of her Inclusive Design Book here ).

Colour contrast appears to be a relatively simple concept. Basically, you don’t want the background colour and the text to clash. For example, white text against a white background would have insufficient colour contrast. This is evident across the colour spectrum. ­However, whilst some shades may appear to initially contrast sufficiently, on closer examination, the level of contrast is not always sufficient. This is where you need to examine spend more time developing your colour scheme.

Understanding the baselines for grading colour contrast.

It is here that you need to plan your approach to using colour effectively. This starts with an understanding of the benchmarks that you need to hit.

Web Content Accessibility Guidelines (WCAG), the organization responsible for regulating accessibility, uses a grading system which involves three grades A, AA, and AAA. A being the lowest, which is rarely used, these days most organisations will treat AA as the minimum.(Read this Web Aim Article for more on these grades)

In the context of colour contrast, each level, with the exception of A, has specific requirements for colour contrast, which are measured in ratios.

AA dictates there must be a colour contrast of 4:5:1 for the difference between the background and body text. The ratio for larger text (anything bigger than 18px) should be 3:1. This also applies to forms and other elements such as buttons.

AAA dictates there needs to be a contrast of 7:1 for body text and 4:5:1 for larger text and graphical elements.

Don’t worry about the exact maths of these ratios, software can do this for you. The important thing is to keep these figures in mind when you get data on your colour contrast from different sources of software. This will allow you to assess how close or far away you are from reaching a different accessibility level.

This section has outlined the core reasons why colour contrast is important and how it is assessed. In the next section, we outline how you can plan and use tools to make sure your website has the correct level of colour contrast. (read article on colour scheme planning here)

Leave a Reply

Your email address will not be published. Required fields are marked *