Colour Contrast

Not all users can easily distinguish between colours. They may be colour blind or have a cognitive impairment that changes the way they colours used on the page a perceived. As a result there must be a clear distinction between foreground and background colours you use.

The contrast ratio between the background and foreground colours must be:

  • 4.5:1 for standard text
  • 3.0:1 for large text

There are a number of online tools and browser extensions available to test colour contrast ratios and suggest alternatives.

Link Colour

If the links in your main content area are not underlined (or have some other physical indicator) they must have a 3.0:1 ratio between the link colour and the surrounding text (as well as a 4.5:1 ratio with the background colour).

Techniques

If a background colour adjustment is not possible, consider changing the colour and/or size of the foreground text.

Read the Guideline

  • Checklist

    chevron_right

    Key things to remember

    • Color is not the sole means of conveying information
    • Colour contrast within acceptable ratios