Image by Freepik from Freepik

Colour for online teaching materials

Written by JJ Cloutier 
Edited by Alison Fung
content review March 2024

About colour contrast and colour perception

Visual elements such as text, icons, and charts must stand out from their background clearly while being easily distinguished from similar elements around them. What is measured is the luminesce ratio between the foreground and background colour. WCAG 2.1 guidelines specify different contrast ratios depending on the text size and weight (thickness of lines within letters), graphic components, and colour contrast level.  

Many people use lower contrast to meet an aesthetic or creative theme, but the problem with low contrast overall for most users is that it degrades usability (Sherwin, 2015). Low contrast, according to Sherwin (2015), has the following specific effects:  

• Legibility suffers.  

• Discoverability and findability are reduced. 
• User confidence diminishes. 
• Mobile use becomes even more difficult. 
• Severely reduced accessibility for users with low vision or cognitive impairments.  
• Increase in cognitive strain.  

Problems using colour alone for emphasis

Colours (hues) are perceived differently by users with various equipment due to environmental factors, colour vision deficiencies and colour perception. Assistive technology, such as screen readers and text-to-speech, will not give users information about elements and text colour changes. Additionally, “screen readers don’t offer a way to search by colo[u]r.” (Office of Information Technology, n.d.) 

Since not all users have information about colour changes in the text, it is best not to use text colour alone to convey meaning (Quality Matters Higher Education Rubric, Seventh Edition) and to combine colour with another element to indicate emphasis. (Office of Information Technology, n.d.) Other formatting techniques such as underlining, bolding and italics are also not picked by screen readers or text-to-speech generators (Tempertemper, 2021); therefore, using another means to indicate importance. 

Instead, use colour with another element, such as shapes, patterns, and document formatting and wording to show emphasis or differences. Ensure that approaches other than colour, font size, and font are used to enhance the searchability of content for all users by applying heading styles, chapter marks, and other document metadata. 

Guidelines

Accessibility for Manitobans Act

The Accessibility for Manitobans Act (AMA) is a series of standards on accessibility with staggered deadlines. Based on the level of connection to the government and the number of employees, groups are divided into categories. Post-secondary education institutions are part of the public sector. 

The Accessible Standard for Information and Communication applies to both printed and digital information and communication for public and internal use. Organizations must “develop measures, policies and practices and provide barrier-free information and communication.” (Manitoba Accessibility Office, n.d.) 

This standard applies to creators of instructional materials (such as online course materials). Therefore, instructors in Manitoba need to ensure all new and updated online materials meet the standard “web content” guidelines. This guideline requires materials to meet or exceed WCAG 2.1 Level AA guidelines (Manitoba Accessibility Office, 2023).      

Post-secondary organizations must meet the Accessible Information and Communication Standard of the Accessibility for Manitobans Act (AMA) by May 1, 2024. 

We would like to highlight one exception: The requirements to meet WAAG 2.1 do not apply if the organization (in this case, a post-secondary institution) does not have direct control over the requested information, library resources, web content, or web application. 

Learn more about the AMA at Accessibility for Public Sector, including the various standards and exceptions.  

Quality Matters and Open SUNY Course Quality Review Rubric

Quality assurance rubric from both Quality Matters and Open SUNY Course Quality Review (OSCQR) talk about the contrast of text and importance of for readability as part of a quality course. 

Quality Matters (2023) mentions in its specific review standard 8.2 that the standard is not met if: 

• Colours are used arbitrarily. 
• Colours create a distraction. 
• Colours lack readability. 

Further in annotation of this section on readability includes ensuring text is in a contrasting colour to be clearly distinguishable from the background. (Quality Matters, 2023) 

OSCQR standard 18 highlights several suggestions you can do to ensure readability, which we incorporated in this resource page. The why of doing this is simple: “if learners are not able to easily read the course content, they may not succeed.” (Online Learning Consortium, n.d.) 

Accessible design tips

Be consistent

• Use the same colours across all the materials and modules of your course for the same elements regardless of application used to create the materials. 
• Be consistent. If you change the colour of a heading, for example, be sure to reflect that in other headings in your course (e.g. change the style or theme). (Online Learning Consortium, n.d.) 
• Ensure link colours are consistent throughout the course and distinctive from other body and heading text. (Online Learning Consortium, n.d.) 

Check colour contrast

• Use the accessibility checker within Word, PowerPoint, Brightspace, and Moodle to verify your selected colours. You want to meet or exceed WCAG AA standards.  
• Ensure that there is contrast of text not only against the background but also against each other when shape, size and font weight are not used. (W3C 2024b) 
• Refrain from using bright or fluorescent colours, which might create contrasting visual patterns, especially stripes of contrasting colours. Such patterns can trigger seizures or overwhelm people with sensory issues like Irlen syndrome or autism. (Pun, 2016; Irlen Institute, n.d. and Epilepsy Foundation, n.d.) 

Simple background and text

• Generally, it is best to avoid changing the text colour in your course in the Learning Management System (LMS) or document if you know the template is accessible unless you confirm the colours you choose to have a high enough contrast, are colourblind safe and are not distracting. (Online Learning Consortium, n.d.) 
• The best practice is to use a white or extremely light grey background. Remember that learners could have adaptive technology that they may use such high contrast settings or tinted to suit their needs. (Online Learning Consortium, n.d.) 
• Remember that some learners are colourblind or viewing in bright light, so stick to very dark greys for the main text, and black will be your safest bet. (Online Learning Consortium, n.d.) 

Emphasizing text in alternative ways

Two ways you can emphasize text (that is not part of the heading) using wording: 

Use can list the keywords or terms they should note after a passage

Example:

In performing energy analysis, we will sometimes be interested in the total amount of energy used over a finite amount of time (e.g., hour, week, year) and at other times, we’ll be interested in instantaneous energy flow rates.  

The total energy transferred over some time period of interest consists of all the small bits of energy transferred over the many brief moments that make up that time period.  

Key terms:  energy use, energy flow rate, total energy.  

You can list a “key phrase” or “key takeaway after” a passage.

Example:

“Supporting student well-being is not about going through the motions of an icebreaker or a ‘get to know you’ exercise. What’s striking is that when grounded in evidence-based teaching practices, effective courses foster a greater sense of belonging, increase student confidence in their ability to graduate, and create more opportunities for feedback and encouragement (Tyton Partners, 2023). Intentional course design, it turns out, emphasizes many of the very same things that support student well-being (Slavin, Schindler, & Chibnall, 2014).” (Hommel and Cohen, 2024) 

Key phrase: “Effective courses foster a greater sense of belonging, increase student confidence in their ability to graduate, and create more opportunities for feedback and encouragement.” 

Or 

Data visualizations

• Bar charts that compare data should not be multi-coloured; you should use one colour or one colour with a highlighted or contrast option. 
• A series of clustered bar charts which compares data over time, should use multiple colours. Ensure the order of both the data and colours follows the same order in each chart. 
• Label charts instead of using legends whenever possible. If a legend is required, present the ledged in the same order as the categories in a bar chart, stacked bar chart, pie chart or cluster bar chart. 
• For line charts with one series, we recommend using the first dark colour of your chart palette. 

• Line charts with two series – we recommend using the first dark colours from the palette and then the brightest contrast colour (highest contrast ratio). 
• Line charts with more than two series. Since lines do not always stay in the same order, it is impossible to ensure adjacent colours always have at least a 3:1 contrast ratio. Therefore, you may want to make a focus chart instead. Focus charts use colour to highlight specific elements to help users understand the information. For example, two series lines are in contrasting colours while the other less critical series are in light grey. 
• Place a white border around each sector of a piece chart to enhance the contrast. 
• Add value labels to pie charts to help users understand the chart. 

(Analysis Function Central Team, 2021) 

To learn more about using colours in data visualization, please go to the Data visualization e-learning course from Government Analysis Functions for a great introduction to data visualization.  

Important: Although this resource is beneficial for understanding and creating great data visualizations, they do not emphasize in their examples the use of the technique G111, where patterns are included to convey the same information in a manner that does not depend on colour. Therefore, we remind you to also use secondary means such as shape differences (scatter plots), patterns (bar charts, pie charts) or line patterns (line graphs) to another cue to show differences in data visualizations.  

Colours type

There are many colour types (RGB, CMYK, HEX, LAB, LCH) used to measure and describe colour. The easiest to input into your LMS or documents is the HEX code. HEX codes or hexadecimal colours are six alpha-numeric characters (letters and numbers) representing red, green and blue colours. Instead of inputting separate values, the RGB values, you are copying and pasting one string of code. So, for the remainder, we will only share the HEX code. 

Best practice: create an accessible palette and use it for all course materials

The first topics in design tips are “Be consistent” and “Check colour contrast,” and a tried-and-true way to do this is to create a colour palette and apply it to all your materials. Consistency is a principle of good user and learner experience.  

The colour palette will have all colours as well as how you are going to use them for the different elements (text, backgrounds, headings, charts). Then, you can reference the palette while designing your templates and course materials. The colour palette should be used across programs such as your LMS word process software, chart or spreadsheet software). The palette tool is an easy way to ensure you have consistent colour usage and meet accessibility standards. 

There are two ways to approach creating a colour palette: Retrofit the current palette or build a new palette. You will need to assess whether it is easier to retrofit vs. build from scratch based on the number of course materials and what other changes you will be making to course content. 

Retrofit existing colours in your course materials

If you like the colours you picked for your course, we can use them to create the colour palette.  

1. Choose one application to start with and use the accessible tool in your LMS or other document to ensure your colours all meet standards. 
2. Adjust any colours that are too low in contrast. Note which headings or elements were changed on the colour palette sheet. 
3. Record the accessible colours in the colour palette sheet. 
4. Apply this new palette to the remaining applications. 
   • In Word, spreadsheet and presentation software, add the new palette and apply your course materials. Take advantage of templates whenever ever possible. 
   • In your LMS, if you can create or request a template or styles for your course shells, you can reapply the theme. If you cannot create or request templates, you will systematically need to reapply any colours that need to be updated using the LMS text editor.  

Note: You want to designate one system to determine the colour palette, as each system might suggest different colour adjustments. 

Create a new colour palette to apply to your course materials

If you would like a new palette, you can start with colour inspiration from images, book covers, or online colour palette generators. Instead of checking each combination in one application, you can use a colour design system to make it easier. 

1. Use either the Reasonable Colors or US Web Design System (USWDS) colour systems to build a new palette. 
   • Reasonable Colors is a series of 24 colours, each in 6 shades. The contrast between any two shades can be inferred by the difference between their shade numbers and contrast rules that work across all 24-colour sets. 
   • USWDS is a series of 24 colours, each with eight or more grades. The contrast is determined by the numeric difference in the grade or the magic number. The Using color page explains the system, and the System token page lists the colour and HEX codes.
2. Follow the instructions and recommendations in the Using a colour design system to build an accessible colour palette for course materials page to create a palette.  
3. Record the accessible colours in the colour palette sheet. 
4. Create a mock document in an application such as LMS or Word using the variations you plan on using and verify with the application-accessible tools if it passes WCAG 2.1 AA standards. Make any necessary adjustments at this stage. 
5. Apply this new palette across your applications. 
   • In Word, spreadsheet and presentation software, add the new palette and apply your course materials. Take advantage of templates whenever possible. 
   • In your LMS, if you can create or request a template for your course shells, you can reapply the theme. If you cannot create or request templates, you will systematically need to apply any colours to design elements, headings and text using the LMS text editor. 

Instructions for changing the colour theme in Microsoft and Google applications

Microsoft Word and Excel instructions 

Microsoft PowerPoint instructions 

Google Docs, sheets and slides 

Instructions for text editors in LMS

Brightspace Editor for D2L 

Atto text editor for Moodle 

Help for your online or blended course

If you are looking for help with your course? We have staff you can consult with for your online, blended or distributed courses.  

Book a one-on-one “Instructional Design Consultation” with our Instructional designer to build more accessible content today! 

Book your instructional design consultation

You may also be interested in

Using a colour design system to build an accessible colour palette for course materials

Primer on accessible courses

Images in teaching materials

References

Analysis Function Central Team. (November 23, 2021). Data visualisation: colours. Government Analysis Function. Retrieved from URL https://analysisfunction.civilservice.gov.uk/policy-store/codes-for-accessible-colours/ 

CAST (2018). Universal Design for Learning Guidelines version 2.2. Retrieved from http://udlguidelines.cast.org 

Epilepsy Foundation. (n.d.). Photosensitivity and Seizures. Epilepsy.com. Retrieved from URL https://www.epilepsy.com/what-is-epilepsy/seizure-triggers/photosensitivity

Fedewa, J. (Nov 1, 2021). What Is a HEX Code for Colors? How to Geek. Retrieve from URL https://www.howtogeek.com/761277/what-is-a-HEX-code-for-colors/

Hommel, D. and Cohen, B. (January 10, 2024). Course Design as a Gateway to Student Well-being. Faculty Focus. Retrieved from URL https://www.facultyfocus.com/articles/effective-classroom-management/course-design-as-a-gateway-to-student-well-being/ 

Irlen Institute. (n.d.) Light Sensitivity, Fluorescent Lights and Irlen. Ireln.com. Retrieve from URL https://irlen.com/light-sensitivity-fluorescent-lights-and-irlen/

Manitoba Accessibility Office. (n.d.). Accessibility for Public Sector. Accessibilitymb.ca. https://accessibilitymb.ca/public-sector/accessibility-for-public-sector.html 

Manitoba Accessibility Office. (2023). Checklist for Educational Institutions (public sector): The Accessibility Standard for Information and Communication. https://accessibilitymb.ca/resources/ic_standard_checklist_educational_institutions.pdf 

Pun, K. (September 2, 2016). Dos and don’ts on designing for accessibility. Accessibility in government blog. Retrieve from URL https://accessibility.blog.gov.uk/2016/09/02/dos-and-donts-on-designing-for-accessibility/ 

Quality Matters. (2023). QM Higher Education Rubric, Seventh Edition, 2023. Quality Matters. Used under license. All rights reserved. Retrieved from MyQM 

Office of Information Technology (n.d.). Contrast. University of Minnesota. Retrieve from URL https://accessibility.umn.edu/what-you-can-do/start-7-core-skills/contrast 

Online Learning Consortium. (n.d.). OSCQR – Standard #18. The OSCQR Rubric. Retrieved from URL https://oscqr.suny.edu/  

Sherwin, K. (June 7, 2015). Low-Contrast Text Is Not the Answer. Nielsen Norman Group. Retrieve from URL https://www.nngroup.com/articles/low-contrast/ 

Tempertemper. (April 2, 2021). Bold and italics aren’t read by screen readers. Tempertemper.net Retrieved from URL https://www.tempertemper.net/blog/bold-and-italics-arent-read-by-screen-readers

W3C. (January 4, 2024). Understanding SC 1.4.3: Contrast (Minimum) (Level AA). World Wide Web Consortium. Retrieved from URL https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum.html