Using colour and contrast

Publication date: August 13, 2019

Colour and contrast impact how people see your content. Some things to consider:

Is there enough of a contrast between the text and the background? Light colours on white backgrounds may look nice, but can make the text difficult to read.
Do not use colour alone to convey meaning. If you could not see the colour, would you still understand everything the design is communicating? For example, are you using blue to indicate a hyperlink without underlining the text?

Who does this affect?

Mei has astigmatism which causes blurred vision. Light grey fonts on a white background are difficult for her to read.
Amari is colour blind. They have difficulty seeing links that are written in blue but not underlined. Underlining a link makes it easier for them to see.
Jeff likes to read outside. The glare from the sun makes it hard for him to read the screen on his phone. Higher colour contrast text is easier for him to see.

Steps to take

To be accessible, the dark/light contrast between text and background must be greater than or equal to:

4.5:1 for small text (under 14 point in size)
3:1 for large text (14 point or larger)

Check your contrast

Measure the contrast between text and background colours using a tool like WebAIM’s Colour Contrast Checker.

Branding

Text that's part of a logo has no minimum contrast requirement. But still be careful with your design as colour schemes from logos often get used for wider branding.

Text over images

Use text over images sparingly. If you must use text over an image, add a solid background behind the text or a dark overlay to the image.

More topics