Skip to Main Content
You are now in the main content area

Colour & Contrast

Contrast

Colour contrast is the difference in brightness between two or more colours, such as foreground text and its background. Contrast is important because it affects how easy it is for people to see and read content.

  • Avoid low contrast colour combinations. Avoid using light colours on lighter backgrounds, such as light gray text on a white background. It can be difficult for people to read, especially those with visual impairments. 
  • Use high contrast colour combinations. Use darker colours on lighter backgrounds. 
  • Avoid very high contrast. Very high contrast text can hinder readability, especially for individuals with dyslexia. Instead, opt for black text on an off-white background for example.
  • TMU community members should follow brand guidelines when designing content. TMU's brand colour combinations adhere to accessibility standards.

Required contrast ratios

The following contrast ratios are required to meet Level AA of the Web Content Accessibility Guidelines (WCAG) 2.0.

  • Normal size text (or body text) requires a contrast ratio of at least 4.5:1.
  • Large size text (or heading text) requires a contrast ratio of at least 3:1.
    • In Microsoft Office/Google Workspace/Apple iWork, large text is defined as 14.25 points and bold or larger, or 24 points and larger.
    • If designing a website with Cascading Style Sheets (CSS), large text is defined as 1.2em and bold or larger, or 2em and larger.
4 examples of high contrast colour combinations.
4 examples of low contrast colour combinations.

Testing for contrast

Use free tools to automatically check for colour contrast issues.

Colour alone

Some people perceive colour differently, therefore colour should never be the only way of conveying information or differentiating between elements.

  • Use a combination of shapes, high-contrast colours, textures, or text.
    • For line charts, use different dash patterns and dot shapes.
  • Underline links in addition to colour, so it can be easily distinguished from surrounding text.

Use of colour in graphs and charts

Graphs and charts can be difficult to understand, as meaning is often conveyed exclusively through colour. When graphs rely solely on colour to convey information, individuals with colour blindness may have difficulty interpreting the data.

  • A secondary indicator is used to associate the labels with the chart slices. The colour of the slices no longer matter. 
  • The text labels have strong and consistent contrast. 
  • Each segment is separated by a subtle yet discernible border to effectively demarcate its boundaries.
Example of effective pie chart in greyscale.

Here is the same image in greyscale. It's easy to interpret the data regardless of colour. 

 

Example effective pie chart where the labels point to each pie slice. No contrast issues.

  • For people who are colourblind, certain colour combinations are challenging to distinguish from another. 
  • Some labels are difficult to read because of the low contrast.
An example ineffective pie chart that uses colour alone to convey meaning. The percentages are placed on each pie chart, with various contrast ratios.

Here is the same image in greyscale. It's difficult to differentiate some of the slices and match them with the legend items.

Example of an ineffective pie chart in greyscale that shows evident issues for people with colour blindness.

Testing colour combinations

  • If you have a printer connected to your device, you may be able to use your authoring tool's Print Preview feature to preview the page or document in black and white. The keyboard shortcut Ctrl + P or Command + P should prompt Print Preview. 
  • Alternatively, in Google Docs and Microsoft Word, you can temporarily recolour the image to black and white. Select the image and view the formatting options. 

Are you able to perceive the information easily?

Content editors and web developers

Sa11y is a content accessibility checker designed to highlight issues on web pages. Sa11y includes a feature where you can toggle various colour filters to test colour combinations.

  1. Install the Sa11y bookmarklet. (external link) 
  2. Test web pages with Sa11y using various colour filters. (external link)