Colours

Colour Use for Learning

The Basics

For online learning content, the use of a limited number of colours is the best practice. This evidence-based suggestion is rooted in cognitive load theory, and research which shows that:

  • "readers like additional color; and
  • color can help learning (see Dwyer, 1978); but
  • extra colors have to be used sparingly and consistently if they are not to confuse the readers;
  • some colors stand out more than others, so it is unhelpful to use a range of colours on the same page" (Hartley, p.921)

Limiting extraneous visual information, such as colour, can help learners focus on learning. 

UBC Canvas Colours

Most often you will see that the Learning Management System (LMS) has adopted institutional colors. The UBC Canvas LMS uses the following UBC brand colours.

#002145
#0055B7
#F5F5F5
#FFFFFF

These colors are used in the main navigation menu, bread crumbs, visited links, and other areas in the Canvas learning environment. The colors selected are versatile and the contrast ratio of these colors is in compliance with the Web Content Accessibility Guidelines Links to an external site.. 

Using black for text and standard dark blue for buttons and other shapes ensures that your course looks professional and part of the UBC brand.

ETS Canvas Template Recommendations

In addition to the UBC Canvas colours, any customized formatting in the ETS templates uses neutral greys.

#002145
#0055B7
#F5F5F5
#FFFFFF
#404040
#DEDEDE
#F5F5F5
#000000


Limiting the additional colours to neutral shades of grey helps learners as it reduces visual complexity. A light grey and a dark grey are used in the template and sample pages so that the text and background colour combos are readable; background combos using medium tones can often reduce legibility.

Literature on the design of online learning materials also supports the need for consistency, as students may feel lost as they navigate from course to course if colour schemes or even course layouts change.

Universal Design for Learners

This color scheme is designed with consideration for students with visual disabilities, cognitive challenges caused by ADHD, and anxiety. While this change may be made for some, they in fact benefit all learners.


Please note some program areas, such as MET, ECED, and NITEP have customized templates, which are different than this style guide.

References