You’ve chosen a palette of colors for your eLearning projects, so you’re done – right? Not exactly, in my view. Just picking a handful of colors doesn’t mean they will complement each other and guide the learner. What’s that you say – color can guide the learner? Absolutely, it can. Read on …

 

I’m designing a course (I always start in Adobe Illustrator but these tips apply for any application) and I have chosen this lovely green as one of the colors to use for elements (buttons, etc.) within my course.

 

Screen Shot 2016-09-23 at 4.10.10 PM.png

This green color can be useful for drawing attention to certain areas of a slide, but it can also distract the learner if overused or covering a large area. 

 

 

2.png

Here, I’ve used the green as a slide background. It’s too bright and covers too large an area for such a bright color, in my opinion.

 

 

Adjusting the color value

 

The “value” or the color – or “brightness” – can be toned down to make it more effective. Here’s how to achieve this in Illustrator.

In the Swatch panel of Adobe Illustrator (Window>Swatches), choose the color you wish to work with by doubling-clicking it.

3.png

Swatches panel in Adobe Illustrator

 

 

When I double-click on a swatch, I see the Swatch Options dialog.

4.png

In the Swatch Options dialog, you can choose to name the color and double check that it’s set to Process and RGB.

 

 

To alter the value of the color, hold down Command (Mac) or Control (Windows) and drag one of the RGB sliders. Because you held that key, the three sliders interact together and the value changes without altering the ratios. Dragging to the left darkens, dragging to the right lightens. (If you didn’t hold down that key and dragged the sliders, you would change it to a completely different color.)

 

 

 

Look at the variations I got while using this method on my green swatch. Lovely!

5.png

 

 

Next, let’s compare the original slide and the new one with the darker value. I think it works much better, is far less distracting, and below you can see I lightened the text in the final version. By making the text a light “value,” it draws more attention to it. 

6.png  7.png

8.png

 

 

 

In this example, I have three bright squares in the grid, and the rest are a dark gray.

9.png

Notice that all three squares are vying for your attention. I find it hard to focus on just one thing. Remember this when you are laying out your slides: too many bright elements can cause confusion for the learner. Always keep the focus of the slide in your sights, and design accordingly. Limit the number of brights, or adjust the values to tone down the other elements on the slide.

 

 

Value Affects Accessibility & Readability

 

And finally, the color value affects readability and can cause disabled persons to be unable to view your content. Keep it high contrast so everyone – including the disabled – can access it.

 

Persons with a visual or motion impairment using a machine called a “screen reader” to access your online content. The screen reader relays the description of the content back to the learner. If the content is too low contrast, the screen reader cannot decipher it. FAIL.

Screen Shot 2016-09-23 at 4.00.40 PM.png

Here is an example of “high contrast” which has excellent readability.

 

 

Screen Shot 2016-09-23 at 4.00.46 PM.png

This one is “low contrast,” which makes it difficult to read or translate.

 

 

Screen Shot 2016-09-23 at 4.00.53 PM.png

Red is considered by many to have negative connotations. So unless it’s part of the brand and you cannot alter it, considering darkening the value.

 

 

Screen Shot 2016-09-23 at 4.00.58 PM.png

This is a darker red, with a darker value. It still draws attention but it far less threatening to the learner.

 

 

Summary

 

In conclusion, remember to consider all factors about a color before choosing it. Ensure it works well with the other colors and be sure you have a nice mixture of bright and darker values for really effective eLearning.

 

Hope you found this information on color “valu”able!