Moodle: Formatting for Colourblindness
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.
So headings are awesome, but when we moved to our current Moodle, we hit a snag:
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
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.
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.
