Colour and Contrast

Is there enough contrast between foreground and background colour?

Why it’s important

Renee has low vision and needs content to have enough contrast to read it.
Rawiri is red-green colourblind. Rawiri can’t make sense of information conveyed with colour alone.

Use a colour contrast(this link opens an external website) tool and test that the contrast between the text and background is greater than or equal to 4.5:1.
Use an automated tool with Mozilla(this link opens an external website) or Chrome(this link opens an external website) to quickly scan for colour contrast problems.
When using colour gradients use a colour picker to compare the lightest part of the text with the lightest part of the background. Then compare the darkest part of the text with the darkest part of the background.

Last modified: 13 May 2021