Foundations: colour contrast

Posted on Friday, 4 February 2022 by Henny Swan in Design and development

Good contrast is about using colours that provide enough variation between the content and background. This is particularly important for people who have conditions that affect vision or colour perception, as well as people browsing on mobile in different light conditions.

People find it difficult to read content for many reasons:

Colour Vision Deficiency, otherwise known as colour-blindness, means some people have difficulty recognising certain colours or any colours at all
Ageing impacts people's ability to see colours
Differences in device size, resolution and contrast can all affect colour quality
Bright conditions, such as sunlight, can reduce someone's ability to see what's on the screen clearly

Another consideration is the psychological impact colours can have on some people:

People with Autistic Spectrum Disorders can be sensitive to sensory information including very bright or high-contrasting colours
People with Dyslexia can find text on a pure white background dazzling and difficult to read
People with low vision can find text on a patterned or textured background difficult to read

A black and white photo of Steve, an older white man with thick white hair. He is standing facing into the camera while he holds his book or poetry and photos open in front of him — Steve, a deaf and low vision photographer and poet, would like to see better use of colour contrast and bigger font sizes in menus.

Colour contrast ratios

A colour contrast ratio describes the colour of an object (such as text) against the colour of its background. It's written as object:background - for example 4.5:1.

In some cases, it's necessary to think about more than one contrast ratio per element. For example, the colour of a button must contrast clearly against its background, and the button's text label must also contrast well against the button's colour.

A simple button with white 'Submit' text on a light grey background. The button is on a white background. — Typical example of a button with bad contrast. The contrast of the white (#FFFFFF) "Submit" text against the light gray (#CCCCCC) background is just 1.6:1.

A simple button with white 'Submit' text on a very dark grey background. The button is on a white background. — Typical example of a button with good contrast. The contrast of the white (#FFFFFF) "Submit" text against the dark gray (#222222) background is 15.9:1.

Contrast rules for text

There are two contrast requirements for text:

Large text (at least 24px, or bold and at least 19px) should have a minimum contrast ratio of 3:1
Small text (less than 24px, except for the bold rule outlined above) should have a minimum contrast ratio of 4.5:1

Contrast rules for graphics and user interface components

A contrast ratio of 3:1 is required for graphics containing information needed to understand the content and interactive elements. This includes form fields, links and buttons, and any visual cues that indicate their state.

Grey borders used for email and password form inputs set against a white background — Typical example of form fields with bad contrast on the input outline. The contrast of the white (#FFFFFF) against the light gray (##DADBDA) outline is just 1.4:1.

Exclusions to the contrast rules

There are some types of content that don't need to meet colour contrast requirements:

An image of text that is not essential to understanding the meaning of the content
A decorative graphic that does not have any meaning or purpose
Text which is part of a logo or brand identity

Tips for colour contrast

View your content on a mobile when outside to see if it is still readable in different light conditions
Always try and exceed the colour contrast minimum, not just meet it

More information

Next steps

Read more accessibility foundations posts, our WCAG primer or how our design system assessments can help you create an accessible design system and accompanying documentation.