Accessibility FAST

Accessible Colour

Brightspace colour tool

1 in 12 men and 1 in 200 women have some kind of colour vision deficiency.[1] To create inclusive content foreground information must have sufficient colour contrast against background colours. Additionally, it is essential that colour is not the only means to convey or emphasize information.

On this page:

Accessible Colour

Consider that good colour practices aren’t just for those who see colour differently. Better practices are

Essential for

  • Readers with a colour vision deficiency.
  • Readers with low vision.
  • Readers on an electronic paper screen, like an e-reader.

But also benefit

  • All readers, regardless of access means.
  • Readers that customize appearance and style.
    • Effective use of colour ensures information looks similar regardless of device and user settings, such as dark or night mode or other custom contrast settings.
  • Readers that print content in black and white.
    • Content that relies on colour or lacks sufficient contrast will lose meaning in black and white.
  • Readers experiencing eye fatigue.
  • When viewing content in poor lighting or when there is glare from the sun.

Colour Contrast

Screenshot of a colour contrast analyzer showing that Langara branded orange does not pass accessibility standards.For proper colour contrast, aim for at least a 4.5:1 ratio. To (over)simplify that ratio, that means the text is 4.5 times brighter than the background. Large text (size 18 point or greater) or bold 14 point or greater, requires only a 3:1 ratio to be accessible. Logos and decorative images have no colour requirements.

As an example of an accessible contrast ratio, black text on a white background has a ratio of 21:1. Orange text on a white background (or vice-versa) has a ratio of 3.37:1 and does not provide sufficient colour contrast.

Colour combinations to avoid:

  • Red and green
  • Green and red or blue or brown or black
  • Light green and yellow
  • Blue and purple of grey

Use dark font colours on light backgrounds (black text on a white page for example) and light font colours on dark backgrounds (for example white text on a black background)

Use of Colour

Further, don’t rely on colour alone to convey information or emphasize importance. Accessible practice is to add visual or text equivalents to colour, for example:

  • Use colour, shapes, and text in charts and diagrams.
  • Add text indicators to highlighted table cells.
  • Include reminders like “important” or “required” in addition to using bold or a specific font colour.

If you rely on colour alone, readers with colour vision deficiency, using screen readers or text to speech software, or those viewing in black and white will miss the meaning.

Digital Colour

Digital colours are specified using colour codes. The most common colour codes are Hexadecimal (hex), RGB, and HSL. Each of these colour codes express colours using different values. Try entering a colour in this Color Converter tool to see how colours can be coded.

W3 schools colour code converter showing Langara orange colour values
Hex values are referred to in this guide, but the principles are applicable to any colour code system.

Colour Code Tools

There are many options for finding colour codes.

Use these tools to find colour codes and contrast checking tools to verify accessible colour contrast.

Contrast Checkers

WebAIM (Accessibility in Mind) is an exceptional resource that has a contrast checker (that can be added as a browser tool), a link contrast checker, and additional reading on colour contrast.

ACE (Accessibility Colour Evaluator) is an excellent tool for checking colour contrast. You can set multiple colours for multiple elements (background, text, link, hover, etc.) and see the corresponding colour contrast ratios.

Consider some of these as well and find what works best for you:

Color Contrast Checker

Palette Checker

Who can use this color combination?

Color Blind Web Page Filter

Safe Hexadecimal Color Codes



  1. Colour Blind Awareness, "About Colour Blindness"
definition

License

Icon for the Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License

Accessibility Handbook for Teaching and Learning Copyright © 2023 by Briana Fraser and Luke McKnight is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License, except where otherwise noted.