Choose high contrast colours
Summary: Make sure adjoining colours have enough contrast so certain users can tell them apart.
Some users’ vision isn’t strong enough to see when low contrast colours are used. People with low vision may not be able to read text or use graphics with poor contrast. People who are colour blind may also experience difficulties.
Contrast requirements for text
For text or images of text, you need to use a contrast ratio of 4.5:1. For large text, you can reduce the ratio to 3:1.
Large text is at least 18 points (roughly 24 pixels, 150% or 1.5em) or if bold, at least 14 points (roughly 18.5 pixels, 120% or 1.2em).
You don’t need to meet contrast requirements for text that is:
- part of a logo
- not intended to be read (for example, incidental or decorative text).
Contrast requirements for graphics
For parts of graphics that need to be understood, adjacent colours must have a contrast ratio of 3:1.
You don’t need to meet contrast requirements:
- for logos, flags or photos of people or scenery
- where certain colours are essential (for example, gradients that represent the amount of rainfall on a map)
- if the information is provided in another format (for example, if you add text labels to the graphic).
Examples
| Before | After |
|---|---|
In a document, light blue text at 11pts and a heading at 15pts and bold have a contrast ratio of 3.5:1 against the white background. |
The blue for the body text is darkened until it meets the colour contrast of 4.5:1. The heading text colour is not changed. |
Labels on a bar graph use a light grey that has a contrast ratio of below 4.5:1 against the white background. |
The graphic is edited, and a dark grey is used. |
Some of the adjacent colours in a pie chart have a colour contrast of less than 3:1 against each other. |
Each segment of the pie is given a dark border that provides good contrast against the colour it surrounds. |