Color influences mood, energy level—and engagement. That’s why color selection in eLearning is a vital element of successful design.
The colors used in eLearning design can help set a tone—warmer colors will affect learners differently from cooler colors—and can also be used to convey information. A button or heading in a boldly contrasting color draws eyes and attention; that’s one way that color and contrast can affect the way learners see relationships and hierarchies of information.
Even more important, color is a factor in learner comprehension. A well-chosen color scheme can reduce the amount of effort learners expend to access and understand the content. That means that color can reduce—or increase—cognitive load, which affects learner success. In this article, visual designer Connie Malamed shares advice and basic information that eLearning designers need to know about choosing and using color: “What Learning Professionals Should Know About Color.”
Understanding the lingo
Before putting any tips on color choice in eLearning to work, it’s best to have a basic understanding of what color is and how to talk about it.
- Hue: Hue is the color itself—red, green, blue. Humans perceive colors within a spectrum that ranges from red to violet.
- Intensity or saturation: This refers to the purity of a color, where it falls in a range from 100 percent (pure), a vivid color, to neutral or gray, which would be 0 percent saturated.
- Temperature: Colors are often described as warm (reds, oranges, and yellows) or cool (blues and greens). Temperature also creates a spatial effect, with items in cooler colors appearing farther away and warmer-colored items appearing closer.
- Value: A color might be described as “light blue” or “dark blue”; the relative lightness is the color’s value.
- The RGB color model: Modern digital devices are able to produce a vast array of colors in varying shades and saturations. Web colors are often defined using the RGB color model, which describes the mix of red, green, and blue light that forms the color. Zero intensity of all components means there is no light; this appears as black. The other end of the spectrum, a full intensity of all three elements, appears as white. Everything in between appears as a hue that reflects the relative intensity of each element.
How colors affect learners
The visual design of eLearning is as important as the content, and designers should consider the potential emotional associations of colors and color combinations when designing an eLearning color palette.
Describing the temperature of a color is one way of understanding how colors affect learners—and their response to an eLearning design. Cooler colors like blue might be soothing, but in darker shades, blue can also connote sadness or loneliness. Warm colors can invoke heat or passion; they can also feel aggressive or angry. Yellow and red are stimulating.
The brightness and saturation of colors can have an even stronger effect on learners’ emotions than the hue, according to Malamed. “People consistently experience pleasure from bright colors and secondly, from saturated or vivid colors,” she wrote in Visual Design Solutions.
Color relationships can aid a designer in improving the clarity and usefulness of eLearning. The background color used for eLearning screens can affect how text and other content items appear—for instance, making some content element look large and close up, while other items seem to fade into the distance. Contrasting colors should be used to make particularly salient elements, such as a safety warning or a key concept that learners should focus on, stand out from the background. Distinct colors, used as highlights, can call attention to parts of a diagram that might otherwise escape learners’ notice.
Color can be used to show relationships as well. Malamed cites a study that found that coordinating colors of text explanations and the relevant parts of a diagram can improve learners’ ability to learn and retain information. And consistent use of color to show hierarchy of information, show relationships, and create associations with specific functionality improves the usability of eLearning and reduces cognitive load.
It’s important for designers to remember that not all learners will have the same ability to perceive color, though, so other visual cues are needed. A design should not rely on color alone to convey information. (Read more about designing eLearning for learners who have visual impairments in “Accessibility from the Ground Up: Without Glasses, You Couldn’t Read This Content” and in Malamed’s book, Visual Design Solutions.)
Choosing colors for eLearning
At the beginning of a design project, the designer chooses a color palette—a limited set of colors. At minimum, the design will need a background color and a text color, which can be black and white, but they do not have to be. Adding just one more color can be sufficient to create an appealing design. It’s easier to overdo color than to use too few colors. However, it is common to use more than three colors, particularly if the design will call for visually separating or emphasizing tables or other content elements.
Malamed suggests “8 Ways To Choose A Color Palette For eLearning,” emphasizing that the selected colors should be appropriate for the audience and content and should create the desired mood.
A color hierarchy is established by using one color significantly more than the other colors. Many designers choose a dominant color, then use lighter or less-saturated and darker or more-saturated variations of that color. However, it is important to ensure that there is sufficient contrast between colors and visual elements on the page.
Figure 1: Color wheel, from 123freevector.com
Contrast is the difference in color, value, or intensity—or a combination; when looking at a color wheel, the greatest contrast in hue occurs between colors that are opposite one another, such as purple and yellow or blue and orange. However, this color contrast is not always enough to make text legible, for example, so designers need to consider other factors, such as:
- Temperature—Since cool colors tend to recede and warm colors seem closer, warm-colored text on a cool background is easier to read than the reverse.
- Choose colors that are easy to distinguish. Adjacent colors on a color wheel can be difficult to discriminate, Malamed points out. When shading areas of a chart or selecting colors for different lines in a graph, choose colors that are a few steps apart.
- Color blindness—Some color pairs, such as red and green, are hard for individuals with color blindness to distinguish. When choosing colors for eLearning, consult an online color and contrast checker, like this one from WebAIM. These can help designers avoid poor combinations and verify that selected colors provide sufficient contrast.