10 Mistakes in Elearning Design: Color and Contrast

This is the fourth post in my series, 10 Mistakes in Elearning Design.

Here’s what we’ve already covered:

• Mistake #1: Redundant Navigation
• Mistake #2: Inconsistent Navigation
• Mistake #3: Is This Interactive?

Now, let’s look at frequent problems with visual design. You’ll learn some simple tips and tricks to make professional looking projects!

Mistake #4: Color and Contrast

Here we are with Mistake #4: Color and Contrast!

We’ll start with Color.

Let’s take a look at this first design. It has a bold red background and text in a super fun blue color on top.

How do you feel when you look at this? Do you feel calm? Do you feel it’s easy to read?

I’m betting you answered NO to those questions! You probably get a sense of violent vibration when you look at this slide. The blue on red is very difficult to read and look at.

Here’s another example – how do you feel about the readability of this one?

That might be easily readable for you, or it might not. It has no graphic color choices, but it has poor contrast. It does not meet accessibility standards because the font is too light a shade. Per Section 508 accessibility requirements, for full readability, the two colors used must have a 4.5:1 ratio for normal text. WebAIM has an excellent contrast checker where you may enter color choices and determine if they meet this standard.

Now, let’s take a look at a Redesign:

Good contrast? Check. No violent color clashing? Check. This is a calm, easy to read slide that still features a pop of color. There is nothing wrong with using color, color is great! But consider using very bold colors as accents rather than backgrounds.

Now, let’s move on to Contrast.

Take a look at this Original Design. Is it readable?

Nope! Just like the bold color choices in our very first example, the graphic background for this slide makes for very poor readability. It’s a busy slide made inaccessible by the background graphic.

Now, here’s one example of a redesign:

In this Redesign, the graphic background is blurred. This allows the colors to remain on the slide, but makes it less difficult to read. It’s still not as usable and readable as it could be.

Here’s another way to redesign this slide:

In this one, the graphic background is faded. The image itself could be edited to be semi-opaque, or the developer could overlay a semi-opaque shape. This slide is very readable with excellent contrast. The graphic image could be used on a slide prior to or after this one, with no text overlay, so that the user can appreciate it, if that’s the developer’s goal.

Takeaways

• Use WebAIM Contrast Checker
• Avoid colors that vibrate
• If you love a color, make it an accent
• Blur background images or make semi-transparent

Next Time

We’ll continue our foray into visual design by examining font choice – spoiler, don’t use more than two at a time!