Colour Contrast

19th January 2025

4 min read.

Why is Colour Contrast important?

> Key point: this assists people with low vision.

Colour contrast is crucial for people with low vision & colour-blind issues.

Good colour contrast ratios help people perceive content against the page, otherwise the foreground and background look the same. 

For example, think of a printout that had grey text printed on a dark grey background; it would make reading very difficult …   this is an example of a bad grey text colour contrast ratio.

The same can happen when colour contrast ratios are applied incorrectly to digital content, e.g. text, images of text, icons etc.

Poor colour contrast is one of the most common issues that causes problems with digital accessibility.

The international contrast ratio guidelines to follow are:

• Normal text foreground colour contrast ratio of 4.5 against a background ratio of 1 … referred to as colour contrast ratio 4.5:1 (normal size text is less than 18px / 13.5pt / 1.125em).

• Large text foreground colour contrast ratio of 3 against a background ratio of 1 … referred to as v ratio 3:1 (large size text is more than 24px / 18pt / 1.5em, or if written in bold font, then it relates to when text size is more than 18.66px / 14pt / 1.166em).

Why is Use of Colour important?

Use of colour alone to indicate links, is not recommended.

When text is used as a link without an underline, colour alone is not sufficient to indicate that it is a link for people with low or colour vision issues.  

In other words, those people may not perceive a word is also a link due to colour being the only thing that differentiates it from regular surrounding text.  

When a link receives focus, either from a mouse hover or keyboard tab, it is essential that link text colour has a sufficient contrast ratio with the page background, along with an underline to indicate it is a link.

The minimum required colour contrast ratio for non-text content is 3:1

Why is Non-Text Contrast important?

When we say Non-Text, we mean elements like button backgrounds, outlines & other graphic user interface items.

For example, not only is the text colour of a button important, but the colour of the button itself is important by how it contrasts against the colour of the page background.

Contact me today if you wish to know more about Colour Contrast & digital accessibility.