Moodle: Formatting for Colourblindness
By: Jason Hogan
Tags: Education, Inclusion, Instructional Design, Color Blindness, Accessibility

While the Moodle update that was rolled out almost one year ago brought a lot of new features, it took one away: easy colour text formatting. We’re working with ITSS to add a plug-in that will bring colour text formatting to Moodle for the 2018S semester.

As a bit of background, between our last version of Moodle (ver 2.5) and the new one we’re currently using (ver 3.1), the Moodle team fully redeveloped the text editor, and one of the design decisions that they made was to remove the colour coding to encourage using headings. Headings are also encouraged in word processors like MS Word and Google Docs which place the headings options in a more preferential place in the toolbar and place colour formatting lower or off to a side. It’s no surprise when headings doesn’t just provide a nice visual hierarchy, but help structure documents for screen readers and easier navigation.

Here’s the visual hierarchy in a Google Doc along with the easily navigable outline that gets made automatically when you use headings.

So headings are awesome, but when we moved to our current Moodle, we hit a snag:

Here’s the (lack of) visual hierarchy on our current Moodle’s headings.

When we upgraded, we decided to keep using the same Moodle theme to minimize as many of the changes as possible since the upgrade was happening in such a short window. Unfortunately the theme limits how headings are displayed and really undercuts the visual hierarchy that Moodle’s new text editor relies on.

So we’re working with ITSS to bring colour back for text in Moodle. Along with that, we wanted to provide some tips for formatting for colourblindness in Moodle.

Tip 1: Try to avoid red for your coloured text

In our default Moodle theme there are three text colours at work: black, white, and the UPEI red. The UPEI red is the default colour for links and section titles. While a true red text may appear quite different from the UPEI red for people with common colour distinguishing sight, it can be hard to distinguish between those reds for individuals with colourblindness. If you’re going to use a colour try using a blue.

Tip 2: Don’t rely on only colour distinctions

If you want to make text pop-out, in addition to colour you can bold the text or underline. Pairing colour with those additional formats can make them easier to recognize. Another thing you can do is use a special character. As an example if you want to mark important assignment information on your Moodle page, you could lead it with a double *.

**This assignment is due on May 1st, 2018! Make sure you read the instructions before submitting the assignment.

Using the **’s this way will let students do a ctrl+F search on your page to jump between your important information. If you want to use colour to make sure students read a particular resource before doing a particular activity you can use the Restrict Access option in tandem with Activity Completion to link those assignments

The Demo Moodle Quiz activity will not open until a student opens the Academic Integrity @ UPEI and What Does Plagiarism Look Like resources.

Tip 3: Avoid distinguishing with colour

If you’re trying to categorize things, avoid trying to distinguish with colours. For example, it might be tempting to organize lecture assignments with blue text and lab assignments with orange text. While you can definitely do that, you may want to add more elements, such as a (LAB) tag so that lab assignments can again be quickly found with a ctrl+F search on your course page and they can easily be distinguished without seeing colours in a particular way.

Here we have two quizzes, but our lab quiz is distinguished from our lecture quiz with the (LAB) prefix

Hopefully these tips are useful for organizing your course going forward. If you have any questions please don’t hesitate to contact us at elearning@upei.ca

More Reading

Shaffer, Jeffery. 2016. 5 tips on designing colorblind-friendly visualizations.

Wickline, Matthew. 2001. Coblis — Colourblindness Simulator.

Clarke, Maxine. 2007. Making figures comprehensible for colour-blind readers. Nautilus.

Ross, Joseph A. 2007. Colour-blindness: how to alienate a grant reviewer. Nature.