Module 1 Book: Formatting Course Content so it's Accessible

Colour

Colour can be used effectively in your course content to make it more vibrant and convey or emphasize information; however, it should be used sparingly and with purpose. If not used with care, including colour in your content can be distracting or difficult to interpret. This is especially problematic for students who are visually impaired, colour blind, have poor contrast vision, or are accessing materials through a monochrome display screen or by printing them.

Contrast

The first question you should ask yourself is whether there is sufficient colour contrast between foreground elements and background elements. Contrast refers to the “hue, lightness and saturation of text, images, and background” (Coolidge, Doner, Robertson, & Gray, 2018). Dark text on light backgrounds will be readable to most users, but some require the opposite. If including lighter text on a dark background, try bolding the text to improve readability.

Links should also be visually distinct from the background and surrounding text colour.

How do you know if your content has sufficient colour contrast to be accessible? The Web Content Accessibility Guidelines (WCAG 2.0) recommends that the “visual presentation of text and images of text has a contrast ratio of at least 7:1.” Large-scale text, decorative images, and logos should have a minimum contrast ratio of 4.5:1.

Here are a few tools recommended by the Accessibility Toolkit – 2^nd Edition (2018) to help evaluate your contrast ratios:

Using Colour to Convey Information

The second question you should ask yourself is whether colour is being used as the only means of conveying information. This could include charts or graphs, or the use of colour to highlight certain information. If so, some students may not be able to interpret the content. To test this, try changing your content to greyscale to see if it can still be interpreted. On Windows computers: select Start > Accessibility > Colour Filters > turn on the colour filter switch > select Greyscale.

To improve accessibility, try using strategies such as adding surrounding text with additional context (see Images above) or adding patterns and high contrast colours to coloured graphs or charts. You can also include text (e.g., “note:”) or symbols (e.g., add an asterisk) to indicate highlighted words since they won't be identified by screen readers.

For example, instead of only adjusting the font colour to indicate weeks that include a quiz, as shown here:

Week	Topic
1	Information Processing
2	Lifespan Development
3	Social Psychology
4	Psychological Disorders

Also include asterisks on weeks that include a quiz:

Week	Topic
1*	Information Processing
2	Lifespan Development
3*	Social Psychology
4	Psychological Disorders

To summarize, if you are still unsure whether the colour included in your course content is accessible, ask yourself the following questions:

Have you…	Then be sure to…
Presented content on a coloured or textured background?	Include sufficient contrast between the foreground element and the background element
Added links in your content?	Confirm that the colour of your links is distinct from the colour of your background and surrounding text
Used colour to convey information?	Not solely rely on colour to convey information by adding additional ways for students to interpret

(Adapted from Coolidge et al., 2018)

Check Your Understanding