More topics

Using colour and contrast

Publication date: August 13, 2019

Good colour contrast ensures content is readable and understandable for everyone. It takes into account differences in how people see, as well as how devices or environmental factors can affect vision.

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.

Contrast requirements

Consider if there is enough contrast between the text and the background. Light colours on white backgrounds may look nice, but can make text difficult to read. To meet accessibility requirements, the contrast ratio between text and background must be at least:

  • 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.

Colour is not just for text

Colour contrast also applies to icons, buttons, form fields and other visual elements.

Text over images

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

Branding

Text that's part of a logo does not have a minimum contrast requirement. However, be careful when applying logo colours to other content, as branding colours are often reused for headings, links and buttons.

Do not rely on colour alone to convey a message

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 colour alone (such as blue text) to indicate a hyperlink without also underlining it. There must be more than one visual cue. This applies to:

  • Links
  • Errors
  • Required fields
  • Status indicators
  • Charts and graphs

Resources

Related Web Content Accessibility Guidelines (WCAG)