Skip to main content

20-20a Westminster Buildings, Theatre Square, Nottingham, NG1 6LG(0115) 888 2828

Accessibility and Colour Contrast: Why Does it Matter?

Written by Cheryl Swan on

No matter what digital platform you look at, there are elements of colour found across an array of site features. Having sufficient colour contrast ratios, makes sure that everyone can perceive your information. In turn, giving equal access to your content.

In this blog, you’ll learn why accessibility and colour contrast are so important and find out how to assess contrast ratios and learn simple adjustments to become legally compliant. 

What does having contrasting colours mean?

Having sufficient colour contrasts are imperative if you want to create an inclusive space for your online users. 

Fundamentally, it comes down to having enough contrast between background and foreground colours. In particular, this is crucial for your text to be legible for everyone to read. 

Low contrast scores occur when two similar colours are used, including shades of grey. This makes it difficult for users to differentiate between the two contrasts.


Accessibility and Colour Contrast – Who is affected by poor colour contrasts

  • 1 in-12 men and 1 in-200 women have a colour deficiency.
  • At least 2.2 billion people have a near or distance vision impairment across the globe.
a man sat in front of his laptop adjusting his glasses, whilst trying to read a graph on his laptop screen

These users may find it difficult, or sometimes impossible, to interact with a platform if colour contrasts are not sufficient.

Resulting in users:

  • Missing out on key information.
  • Struggling to navigate a website. 
  • Being unable to interact with site elements. 

This is why the use of inclusive colours is a necessity across your site and its elements.


Web Content Accessibility Guidelines (WCAG) compliance

accessibility symbol

There are WCAG requirements that websites need to adhere to in order to be compliant with colour contrast ratios. But don’t worry; once you know how – it’s an easy fix and a quick win in your journey towards becoming accessible.

The visual presentation of text, and images of text, need to have a contrast ratio of at least 4.5:1. This is except for the following areas:

  • Large text (which is defined as 18 point or larger), needs to have a contrast ratio of at least 3:1. 
  • Decorative incidental text, or images of text, that serve no user purpose do not have to meet colour contrast requirements.
  • Text that is part of a logo or brand name also has no contrast requirement.

How to check colour contrast ratios

Visual checks aren’t always conclusive. Luckily, there are numerous free colour contrast checkers available on the web to help you to check your platforms. 

A useful evaluation tool is the WebAIM Contrast Checker Tool. Here, you will need to enter a foreground and background colour in a RGB hexadecimal format (e.g. #FD3 or #F7DA39) or you can choose a colour using the colour picker tool. If it fails to meet sufficient contrast levels, you can use the slider to adjust the contrast. Once you have found a sufficient level you can then replace the colours accordingly.  

Another useful tool that you can utilise is WAVE. This will scan your website to examine colour contrasts, pinpointing where alterations are needed.

Often, only slight tweaks are needed, but these small adjustments will make a large difference to your online users.


Examples of good and bad colour contrast ratios

If using a dark background colour, for example in a table heading, ensure there is enough contrast. For example:

An example of good colour contrast ratios

You can easily read all of this text

An example of poor colour contrast ratios

It is difficult to read all of this text

Similar with headings on a white background, you don’t want the font to be a shade too light:

An example of good colour contrast ratios:

You can easily read all of this text

An example of poor colour contrast ratios:

It is difficult to read all of this text


What site contrast elements could enhance the user experience

colour contrast icon

Aside from your web page’s text being a primary fix, there are other adjustments you can make to enhance your site’s design. These alterations can aid with items such as navigation or ease of use when completing site elements. 

  • Avoid using a bright white background. Go for an off-white to avoid glare. 
  • Check colour contrasts on items such as buttons, links, call-to-action boxes, error messages and headings to aid your user-flow. 
  • Check that items are not greyed out to display when something is inactive.
  • If possible, adjust your branding colours to also be user-friendly.
  • Assess that online documents and presentations can be read by everyone. 
  • If you have charts, graphs, and maps present, check they are inclusive.
  • Inspect your video content and imagery if they contain text. 
  • Make sure users have a clearly visible reference as to where they are on a page if using a keyboard only to navigate a site. 
  • If using a high-contrast mode, check these also have sufficient contrast ratios. 

Don’t use colour to convey information 

Users with colour deficiencies may not be able to distinguish between certain colours, such as red and green. This is why it’s important not to use colours instead of labelling content to convey information.

For example, someone might place a red and green circle to convey if something is good and bad. Without a description, this would leave the users unaware of what they should be avoiding.

A poor example:

New items in stock are shown in red

Laptop

Monitor

Mouse

A good example:

New items in stock are highlighted

Laptop

Monitor (new in stock)

Mouse

Instead of using colours you can also:

  • Use icons or shapes.
  • Provide meaningful text labels.

By making these simple fixes to your content, you will enable inclusive access for all of your online visitors. 

a laptop and a camera, with an icon with a pen and pencil overlay

Need help with inclusive design?

Our accessibility experts can provide web accessibility training for designers and developers. Giving you the confidence in knowing you are designing with accessibility at the forefront for all of your users.