There are three(3) guidelines for the use of color in digital materials:
- Do not rely on color alone to convey page information
- Provide good color contrast between text and backgrounds
- Coloring font for emphasis is unnecessary
Colorblindness
An individual affected by colorblindness will have difficulty distinguishing colors in images and text; exactly which color depends upon the type of colorblindness the individual has. Below are some images from the WebAIM website that illustrate the experience of an individual with various types of colorblindness.
Protanopia (Red deficiency)
| Normal | Protanopia |
|---|---|
 Note the green, red, and orange colors in the image. |  Note the lack of green, red, and orange in the image. |
Deuteranopia (Green deficiency)
| Normal | Deuteranopia |
|---|---|
| Note the green, red, and orange colors in the image. |  Note the lack of green, red, and orange in the image. |
Tritanopia (Blue deficiency)
| Normal | Tritanopia |
|---|---|
| Note the blue, green and yellow colors in the image. |  Note the absence of blue, green, and yellow in the image. |
Text and Backgrounds
The article, Color Blindness and Web Design, indicates that
“Contrasting colors or colors on the opposite ends of the color spectrum work best for color blind users (e.g., white and black is the best example). A good practice may be to create the site in grey scale colors because elements should never rely solely on color.”
The idea of a website or PowerPoint that is solely designed in grey scale can seem “un-creative”, but remember the goal of the end product. In the case of the Canvas site and even a PowerPoint the goal is to communicate and deliver content. This is not to say that color cannot be employed just that it should be done thoughtfully so as not to impede the students ability to engage with the content.
Text and Background Contrast
The following are some examples of text and background color contrast. When in doubt, use the Color Contrast Checker and ask others for assistance.
Black on Light Grey
This color combination passes all levels of accessibility and can help reduce screen glare.
Light Grey on Black
Similar to the above, the color combination of light grey text on a black background passes all levels of accessibility.
Dartmouth Green on White
Surprisingly, this color combination does not pass all levels of accessibility.
White on Dartmouth Green
As in the image above, the color combination of white text on Dartmouth green does not pass all levels of accessibility.
Resources
- Visual Disabilities This webpage outlines visual disabilities including blindness, low vision, and color blindness.
- Color Contrast Checker This webpage allows users to test combinations of text color and background color to determine if they are accessible.
- Colorblindness and Webdesign This website outlines some of the webdesign practices that work well for individuals with colorblindness.
- Color Visual Examples This webpage presents visual examples of how individuals with various types of colorblindness see the world.
- Color Contrast for Better Readability This webpage outlines ways to use color contrast to improve the readability of digital content.
- Colorblind Web Page Filter by Toptal – This webpage allows users to visualize a webpage based on the types of colorblindness.