Best practices Opinion

A splash of color for your e-learning content

03-logo-design-color-tips1

In this ongoing series of posts, kickstarted with our “10 Graphic Design tips for e-learning educators”, we try to provide you with the required know-how for improving the look and feel of your e-learning content. In our last post we talked about typography ― the use of fonts and typesetting for optimal readability. In this post, we’ll be taking a look at color.

Seemingly easy, color for your e-learning content can be surprisingly challenging for web masters to get right, especially if they have had no training in graphic design. It’s something that everybody feels qualified to have an opinion on (in graphic designer circles, few thins are more feared than the client imposing his awful color choices to the designer he hired), but that few have a natural eye for.

Don’t be afraid though. There are certain practical rules and guidelines you can follow (and even the whole science of “color theory” if you want to delve deeper into the subject) that can get you going in no time.

Colors are meant to be combined

No color is an island. You might believe you have found the perfect hue to use in your e-learning site, but you have to think of how it fits with the rest of the colors you’ll use.

Don’t think about individual colors. Think about your palette ― a set of colors that fits well together and is used throughout your content. Here’s were some basic color theory can be helpful, as there are several schemes for picking colors that look nice next to each other (e.g “complementary colors”).

If that all sound Greek to you, there are tools, like Adobe’s online service Kuler, that can automate the whole process, letting you pick a few colors you “must have” and figuring out colors that fit with them for you.

After you’ve developed your palette, stick to it. A small palette creates a stronger visual identity than a larger one. Often, a single color (like IBM’s blue or Coca Cola’s red) can define your whole branding. As for black and white, they are neutral, and you can use them with any other color.

Color affects contrast

As we discussed in the post about typography, contrast is a very important factor for readability. And contrast is produced by the difference in luminance and hue between two colors (or shades of the same color). For example it’s hard to discern a dark blue figure on a dark green background, or yellow text on an orange background.

You want to have a strong contrast between the background and your text color, especially for your longer copy. You can relax that a little for headlines and call-outs, since those are usually set in larger font sizes which makes them easier to read in the first place.

You don’t really have to be creative with your text’s color. In fact it’s better if you don’t. Black text on white background has been used for centuries and works great for print. For the web, consider making the background a little darker (an extremely light shade of gray will do), because an all white page can be too intense to read on a computer screen due to the backlight.

Color conveys information

Colors offer a great way to quickly relay information.

We all know to associate certain colors with certain messages (like the global use of red to mean “warning” or “danger”). That’s color coding; a technique for displaying information by using different colors.

You are not constrained by already defined color associations such as these. You can define your own color coding that applies within your e-learning content. E.g you can mark exercises with blue, important notes with yellow, etc. Or you can use different colors to mark different topics or sections.

That said, you also have to consider color-blind users. Either select colors that they can also distinguish (there are tools that show you how a color-blind person sees a website) or use color-coding as a supplementary way to convey information (e.g, if you mark all beginner exercises with some blue heading, also add a textual label marking them as such).

Color sets the mood

Colors are not just for decoration. They are a powerful way to set the mood and tone of your content.

Especially important in your choice of palette is your target audience. Ever noticed how corporate sites usually have a blue theme, sites for women have pink or pastel hues, sites about the environment or organic food use shades of green or sites for kids use vibrant primary colors? That’s color psychology at work.

Psychologic (and marketing) research has come up with several ways different colors affects our emotions (e.g red conveys excitement, blue conveys competence, etc. Try to use the appropriate colors for your theme and target audience. There are guides you can find online to help you with that, but a quick survey on content and sites with target audiences similar to yours can also help.


Improve your employee, partner and customer training with our enterprise-ready learning management system. Book a demo now and see why our diverse portfolio of customers consistently give us 5 stars (out of 5!)

Book a demo