Using colour and contrast
Estimated read time: 1 minute 24 seconds
Colour and contrast impact how people read your content. Some things to consider:
- Is there enough of a contrast between the text and the background colour? Light colours on white backgrounds may look nice, but it can make the text difficult to read.
- If you couldn’t see the colour, could you still understand everything the design is communicating? For example, are you using blue to indicate a hyperlink without underlining the text? Don’t use colour alone to convey meaning.
Who does this affect?
- Mei has astigmatism which causes blurred vision. Light grey font on a white background is difficult for her to read.
- Amari is colour blind. They have difficulty seeing links that are written in blue but are 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)
- 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.
Text that's part of a logo has no minimum contrast requirement. But still, be careful with your design as often logo colour schemes 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.
- Understanding colour contrast requirements (YouTube tutorial)
- Colour Contrast for Developers (YouTube tutorial)