Contrast Ratio: Tech Tool on Seneca MyApps | The Teaching & Learning Centre

View all the Teaching & Learning Centre Spark Plugs!

by Janice Ting, eLearning Designer in the Teaching & Learning Centre

As an eLearning Designer at Seneca’s Teaching and Learning Centre (T&LC), I always keep an eye out for useful tools that help streamline my work. Since joining the T&LC team, I prioritize making materials accessible (compliant with the AODA [Accessibility for Ontarians with Disabilities Act] requirements) to all learners. It is an ongoing learning process.

I recommend trying to implement one new change at a time, such as being mindful of checking the colour contrast for text and non-text elements.

There are plenty of free web-based contrast checker tools such as:

• WebAIM Contrast Checker
• WCAG Color Contrast Checker (With an add-on for Chrome browsers)
• Adobe Color’s Color contrast checker analyzer tool (With a useful right-hand “Recommendations” panel with “Contrast Suggestions” and “Set a Contrast Ratio”)

One of my challenges was that I could not quickly grab (using an eyedropper tool) the colour code from documents that were not opened in an internet browser. However, after attending a workshop led by Gina Catenazzo (an instructional designer at the T&LC), “Foundations of Accessibility for Digital Materials,” I had found a solution. I learned about the free software Colour Contrast Analyser!

Look at the Colour Contrast Analyser in action [Video starts at 25:00], demonstrated by Gina. You can download the Colour Contrast Analyser directly to your personal computers from its website or if you are using a Seneca-issued laptop, you can find it on Seneca MyApps which allows you to install software on any Windows computer on demand.

Be careful when using coloured text for emphasis and/or labelling as the standard colours in Microsoft (Figure 1) do not all meet the Level AA contrast (minimum) requirements (Figure 2). The Level AA contrast requirement is 4.5:1 colour contrast ratio for “regular” text and 3:1 for “large” text and graphical objects (e.g., arrows, boxes). Large text is at least 14 pt bolded or 18pt not bolded. Anything less than these is considered “regular” text. So, for example, 16 pt not bolded is considered regular text, while 16 pt bolded is considered large text.

Figure 1. Standard colors in Microsoft365.
Description: In Microsoft365 products such as PowerPoint, Word, and Excel, there are ten “standard colors” that you can select. The colours (from left to right) will be referred to as: dark red, red, orange, yellow, light green, dark green, light blue, blue, dark blue, and purple.
Source: Screenshot of the standard colors in PowerPoint, modified by J. Ting/Seneca College, CC BY-NC 4.0.

Figure 2. Contrast ratios of the standard colors in Microsoft365.
Description: The contrast ratios of eight of the ten “standard colors” in Microsoft365 compared to a white background (#FFFFFF) were analyzed using the Colour Contrast Analyser on Seneca MyApps. Three colours passed the Level AA requirement for regular, large text, and graphical objects: dark red (contrast ratio of 6.5:1), blue (5.1:1), and purple (8.1:1). Four colours failed the Level AA requirement for both regular, large text, and graphical objects: orange (1.6:1), light green (1.8:1), dark green (2.9:1), and light blue (2.5:1). One colour failed only for regular text but passed for large text: red (4:1).
Source: Image by J. Ting/Seneca College, CC BY-NC 4.0.

Note: Be careful when using the standard “red” colour as it does not meet Level AA (4.5:1 minimum contrast ratio) for normal text.

There are other useful tools on Seneca MyApps to help make your learning materials AODA compliant such as

• Color Oracle – A colour blindness simulator
• NVDA – A free screen reader

_{Photo by David Pisnoy from unsplash.com}

View all the Teaching & Learning Centre Spark Plugs!