Guide to accessible content

Colour contrast

Page contents

The closer two colours are in terms of their brightness, the harder it can be to tell them apart. This is especially true for people with low vision and/or colour blindness, but can apply to anyone in certain situations, such as a screen affected by sun glare.

Companion video: Web Accessibility Perspectives: colours with good contrast

To ensure that text and images can be perceived, the Web Content Accessibility Guidelines (WCAG) specify minimum levels of colour contrast. Text requires a greater contrast level than non-text items (e.g. images, borders on form inputs, bars on a chart) but images of text must be treated as if they were text, unless purely decorative.

Part of our design and development process at Studio 24 is to choose accessible colour combinations for your website, but it’s useful to know how to check colour contrast, especially if you create or commission your own graphics.

How to check colour contrast

Companion video: Find and fix contrast issues with the WAVE extension

Colour contrast tools

  • Colour Contrast Analyser: can check contrast in files and documents as well as on web pages.
  • Contrast Checker: can check the contrast of text against an object background, e.g. a button, and check the contrast of the object background with the page background.
  • WhoCanUse: includes a simulation of direct sunlight on a screen and night mode.
  • Contrast Ratio: great for testing semi-transparent colours.

Checking text on top of images

If your website allows you to position text over the top of a background image, be mindful whether the image you choose provides enough contrast for the text to be legible. The text may sit over a different region of the image at different screen sizes (e.g. mobile versus tablet versus laptop).

There is a website for checking the contrast of text on a background image.

Minimum requirements for WCAG conformance

Text (and images of text)

Is the font-size at least 24px, or is the font-weight bold and the font-size at least 18.5px?

  • If yes,
    • The contrast ratio must be at least 3:1 for WCAG level AA
    • The contrast ratio must be at least 4.5:1 for WCAG level AAA
  • If no,
    • The contrast ratio must be at least 4.5:1 for WCAG level AA
    • The contrast ratio must be at least 7:1 for WCAG level AAA

Images and user interface (UI) elements

Aim for a minimum contrast ratio of 3:1 between adjacent colours for WCAG Level AA. UI elements include things like:

  • buttons,
  • icons that convey information,
  • lines in line graphs, columns in bar charts and slices in pie charts,
  • diagrams and infographics.

There are exemptions for:

  • logos,
  • flags,
  • photography,
  • where a graphic cannot be represented in any other way, such as screen grabs, medical diagrams or heat maps.