Color Selection in eLearning Can Inform, Engage Learners

Color influences mood, energy level—and engagement. That’swhy color selection in eLearning is a vital element of successful design.

The colors used in eLearning design can help set atone—warmer colors will affect learners differently from cooler colors—and canalso be used to convey information. A button or heading in a boldly contrastingcolor draws eyes and attention; that’s one way that color and contrast canaffect the way learners see relationships and hierarchies of information.

Even more important, color is a factor in learnercomprehension. A well-chosen color scheme can reduce the amount of effortlearners expend to access and understand the content. That means that color canreduce—or increase—cognitive load, which affects learner success. In this article, visual designerConnie Malamed shares advice and basic information that eLearning designersneed 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 towork, it’s best to have a basic understanding of what color is and how to talkabout 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 tothe purity of a color, where it falls in a range from 100 percent (pure), avivid color, to neutral or gray, which would be 0 percent saturated.
• Temperature: Colors are often describedas warm (reds, oranges, and yellows) or cool (blues and greens). Temperaturealso creates a spatial effect, with items in cooler colors appearing fartheraway 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 digitaldevices are able to produce a vast array of colors in varying shades andsaturations. Web colors are often defined using the RGB color model, whichdescribes the mix of red, green, and blue light that forms the color. Zerointensity of all components means there is no light; this appears as black. Theother end of the spectrum, a full intensity of all three elements, appears aswhite. Everything in between appears as a hue that reflects the relativeintensity of each element.

How colors affect learners

The visual design of eLearning is as important as thecontent, and designers should consider the potential emotional associations ofcolors and color combinations when designing an eLearning color palette.

Describing the temperature of a color is one way of understandinghow colors affect learners—and their response to an eLearning design. Coolercolors like blue might be soothing, but in darker shades, blue can also connotesadness or loneliness. Warm colors can invoke heat or passion; they can alsofeel aggressive or angry. Yellow and red are stimulating.

The brightness and saturation of colors can have an evenstronger effect on learners’ emotions than the hue, according to Malamed.“People consistently experience pleasure from bright colors and secondly, fromsaturated or vivid colors,” she wrote in Visual Design Solutions.

Color relationships can aid a designer in improving theclarity and usefulness of eLearning. The background color used for eLearningscreens can affect how text and other content items appear—for instance, makingsome content element look large and close up, while other items seem to fadeinto the distance. Contrasting colors should be used to make particularlysalient elements, such as a safety warning or a key concept that learnersshould focus on, stand out from the background. Distinct colors, used ashighlights, can call attention to parts of a diagram that might otherwiseescape learners’ notice.

Color can be used to show relationships as well. Malamedcites a study that found that coordinating colors of text explanations and therelevant parts of a diagram can improve learners’ ability to learn and retaininformation. And consistent use of color to show hierarchy of information, showrelationships, and create associations with specific functionality improves theusability of eLearning and reduces cognitive load.

It’s important for designers to remember that not alllearners will have the same ability to perceive color, though, so other visualcues are needed. A design should not rely on color alone to convey information.(Read more about designing eLearning for learners who have visual impairmentsin “Accessibility from the Ground Up: Without Glasses, You Couldn’t Read This Content” and inMalamed’s book, Visual Design Solutions.)

Choosing colors for eLearning

At the beginning of a design project, the designer chooses acolor palette—a limited set of colors. At minimum, the design will need a backgroundcolor and a text color, which can be black and white, but they do not have tobe. 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 commonto use more than three colors, particularly if the design will call forvisually separating or emphasizing tables or other content elements.

Malamed suggests “8 Ways To Choose A Color Palette For eLearning,” emphasizing that theselected colors should be appropriate for the audience and content and shouldcreate 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, from123freevector.com

Contrast is the difference in color, value, or intensity—ora combination; when looking at a color wheel, the greatest contrast in hue occursbetween colors that are opposite one another, such as purple and yellow or blueand orange. However, this color contrast is not always enough to make textlegible, for example, so designers need to consider other factors, such as:

• Temperature—Sincecool colors tend to recede and warm colors seem closer, warm-colored text on acool background is easier to read than the reverse.
• Choosecolors that are easy to distinguish. Adjacent colors on a color wheel canbe difficult to discriminate, Malamed points out. When shading areas of a chartor selecting colors for different lines in a graph, choose colors that are afew steps apart.
• Colorblindness—Some color pairs, such as red and green, are hard for individualswith 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 selectedcolors provide sufficient contrast.