Module 1 | Canvas | Color and Contrast

Why Color Shouldn't Overpower the Course

As you go through the course creation process keep in mind that, "just because you can do it, doesn't mean you should." Instructors should strive to have content with personality and visual appeal, however should avoid content that might be so outrageous that it becomes a distraction. To see a few examples of distracting design, simply use your favorite search engine to look for "bad website design." There are lots of resources to help you gain a sense of good design, but in short, remember the adage "less is more" and use that as a guiding principle.

Contrast Is Important

Sufficient contrast reduces eyestrain and allows the learner to focus their attention on a specific element. Consider the following images:

 

black text on a white background illustrates sufficient color contrast white text on a black background illustrates sufficient color contrast red font on a yellow background demonstrates insufficient color contrast and makes it difficulty for users to view red font on a yellow background demonstrates insufficient color contrast and causes eye strain 

 

Ensure Sufficient Contrast 

Some users are unable to perceive color differences, or may not perceive color the same way you do. Therefore it is important to avoid using color alone to communicate information. For example, if link text is blue, it should also be underlined so users who are unable to perceive color differences can distinguish links from surrounding text. Consider the following contrast tips: 

  • Use simple colors. Black text on a white or light background will be most readable

  • Avoid patterns or images behind the text. They're a challenge to read

  • Avoid neon colors. They're hard to read and have poor contrast on a white background

  • Avoid green on red and really, any red/green combination (color blindness affects approximately 1 in 12 men and 1 in 200 women in the world)

  • Other color combinations to avoid: yellow on green, purple on green, red on black, and blue on red

  • To ensure that you do have sufficient contrast, consider using the built-in Canvas Accessibility Checker Links to an external site. or other websites such as WebAIM's Color Contrast Checker

Why Color Alone is Not Used to Convey Meaning

Why is it important to use something other than just color to convey meaning? Some of the more obvious responses include those that are blind, color blind, or low vision. However, the rationale is for a larger audience as well. Course content may be printed on a black and white printer and the color may not be evident. Content may be read on a digital device with the colors inverted (e.g., night mode, which is perfect for reading at night without disturbing those next to you). 

What does it mean to convey meaning with color alone within images? Consider this map of the East Bay Transit System:

Color and Meaning
Map With Color East Bay Transit Map with routes denoted in different colors  A person who can see color will not have any difficulty distinguishing between the red line, the blue line, the green line or the orange line. A person who cannot see color well, due to color blindness or low vision, however, will probably not be able to distinguish the different routes as easily.
Map Without Color East Bay Transit Map with route colors removed  If you remove the colors from this map, however, it looks like this. When color is removed the map becomes almost unusable.

   

  How to Convey Meaning Beyond Color

Be sure to check your pages to ensure that none of the meaning is lost when you remove color, even within an image. You can do this by printing out the page on a black and white printer and by considering the following tips:

  • Use text to convey meaning
  • Add symbols or icons to convey meaning
  • Incorporate different font sizes and styles (italics, bold, etc.) in addition to color

Resources