Figure 1. White and Gold or Blue and Black?

The colors of text, images, and other elements used on a webpage can affect how readable the site and its contents will be for everyone.

When choosing color for various elements of your course content, keep in mind that not everyone sees colors the same way. Look at Figure 1. Have you seen this photo of a dress that some see as white and gold and others see as blue and black? And what about those of us who see blue and gold?

Additionally, color-blindness is a common visual impairment. Approximately 8% of men and 0.5% of women with northern European ancestry have some form of color-blindness. This percentage is lower in other populations (National Library of Medicine, 2015). There are many types of color-blindness. Some people can see only in gray scale, while others can see color well enough that they are unaware they have any form of color-blindness. See the Color Examples page for examples that show how different types of color-blindness impact perception of color.

Poor contrast between font and background colors can cause readers to strain their eyes and potentially miss out on important information. Certain color combinations can even lead to headaches and cognition problems for some.

Module Content

This module covers

Considerations for when and how to use color
Contrast standards on the web
Tools you can use to evaluate contrast in your course

References

Corum, J. (2017, February 27). Is that dress white and gold or blue and black? The New York Times. https://www.nytimes.com/interactive/2015/02/28/science/white-or-blue-dress.html

National Library of Medicine. (2015, January). Color vision deficiency. https://ghr.nlm.nih.gov/condition/color vision-deficiency

Updated February, 2020