Using Accessible Colors in Canvas

Color is an important aspect of designing a course. However, certain color combinations can make it difficult for someone to read. It is important that proper colors are used in your course so that no one has trouble accessing the information. 

Color Contrast

Color contrast refers to the difference between the color of your text and the color of your background. If there is not sufficient contrast, the content will be difficult to see for everyone. For those with low vision, it may even be unreadable. See the example image below.

Comparison of text readability based on color contrast. On the left, three lines say 'Difficult to read text' in different color combinations that are hard to read: light gray on gray, blue on dark gray, and neon green on yellow. On the right, a sentence says 'However, this text is easy to read because there is sufficient color contrast between the text and its background.' The phrase 'this text is easy to read' is highlighted in white on a dark blue background, demonstrating good contrast.

Color is often used to emphasize a word or phrase. Instead of coloring or highlighting text, consider using bold or italics. These options not only avoid issues with color contrast but also make it so that the emphasized text will be announced to a screen reader user.

If you decide to use color, light-colored text should be used on a dark background, and dark-colored text should be used on a light background. Make sure that the colors you choose do not create issues in the Canvas Accessibility Checker.

Using Color to Convey Information

It’s also important that you don’t use only color to convey information. For example, listing the required elements of an assignment in red could impact someone who is colorblind, as they may not be able to decipher what is required versus optional in the assignment. If you are using color to convey information, include another indicator such as a symbol or description.

Comparison of bad and good examples of using color to convey information. On the left, the 'Bad Example' shows a list about completing an essay on climate change, where required items are in green and optional items are in red, making it hard for colorblind users to interpret. On the right, the 'Good Example' uses both color and descriptions. Green and red bullet points are paired with text labels: 'Optional' and 'Required'. Under 'Optional' are 'Include a bibliography.' and 'Include images or charts to support your points.' Under 'Required' is 'Submit your assignment by the end of the week.' This approach makes the information accessible regardless of color perception.