LEARNING OBJECTS:
Guidance on Usability: Colour and
Contrast
Author: Andreas Konstantinidis
http://www.kcl.ac.uk/ctel
http://blogs.kcl.ac.uk/ctel
http://twitter.com/ctelkcl
http://www.youtube.com/ctelkcl
[email protected]
Licensed under a Creative Commons Attribution-NonCommercial 3.0 Unported License
I NTRO
This document provides useful guidance and advice on issues relating to the usability of eLearning
resources focusing on the use of colour and contrast.
It might be useful, before proceeding, to define usability and clarify differences and similarities with
accessibility.
Usability refers to the simplicity of using or becoming familiar with the use of an object. In other words,
how easy it is to use or learn to use something. Several factors such as: clarity, effectiveness, support
etc. can influence the level of usability. On the other hand, accessibility refers to the level of
approachability of an object by people of various levels of physical dexterity or mental competence. In
other words it’s a response to the question: how broad is the audience that can appreciate this object
to its full potential. Does it cater for the special needs of users with optical, auditory or other
disabilities?
These design guidelines have been collected from sources such as eLearning research, articles and
literature. Although this guidance has proven its effectiveness and applicability in a variety of settings,
it is recommended that you proceed carefully, adapting it accordingly. There are three main
considerations:



the goal of your educational resource
the prior knowledge of your learners
the environment in which you will develop and deploy the educational resource
For more information on these recommendations you can look up the relevant point of reference or
contact [email protected] directly.
C OLOUR AND C ONTRAST
A BOUT
DESIGN
Use a “quiet” design approach [2]:



do not overuse color (it decreases performance on memory tasks).
a minimalist design allows users to focus on task.
make sure to also utilize white space and consistency.
A BOUT L AYOUT C ONTRAST
Make elements that are not the same clearly different, not just slightly different [1]. You can achieve
contrast in many ways:




manipulation of space (near and far, empty and filled).
color choices (dark and light, cool and warm).
by text selection (serif and sans serif, bold and narrow).
by positioning of elements (top and bottom, isolated and grouped).
Employ contrasting colors: Combinations of red and green, purple and yellow, and especially blue and
orange, are very effective in keeping a reader's interest [4]. These combinations are very useful in
making material more interesting and for emphasizing specific elements. However, using a
combination of these colors as text and background can seriously hinder legibility. When text is
concerned, make sure to use tools such as Etre - http://www.etre.com/tools/colourcheck/, to check
color contrast and combinations.
2
If the use of chromatic contrasts is adequate, the precision and the rapidity with which information is
perceived and memorized increase by 40-50% compared to simple white-black contrasts [4]. Colors
are used to label, to measure, to represent a reality, and to enliven or decorate [3]. Direct the learner's
attention to important information with shapes or colors [4].
E X AM PL E S
OF
C O N T RA ST
Weak Contrast
Good Contrast
Image credit: Reynolds, G. (2008) Presentation Zen: Simple ideas on Presentation Design and
Delivery.
L INKS


Etre - http://www.etre.com/tools/colourcheck/: A handy tool to check color contrast and
combinations.
Color contrast visualizer - http://www.stainlessvision.com/blog/projects/colour-contrast-visualiser:
helps you choose good color combinations in general
R ESOURCES
1.
2.
3.
4.
5.
Clark, R.C. and Mayer, R.E. (2011) E-Learning and the Science of Instruction. John Wiley &
Sons; 3rd Edition.
Dirksen, J. (2011) Design for how people learn. New Riders
Gutierrez, K. (2013) Understand These 10 Principles of Good Design Before You Start Your Next
eLearning Project. [Online] Available from:
http://info.shiftelearning.com/blog/bid/277278/Understand-These-10-Principles-of-Good-DesignBefore-You-Start-Your-Next-eLearning-Project [Accessed: 5th January 2015].
Gutierrez, K. (2014) eLearning Start-ups: These Mistakes Will Make You Look Unprofessional.
[Online] Available from: http://info.shiftelearning.com/blog/bid/348644/eLearning-Start-ups-TheseMistakes-Will-Make-You-Look-Unprofessional [Accessed: 5th January 2015].
Peters, D. (2014) ThoughtLeaders Webinar - Interface Design for Learning. [Online] Available
from: http://designerelearning.blogspot.co.uk/2014/01/thoughtleaders-webinar-interfacedesign.html [Accessed: 5th January 2015].
3