Colour contrast for accessibility - ELA Hub

Four accessibility icons with visual impairment highlighted

Find out how to make sure your colour contrast is accessible for everyone.

As soon as I became interested in digital accessibility, the one thing I couldn’t fail to notice was non accessible colour contrast. One of the basic principles of making your colour choices accessible for everyone, including people with permanent, situational or temporary impairments, is that there is a strong contrast between the text that you use and the background colour or image that it sits on. At eLaHub we specialise in eLearning accessibility, but good colour contrast is just as relevant for your website, presentations, online documents and social media posts.

Why?

  • People with low vision often have difficulty reading text that does not contrast with its background.
  • People who are colour blind also find it difficult to read text which doesn’t have sufficient colour contrast.
  • Many older people find it difficult to distinguish colour and need strong contrast to make it easier to read content.
  • Users who are using devices in bright sunlight will also benefit from strong colour contrast.

Common errors

Here are a few of the most common colour contrast mistakes that we see and how they can be corrected.

A series of common mistakes with colour contrast often found in eLearning. The first example shows both background and foreground colour too dark. The next shows both background and foreground colour too light. The third example shows the background and foreground colour too similar. The fourth example shows text over an image which has different colours making it difficult to see the light text on the light portion of the image. The correction for this is a coloured semi transparent overlay over the image which makes it possible to see the text clearly everywhere. The final example is black text on a white background which is considered too glaring. The corrected version of this example is black text on a pastel blue background.

How do you know if your colour choices are accessible?

The best way is to use the standard set out in the Web Content Accessibility Guidelines (WCAG). These guidelines are the most widely used and recognised international accessibility standards. Despite the common perception that they are only relevant for websites, the standards actually apply to all online content. Since the introduction of the Public Sector Bodies Accessibility Regulations 2018, they are also the legal requirement for the public sector in the UK and will be mandatory from September 2020.

Standard 1.4.3 Contrast (Minimum) states that:

The visual presentation of text and images of text has a contrast ratio of at least 4.5:1

Still confused?

The best way to check if the contrast between your text and background meets the 4.5:1 ratio is to use a colour contrast checker. There are many checkers available, but our preferred one is the WebAIM colour contrast checker because it has the following features:

  • Pass or fail indicators for WCAG AA and AAA levels.
  • Pass or fail indicators for normal and large text size.
  • Lightness sliders which allow you to darken or lighten your preferred colours until they pass WCAG requirements.

Other useful links

Taking the time to check that your colour choices meet accessibility standards is one of the key things you can do to ensure that all of your online content is inclusive.


Back to top