You Want Color With That?
A call for careful color consideration in the classroom
Dr. Tamara Fudge, professor in the School of Business and IT Kaplan University
Color can be exciting and fun, but identifying content in the classroom through “color coding” can be a real problem. In our quest to reach each and every student, we must be very careful where we apply color.
First, you are at this moment looking at what we call an interface; it is the screen that allows the human to interact with technology and the content contained therein. There are universally accepted design rules for this screen, which include accessibility, or developing the interface so that “people with disabilities can perceive, understand, navigate, and interact with the Web, and … they can contribute” (“Introduction to Web Accessibility”, 2005). Visual disabilities are included within this definition.
Using text in various colors can make reading a chore for students who have color blindness, also known as color deficiency. Some colors might look far too light to read easily or might make it difficult to distinguish different shapes or letters (Bailey, 2015). Since there are several kinds of color deficiencies, too, it is impossible to choose one set of colors that will work for everyone. At least 8% of all men of Northern European ancestry have some kind of color deficiency according to the National Institutes of Health; only .05% of women are thus afflicted (as cited in “Color Vision Deficiency”, 2015). While not everyone has that same ancestry, that’s still too many people to ignore, and other populations may have similar percentages.
For the sake of readability, we must also consider the contrast of background color compared to the text color. The W3C’s Web Content Accessibility Guidelines 2.0 (WCAG) Success Criterion 1.4.3 explains that larger text can be treated somewhat differently than small text, and bold versus regular font styles can also be considered; logo and decorative text does not need to be compliant (“Contrast Minimum: Understanding SC 1.4.3”, 2014). The higher the light/dark contrast, the better the readability, with the caveat that it works best with a light background and dark text. The opposite – light text on dark background – is known to cause eye fatigue (Gabriel-Petit, 2007).
The image below shows some commonly available colors. The yellow is pretty obviously a poor choice for text readability, but a check of the others for WCAG compliance shows that only the dark indigo blue #002060; was fully compliant (Snook, 2015). For people with “normal” color vision, this may be surprising.
©2015 Tamara Fudge
Where could faculty apply color? It’s possible in announcements, discussion forums, documents, and even seminar chats – pretty much anywhere we present words. Should we apply color? The previously stated facts suggest that keeping it simple and using black text on very light background would be the most appropriate choice to ensure content delivery to everyone and to meet the concerns of accessibility. It should also be stated that some institutions have specific guidelines that need to be followed, too. While it is admittedly fun to add color, identifying content through color-coding has the real potential of excluding some of the people we are trying to reach.
References
Bailey, G. (2015, February). Color blindness. Retrieved from http://www.allaboutvision.com/conditions/colordeficiency.htm
Color vision deficiency. (2015, January). Retrieved from http://ghr.nlm.nih.gov/condition/color-vision-deficiency
Contrast (minimum): Understanding SC 1.4.3. (2014, September 14). Retrieved from http://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html
Gabriel-Petit, P. (2007, January 20). Applying color theory to digital displays. Retrieved from http://www.uxmatters.com/mt/archives/2007/01/applying-color-theory-to-digital-displays.php
Introduction to web accessibility. (2005, September). Retrieved from http://www.w3.org/WAI/intro/accessibility.php
Snook, J. (2015, January 11). Colour contrast check. Retrieved from http://snook.ca/technical/colour_contrast/colour.html