University of Auckland logo

Stay informed

Receive updates on teaching and learning initiatives and events.

Photo by Katya Ross on Unsplash

3. Colour

The use of colour is an important consideration in course content development in Canvas.

DO

Ensure colours have sufficient contrast

Figure of black text on a pale amber background

Use font styles along with colour

This is important.

DON’T

Use pastel shades

Figure of white text on a pale amber background

Use colour alone to denote hierarchy and/or meaning

This is important.

Fixing issues with UDOIT

Problem 1: Avoid using colour alone for emphasis

Meaning

When emphasising text, you may use colour (with sufficient contrast). However, you should also apply some other form of emphasis, such as bold or italics. This ensures that screen reader users are aware of the text’s importance.

How to fix it

In UDOIT Advantage, click the Review button for more information. Check the boxes for the change(s) to resolve this issue and click Save.

Resolve using colour for emphasis with UDOIT

UDOIT flags where colour has been used for emphasis and offers alternatives: make the text bold, make the text italicised, or remove colour.

Problem 2: Insufficient text colour contrast with the background

Meaning

Colour contrast is the difference between text and background colours. Most people prefer white text on a black background (high contrast) over orange text on a red background (low contrast). This is especially the case for people with low contrast sensitivity or colour blindness, who may struggle to discern meaning when insufficient contrast is provided.

Conversely, some people with high contrast sensitivity (e.g., Irlen Syndrome or visual stress) may struggle with extreme contrast. This can lead to discomfort, such as eye strain and headaches. Therefore, providing balanced colour contrast is important.

How to fix it

In UDOIT Advantage, click the Review button for more information. Change the colour of the text and/or the background until the contrast ratio indicator in the UDOIT tool changes to a valid ratio.

Contrast ratio colour selector in UDOIT

UDOIT allows you to adjust the foreground and background colours and indicates whether they have a valid contrast ratio.

Getting it right in Canvas

Choose font and background colours that provide good contrast. The accessibility checker in Canvas’ rich content editor can scan your content as you create it. One of its features is to report when there is a contrast issue with text.

Canvas' rich text editor with the accessibility checker tool highlighted

Canvas’ rich text editor with the accessibility checker tool highlighted.

Page added 27/05/2024

Send us your feedback

What do you think about this page? Is there something missing? For enquiries unrelated to this content, please visit the Staff Service Centre

This form is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.