Colour contrast

The more similar two different colours are in terms of brightness, the harder it can be to tell them apart. This is especially true for people with low vision or colour blindness, but can apply to everybody in certain situations, such as 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 images, 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 is useful to know how to check for colour contrast issues, 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

Companion video: Fix contrast issues with WebAIM Contrast Checkers and ColorZilla

Colour contrast tools

• 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 that the image you choose provides enough contrast for the text to be legible. Depending on how your website has been designed, 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 tool for checking the contrast of text on a background image.

Minimum requirements for WCAG conformance

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.