Accessible Colour Choices

Overview

Colour is a powerful way to convey information or improve aesthetics, but colours are not experienced by all people in the same ways. This guide provides guidelines for accessible colour choices, which can reduce barriers that may limit how people navigate, understand, and enjoy your work. You should aim to follow accessible colours guidelines for everything you create, including text, images, and presentation slides. Regardless of the medium, accessible colour choices can improve the visual experience for everyone.

Rationale

Colour is an important part of any design and affects how people are able to visually understand your work. Accessible colour choices will make it easier for everyone to read and understand your materials.

Relying on colour alone to convey information (such as including a pie chart without any labels) limits your ability to communicate. This also increases the cognitive load for your audience, as they have to work harder to understand what you are trying to convey. This doesn’t mean that you should avoid the use of colour, but that you should make considerate decisions on how to use colour and ensure that you are using it in conjunction with other methods of conveying information.

When making colour choices, it’s also important to ensure that your colours are accessible. The use of accessible colours ensures that information is perceivable to more users and reduces the risk of overstimulating content. Web Content Accessibility Guidelines (WCAG) 2.2 require that colour is not the only way of perceiving information and provides guidelines on appropriate contrast ratios for text and backgrounds. The AODA also requires that WCAG guidelines are followed.

Guidance

Colours are generally used to either convey information or improve the aesthetics of a piece. Both uses require specific accessibility considerations.

When using colour to convey information:

  • Use colour consistently
  • Use high contrast colours
  • Ensure colour palettes are colour-blind safe
  • Don’t use colour alone to convey information

When using colours aesthetically:

  • Use simple colour palettes and avoid adding too many colours (try to keep the number of colours in your palette between 3-5)
  • Choose muted colours

Recommendations

Colour Contrast

Colour contrast is the numerical number of the difference between two colours. Colour contrast is most relevant when making decisions on two adjacent or overlapping colours (e.g. the background and foreground) in a document. Higher contrast between the page and text colours are more easily accessible.

An icon with a check mark.Try

  • Using bright colours deliberately and sparingly
  • Using muted backgrounds to reduce stimulation
  • Using off-white instead of pure white
  • Using dark grey instead of black

A note on sensory differences: Very high contrast colour combinations and bright colours can be overstimulating. Lower contrasts can improve readability for some learners with dyslexia (Rello & Baez-Yates, 2012). There is no single combination that works for everyone. Where possible,offer colour contrast options or test designs with a range of users.

Colour Blind Safe Palettes

Colour blindness or colour deficiency occurs when an individual has a decreased ability or inability to distinguish certain colours. Use colour combinations that have been tested for different types of colour-blindness and verify them using a contrast checker.

Tip: If you can still clearly distinguish your colour palette when it is put into greyscale, it will be colour-blind safe. You can check this by converting an image of your palette to black and white using a free software such as the Adobe Express Image Converter.

An icon with a check mark.Try

  • Using bright colour palettes sparingly and instead using more muted tones to reduce stimulation.
  • Using contrast checking tools to ensure that foreground and background contrasts are high.
  • Pairing colour with other methods of conveying information, including text labels, icons, or patterns.

An icon with an X mark.Avoid

  • Relying on colour alone to convey information.

Resources

Web AIM Contrast Checker is a web-based application which will allow you to determine the contrast between different colours.

Accessible Fonts created by the National Network for Equitable Library Service is a document that details specific accessible font and style guidelines various mediums including documents, presentations and websites.

Colourblind Safe Colour Schemes by the National Center for Ecological Analysis and Synthesis explains why colorblind‑safe palettes are essential for accessible communication and offers practical guidelines, recommended tools, and tested colour schemes to ensure colour palettes remain readable for people with colour vision impairments.