Author: Simon Hawkesworth – TELT

When designing online content, the issue of colour is rarely high on the list of considerations, being left more to the personal preference of the content developer, or at best, driven by some aspect of institutional branding. And yet the use (or misuse) of colour, can have a significant impact on the experience of the user. If employed with come thought, colour can instead, enhance content and make online resources more usable and accessible, rather than less.

The use and impact of colour has been given consideration by a number of different disciplines – some grounded in design practices, alongside those that have looked at how colour can impact upon mood, or the underlying psychological associations of colour, including some interesting cultural differences. As early as 1810, Johann Goethe used his consideration of colour to try to provide an insight into philosophical and natural structures of his time, and although his scientific theories were shown to be unfounded, his philosophical considerations provided an insight into the underlying psychological and cultural impact of colour, influencing later theorists, such as Arthur Schopenhauer (On Vision and Colours, 1891), as well as being instrumental in the development of tools such as the colour wheel.

Goethe’s colour wheel (Source: https://study.com/academy/lesson/goethes-color-theory.html)

Colour theory, as it’s come to be called, has developed out of these broad, philosophical, cultural and design-based ideas, and for those working on the development of online resources, can be important in giving insights into the potential impact of colour on the effectiveness and usability of digital materials. Although there are several contradictory features of these theories, some of the more common, or least contentious ones, as well as some obvious practical approaches, are outlined below. With colour, as with so much design – a consideration of the needs of the end-user, along with some planning and testing, followed by revision in the light of what doesn’t work, seems the key to making resources that have value.

Think about colours in a harmonious way

According to the Bauhaus designer, Josef Albers, colour ‘is the most relative medium in art’, meaning, that how one colour sits and relate to with another can affect the overall impact of a design. Thinking about colours as a palette – as a whole scheme of things rather than as separate elements – is likely to produce a more effective and harmonious result. Often in creating online materials, colours can be added piecemeal, as new components are devised, and their relationship to the previous choices or the whole design can be lost. That’s not to say that it’s always possible to plan all future colour elements. But beginning with a well-considered colour scheme is likely to reduce the changes needed later or for elements to feel ‘disjointed’.

Plate V-3 from Interaction of Color by Josef Albers (Source: https://www.cooperhewitt.org/2014/09/27/mirror-mirror-on-the-wall-which-is-the-bluest-of-them-all/)

When devising a colour scheme for a project, we might often start with ‘principle colour’ which forms the central approach, ‘mood’ or theme of the work, and which may have an institutional or subject association – which is no bad thing. Alongside that principle colour you’re going to want select others that can complement it – whose relationship to it and each other enhances the material and doesn’t distract the user. In addition, having colours that will contrast strongly, while still working with the overall scheme of the design, can be useful in distinguishing between content. Add those elements together and you’ve got the basis of your palette. Thinking about these colour elements as a whole, viewing them together in different context, testing their use, is all part of the process of ensuring that the relative value of different items is enhanced by their association.

Designers often use a colour wheel to help them choose colours in association with each other. These can help use colours that can complement one another as well as those that provide good contrast.

An example of a colour wheel (Source: https://www.dulux.com.au/how-to/how-to-use-colour/how-to-use-a-colour-wheel)

There are a variety of these wheels that can be employed, some interactive online tools, with Adobe’s www.kuler.com app being probably one of the best. The wheel shown below includes

Make it clear and help others to collaborate

When you design the palette, it can help the content development to produce some kind of simple ‘colour guide’ that includes the various codes (RGB, CMYK, HEX) for each colour. This can be a useful reference for yourself, and for others collaborating on a project. The codes will allow you to transfer the colours to different media as well as reminding you how the colours sit and work together.

For a recent project to develop online material, part of our visual starting point was to choose with a principal (Course) colour, and add others to this to create a palette. Viewing these alongside each other then helped us to see if they worked and would provide the elements we needed.

Online course colour guide for UCLan TELT developers.

We tested the colours by creating some of the objects that we would later use, to see if our initial design was effective. This allowed us to make some changes to the palette improve the impact.  

Course colour palette being tested using a pie chart to be used in the resource.

Keep it simple

In trying to create a palette to use, it’s wise to limit the number of colours used. Three or four colours can often be enough – good resources can even be created with just two, or even one. In the example shown above, we have a palette of seven colours, because the object we would be including (pie and bar charts) needed this kind of variation.

Make it accessible, make it work

Web Content Accessibility Guidelines (WCAG) have been created to help online content be more accessible, and is mainly concerned with ensuring that there is sufficient contrast between the background and foreground items, which often means the text. Guidelines are expressed in terms of the contrast ration between the two. WCAG recommends a minimum contrast ratio of 4.5:1 for the main text, and while this relates to online content, contrast is an important consideration for print content as well.

Here are two useful resources for checking contrast, based on WCAG guidelines:

• Web Aim: https://webaim.org/resources/contrastchecker/
• Colour Safe: http://colorsafe.co/

If the platform you’re using allows the user to change the ‘style’ of a web platform to adjust things like background colour suit their needs, even better. Other accessibility issues also apply, such as not using colour as the only visual means of conveying information.

 Colour can have meaning

Unless there’s a requirement to make the palette the corporate colours of your organisation, look for a colour scheme that might have some useful associations for the user. There’s nothing wrong with choosing colours that have a strong association with a subject; ‘dark blue’ for example, as the starting point for a resource designed for a course on say, Policing. Not everything has an associated colour, but it’s worth considering if it might be applicable.

If you’re designing content for international audiences, it may be worth doing some research as to whether some colours may have certain connotations for particular countries – both positive and negative.

Print and Online options

Colours will look different depending if they are viewed online or in print. Digital resources create colour with light, print uses inks. If you print this document, the blue that’s used to pick out the hyperlinks won’t look identical on paper. It’s worth checking how content appears offline to ensure that the material is still usable or retains the design approach you’ve crafted.

Colour is a key component if designing online resources, and with some thought, can be made to enhance the content and environments that we create. Simple approaches based on well-developed practices that are also designed to speed up development and allow co-workers to collaborate and work to the same approach, are also useful. Thinking about the end-user in terms of their ability to use the materials you are producing is also something that should be at the forefront of the work.

Further Reading

If you want to delve further into the world of colour for online content, in addition to the web links already given, the following resources may be of use:

Adams, S. (2017) The Designer’s Dictionary of Colour. New York: Abrams Books.

Albers, J. (2013) Interaction of Color: 50th Anniversary Edition. Yale: Yale University Press.

Geothe, J.  (1970) Theory of Colours. Massachusetts: MIT Press.

Gov.uk (2019) Colour contrast – why does it matter? [online] Available at: https://accessibility.blog.gov.uk/2016/06/17/colour-contrast-why-does-it-matter/ [Accessed: 21^st November, 2019]

Horung, D. (2012) Colour: A Workshop for Artists and Designers (2nd edition): A Workshop for Artists and Designers. London: Laurence King Publishing.

Yale University Press (2018) Interaction of Colour iPad app. [online] Available at: http://yupnet.org/interactionofcolor/

W3C (2019) Use of Colour. [online] Available at https://www.w3.org/WAI/WCAG21/quickref/?versions=2.0#use-of-color

[Accessed: 25^th November, 2019]

Also, Shibukawa and Takahashi’s multi-volume series entitled, Designer’s Guide to Color, by Chronicle Books, is a detailed approach to choosing colour, and which includes discussion of how colour can affect the user.