Choosing effective colours for websites

Abstract

This chapter gives a short introduction to the use of colour in the world wide web with the aim of giving web designers a better understanding of colour theory and the part it can play in the design and creation of effective web pages. The use of style sheets and colour codes in the development of harmonious colour schemes is explained. The chapter includes examples to illustrate well- and poorly designed websites and looks at the accessibility of websites for colour-deficient users.

Full text

N
Best–Colour design
Woodhead Publishing Limited
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
© Woodhead Publishing Limited, 2012
22
Choosing effective colours for web sites
C. S IK- LÁN YI, University of Pannonia, Hungary
Abstract: This chapter gives a short introduction to the use of colour in
the world wide web with the aim of giving web designers a better
understanding of colour theory and the part it can play in the design and
creation of effective web pages. The use of style sheets and colour codes
in the development of harmonious colour schemes is explained. The
chapter includes examples to illustrate well- and poorly designed websites
and looks at the accessibility of websites for colour-deficient users.
Key words: world wide web, colour, colour harmony, W3C, colour
deficient, disabled people, Design for All, accessible.
22.1 Introduction
The number of commercial web pages is growing rapidly worldwide, and
the number of internet users, mainly of social websites, is also seeing dra-
matic growth. It seems like everybody uses the internet and a large propor-
tion of internet users even have their own websites.
This chapter gives a short introduction to the use of colour in the world
wide web with the aim of giving web designers a better understanding of
colour theory and the part it can play in the design and creation of effective
web pages. The use of style sheets and colour codes in the development of
harmonious colour schemes is explained. The chapter includes examples to
illustrate well- and poorly-designed websites and looks at the accessibility
of websites for colour-deficient users.
Web Content Accessibility Guidelines (WCAG) 2.0 produced by the
World Wide Web Consortium (w3c, 2008a), are the closest you can get to
official visibility standards and cover a wide range of recommendations for
making web content more accessible. The chapter highlights the importance
of Guideline 1.4 ‘ “Distinguishable” Make it easier for users to see and hear
content including separating foreground from background.’ Following these
guidelines will help in making content accessible to a wider range of people
with disabilities, including blindness and visual impairment, deafness and
hearing loss, learning disabilities, cognitive limitations, limited movement,
speech disabilities and photosensitivity. Following these guidelines will also
improve the useability of our web content in general.
Designing products and services for all persons, including the disabled, is
not just a question of philosophy or humanitarianism – it has a financial
basis too. If a product – in our case the website – is useable for a disabled
600
c22.indd 600 11/28/2011 5:37:01 PM

N
Best–Colour design
Woodhead Publishing Limited
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
Choosing effective colours for web sites 601
© Woodhead Publishing Limited, 2012
person, then it will also be easier for everybody to use, so consumers will
be satisfied and will buy, recommend and use our products. Today you will
often find terms such as the following use: design for all, universal design,
inclusive design, barrier-free design. Design for All does not focus on issues
such as disability and age but instead puts its emphasis on diversity and on
mainstreaming. This chapter refers the reader to a great many websites
offering further information on this topic.
22.2 Choosing effective colours for websites
Many people designing webpages, software and new interfaces find great
difficulty with the everyday and apparently simple task of colouring fonts
and shapes. The electronic transmission of images has now became com-
monplace, used not only by the specialised graphic arts community, but also
by the general public. E-commerce uses catalogues, brochures and other
electronic pamphlet material, where high-quality pictures have to be trans-
mitted. The colorimetrically untrained receiver of such material, being
accustomed to documents complying with the WYSIWIG (what you see is
what you get) principle, believes that this is also true for photo-realistic
images. However, we know too well that this is not the case, despite the
many standards and guidelines made available during the past years (IEC
TC 100; ICC, 2001).
Designing with colour is perhaps the most difficult element of graphic
design to get right, because it can be very subjective. The choice by the web
designer of the best colours for a planned website is of great importance.
It depends, for example, on the topic of the website and on the character-
istics of the company involved.
Since it is more difficult to read text on a monitor than it is on paper, web
designers must be especially careful with the colours chosen for the planned
website. Some colour contrast combinations are very difficult for the eye,
such as yellow text on a blue background. The reason why we use black text
on a white background so often is that it is the easiest colour combination
to read, both on- and offline. But choosing a white background for the
website and putting black characters on it is unusual. Sometimes designers
put text on a patterned background, making it very difficult to read. Exam-
ples of some good and poor colour combinations are illustrated in Fig. 22.1.
It is also important when designing a website to realise that some colours
evoke different emotions, are associated with specific concepts and say dif-
ferent things in different countries (Abacus Design, 2006) For instance:
• green is often associated with freshness;
• white means purity; and
• purple can be associated with royalty.
c22.indd 601 11/28/2011 5:37:01 PM

N
Best–Colour design
Woodhead Publishing Limited
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
602 Colour design
© Woodhead Publishing Limited, 2012
Colours also have both positive and negative associations. Some common
colour associations are listed below (Abacus Design, 2000):
Red:
Positive: sense of power, strength, action, passion, sexuality and love
Negative: anger, forcefulness, danger, impatience, violence and revenge
Yellow:
Positive: brightness, warmth and joy
Negative: caution and warning
Blue:
Positive: cool and tranquil, patience, comfort, loyalty and security
Negative: fear, coldness, passivity and depression
Orange:
Positive: warmth, friendliness and cheerfulness, excitement and energy
Negative: ignorance
Purple:
Positive: royalty, sophistication, religion
Negative: bruising or foreboding
Green:
Positive: nature, growth, freshness and soothing
Negative: envy, greed, guilt and jealousy
This is readable
This is not readable
This is not readable
This is readable
This is readable
This is readable
This is readable
This is readable
This is not readable
This is not readable
This is readable
This is readable
This is not readable
This is readable
Figure 22.1 Readable and non-readable colour combinations.
c22.indd 602 11/28/2011 5:37:02 PM

N
Best–Colour design
Woodhead Publishing Limited
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
Choosing effective colours for web sites 603
© Woodhead Publishing Limited, 2012
Black:
Positive: dramatic, sophisticated and stylish, serious
Negative: evil and death
White:
Positive: pure, fresh, easy, cleanliness or goodness
Negative: blind, winter, cold, distant
As a general rule, one primary colour and one or two secondary (or
complementary) colours should be chosen for a site. These colours should
be based on the specific target market we want to attract. If more than two
or three colours are used, websites tend to look chaotic, and the power of
any one colour is diluted. ‘Keep it simple’ is one of the key concepts in
choosing colours. When determining which colour combinations are best, a
number of different colour schemes should be reviewed to assess which one
is conveying the right message and whether the colours are in harmony.
If the company already has an established brand, logo etc., the web
designer should always make sure to match the colours of the website with
the existing branding or design of the business. It is not advisable to have
printed material in one colour scheme and a website designed in totally
unrelated colours. All marketing materials should be consistent, with one
colour scheme and theme.
Colour choice is vital designing a company’s business website. Be sure to
try different colours, different shades and different combinations before
making the final decision. It’s a lot of fun playing with colours, but every
choice comes with a set of different meanings and emotions, so the colours
should be chosen with great care.
It is possible to hire a design company, but the resulting ready-made
design cannot easily accommodate future changes. When the owner of the
website asks for further developments, say, a year later, the designer may
have to make fundamental and expensive changes in order to implement
these. Therefore it is important that, right from the start, the website design
has the flexibility to adapt to future developments. The website must have
a style and menu which can be easily modified at a later stage and it must
be possible to add eCommerce or other facilities if required.
The owner of the website can update the content using a content manage-
ment system (CMS). A web CMS is designed to simplify the publication of
web content to web sites and mobile devices – in particular, allowing content
creators to submit content without requiring technical knowledge of HTML
or the uploading of files. Several web-based CMS exist in both the open
source and commercial domains, for example Joomla (http://www.joomla.
org/about-joomla.html), Drupal (http://drupal.org/), etc . . .
c22.indd 603 11/28/2011 5:37:02 PM

N
Best–Colour design
Woodhead Publishing Limited
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
604 Colour design
© Woodhead Publishing Limited, 2012
HTML is the assembly language of the web, and HTML5 currently under
development, is the next major revision of the HTML standard. In 2009,
the W3C allowed the XHTML 2.0 Working Group’s charter to expire, and
decided not to renew it. W3C and Web Hypertext Application Technology
Working Group (WHATWG) are currently working together on the devel-
opment of HTML5 (W3C, 2009). Ian Hickson, editor of the HTML5 spec-
ification, expects the specification to reach the Candidate Recommendation
stage during 2012 (Taft, 2010). Maybe HTML5 will be the standard of the
web?
22.3 HTML colours
HTML colours have the following features:
• Colours are displayed combining RED, GREEN and BLUE light.
• Colours are defined using a hexadecimal notation (HEX) for the com-
bination of Red, Green and Blue colour values (RGB).
• The lowest value that can be given to one of the light sources is 0 (in
HEX: 00). The highest value is 255 (in HEX: FF).
• HEX values are specified as three pairs of two-digit numbers, starting
with a # sign.
You can find a very useable illustration of colours used on the web, both
the RGB value and HEX value, and colour ‘name’ on the website Colours
and Fonts for Websites. If you know the RGB value of the planned colour, it
is easy to change over to HEX value with a hex-colour code generator (Hex-
colour code generator).The code given in Example 1 shows how to set the
background colour. We can set the colour HEX value, colour RGB value and
colour name, in this care resulting in a yellow background (Fig. 22.2).
Table 22.1 Colour values
Colour Colour HEX Colour RGB
#000000 rgb(0,0,0)
#FF0000 rgb(255,0,0)
#00FF00 rgb(0,255,0)
#0000FF rgb(0,0,255)
#FFFF00 rgb(255,255,0)
#00FFFF rgb(0,255,255)
#FF00FF rgb(255,0,255)
#C0C0C0 rgb(192,192,192)
#FFFFFF rgb(255,255,255)
c22.indd 604 11/28/2011 5:37:02 PM

N
Best–Colour design
Woodhead Publishing Limited
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
Choosing effective colours for web sites 605
© Woodhead Publishing Limited, 2012
Example 1
<html>
<body>
<p style=“background-color:#FFFF00”>
Color set by using hex value
</p>
<p style=“background-color:rgb(255,255,0)”>
Color set by using rgb value
</p>
<p style=“background-color:yellow”>
Color set by using color name
</p>
</body>
</html>
In HTML, all formatting can be removed from the HTML document and
stored in a style sheet (CSS). When a browser reads the style sheet, it will
format the document according to it. There are three ways of inserting a
style sheet:
• external style sheet;
• internal style sheet;
• inline styles.
For example, an internal style sheet can be used if one single document has
a unique style. Internal styles are defined in the <head> section of an
HTML page using the <style> tag (Example 2). Like Example 1, Example
2 sets the background colour to yellow.
Example 2
<head>
<styletype=”text/css”>
body{background-color:yellow}
p{color:blue}
Colour set by using hex value
Colour set by using rgb value
Colour set by using color name
Figure 22.2 Results of the first example.
c22.indd 605 11/28/2011 5:37:02 PM

N
Best–Colour design
Woodhead Publishing Limited
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
606 Colour design
© Woodhead Publishing Limited, 2012
</style>
</head>
The HTML Lesson on the w3schools home page shows all colours and
colour combinations (http://www.w3schools.com/html/default.asp).
The HTML and CSS color specification defines 147 colour names (17
standard colours plus 130 more). The 17 standard colours are: aqua, black,
blue, fuchsia, gray (USA), grey (UK), green, lime, maroon, navy, olive,
purple, red, silver, teal, white and yellow. Grey colours are created by using
an equal amount of power to all of the light sources. Table 22.2 (w3schools)
shows available grey shades.
Some years ago, when computers supported a maximum of 256 different
colours, a list of 216 ‘Web Safe Colors’ was suggested as a web standard,
reserving 40 fixed system colours. The 216 cross-browser colour palette was
created to ensure that all computers would display the colours correctly
when running a 256-colour palette. However, this is not important today,
since most computers can display millions of different colours. The list is
available on the W3shools home page (http://www.w3schools.com/html/
fefault.asp).
The w3school has a ‘colour picker’ that shows the HEX value of the
picked colour from the colour palette (HTML colourpicker) and a ‘colour
mixer’ where the designer can mix two colours (HTML colourmixer), set
the results and then see the results before he/she uses these values for the
planned website.
Colours never stand alone and background colour, text colour, etc. are
always interconnected. This interconnection forms an integral and impor-
tant part of the design. Good and bad design will be covered in more detail
later in the chapter.
22.4 Colour harmony
In visual experiences, harmony is something that is pleasing to the eye. It
engages the viewer and it creates an inner sense of order, a balance in the
visual experience. When something is not harmonious, it is chaotic. At one
extreme is a visual experience that is so bland that the viewer is not engaged.
The human brain will reject understimulating information. However, the
human brain also rejects what it cannot organise and what it cannot under-
stand. The visual task requires that we present a logical structure, and colour
harmony delivers both visual interest and a sense of order. Extreme unity
leads to understimulation; extreme complexity leads to overstimulation.
Harmony is a dynamic equilibrium.
Colour harmony has been prastised by painters for centuries. From
observing the colours of nature, artists produced paintings where those
c22.indd 606 11/28/2011 5:37:02 PM

N
Best–Colour design
Woodhead Publishing Limited
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
Choosing effective colours for web sites 607
© Woodhead Publishing Limited, 2012
Table 22.2 Grey shades
Grey shades Colour HEX Colour RGB
#000000 rgb(0,0,0)
#080808 rgb(8,8,8)
#101010 rgb(16,16,16)
#181818 rgb(24,24,24)
#202020 rgb(32,32,32)
#282828 rgb(40,40,40)
#303030 rgb(48,48,48)
#383838 rgb(56,56,56)
#404040 rgb(64,64,64)
#484848 rgb(72,72,72)
#505050 rgb(80,80,80)
#585858 rgb(88,88,88)
#606060 rgb(96,96,96)
#686868 rgb(104,104,104)
#707070 rgb(112,112,112)
#787878 rgb(120,120,120)
#808080 rgb(128,128,128)
#888888 rgb(136,136,136)
#909090 rgb(144,144,144)
#989898 rgb(152,152,152)
#A0A0A0 rgb(160,160,160)
#A8A8A8 rgb(168,168,168)
#B0B0B0 rgb(176,176,176)
#B8B8B8 rgb(184,184,184)
#C0C0C0 rgb(192,192,192)
#C8C8C8 rgb(200,200,200)
#D0D0D0 rgb(208,208,208)
#D8D8D8 rgb(216,216,216)
#E0E0E0 rgb(224,224,224)
#E8E8E8 rgb(232,232,232)
#F0F0F0 rgb(240,240,240)
#F8F8F8 rgb(248,248,248)
#FFFFFF rgb(255,255,255)
c22.indd 607 11/28/2011 5:37:02 PM

N
Best–Colour design
Woodhead Publishing Limited
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
608 Colour design
© Woodhead Publishing Limited, 2012
colours appeared in a harmonious form. They realised also that emphasis
can be given to an object in the scene if its coloration clashes with the colour
of the surrounding but, in order to stay harmonious, this coloured object
has to balance colour and size at the same time: the patch with strong colour
has to be much smaller than the pale coloration of the surrounding.
Early in the twentieth century, Professor Albert H. Munsell, an American
painter and academic, developed a colour classification system based on an
empirical arrangement of colours into a three-dimensional space (Birren,
1969). He was by no means the first to recognise that colour has three
dimension. Goethe, to pick but one famous example, had anticipated him
(Norman, 1990), but it was Munsell’s numeric colour-system that was
adopted by many colour classification bodies, including CIE (Commission
Internationale de l’Eclairage or, in English, the International Commission
on Illumination), leading eventually to perceptually uniform colour spaces
such as the CIE’s L*u*v* space (Chamberlin and Chamberlin, 1980; Lyons
et al., 2000). Munsell developed a colour harmony rule based on his colour
order system, according to which some sequences in hue, lightness and
chroma (colourfulness) are regarded as more harmonious than others.
Colour selection during design is very difficult, because the colour space
is large and computer programmers are not colour designers (Lyon et al.,
2000). Today’s software developers are a specialist group; generally, they
have no desire to attain a deep understanding of colour, but they have to
produce applications (both offline and online) that are pleasant to look at
and easy to work with. In summary:
• Colour selection is important for computer applications.
• Colour selection is difficult.
• Colour selection for interfaces concerns colour interaction more than
individual colours.
• Computer application developers are not normally trained in colour
choice or colour interactions, rather designing sites according to their
own tastes and preconceptions.
• Computer application developers have become inured to garish
colours.
In light of this, Lyons and co-workers worked out a ‘Colour Harmoniser’,
enabling an application developer to generate a set of abstract colour
schemes and select one scheme as a default (Lyons et al., 2000).
In addition to the pleasantness of a coloured scene, colour is also used
to provide a message in the scene. Same brands are linked to some colours,
e.g. Kodak products have to be reproduced in Kodak yellow, Pepsi-Cola has
a special combination of blue and red. All these factors have to be taken
into consideration and blended on a web page with the surrounding colours
to achieve a harmonious picture. On the other hand, manufacturers of tools
c22.indd 608 11/28/2011 5:37:02 PM

N
Best–Colour design
Woodhead Publishing Limited
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
Choosing effective colours for web sites 609
© Woodhead Publishing Limited, 2012
might label a series intended for hobby applications with one colour and a
series intended for professional use with another.
The harmony of hues is also represented in many art and design text-
books with reference to hue circles. Figure 22.3 illustrates four ubiquitous
schemes (Westland et al., 2007):
• monochromatic colour harmony (where colours are chosen with the
same or nearly the same hue) (Fig. 22.3a);
• complementary colour harmony (this is always represented as referring
to opposite colours on a hue circle) (Fig. 22.3b);
• analogous harmony (where colours are chosen with similar hues)
(Fig. 22.3c);
• split-complementary harmony (where there are basically three colours,
with two being either side of the complement of the third in the hue
circle) (Fig. 22.3d).
Three elementary heuristics for selecting harmonious colours are (Moretti
anf Lyons, 2002):
• pick varying shades of one colour (monochromatic harmony);
• pick complementary colours;
• pick nearby (analogous) colours.
(a) (b)
(c) (d)
Figure 22.3 Four typical geometric relationships: monochromatic (a),
complementary (b), analogous (c), split complementary (d).
c22.indd 609 11/28/2011 5:37:03 PM

N
Best–Colour design
Woodhead Publishing Limited
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
610 Colour design
© Woodhead Publishing Limited, 2012
It is evident that, despite the fact that colour harmony is predominantly
about successful art and/or design, certain concepts seem to have remained
intact over time. The value of using complementary-colour relationships, for
example, has been established by numerous advocates over the centuries
(Westland et al., 2007).
Colour harmony has some rules that seem to have overall validity, but
has others that are culture dependent. Therefore, in applying colours in a
web design the developer should always take into consideration the intended
audience of the web page.
22.5 Users with special needs (disabled and colour,
deficient users)
Most software engineering companies do not develop for special needs
users because they do not see any potential in this limited market. However,
it is thought that currently 10 % of the world’s population lives with some
form of disability (http://www.disabled-world.com/disability/statistics/). In
the USA this figure is estimated at 14 % and in the population over 65 it
becomes 65 %.
Disabilities are strongly linked with age, and society is facing a growing
number of people aged 75 and more, who are more likely to have impair-
ments or disabilities. This group will comprise 14.4 % of the population in
2040, compared with 7.5 % in 2003: almost a twofold increase (European
Commission, 2003).
It is not a simple task to assess the effectiveness of a multimedia for all
users with disabilities. The question is more complicated if the users have
special needs. This chapter provides a minimum requirements list that every
software engineer, computer scientist and web designer should take into
account as they develop new software or new websites.
Disability is a qualitative difference in human capability compared to the
usual standard for an individual or group. It could be in-born or, if acquired,
it can develop slowly over a period of time. Disability can be temporary or
it can be permanent and irreversible. The kinds of disabilities are: physical
impairment, sensory impairment, cognitive impairment, intellectual impair-
ment, cumulative impairment.
In 1980 the World Health Organization (WHO) published its classifica-
tion of impairments, disabilities and handicaps: International Classification
of Impairments, Disabilities and Handicaps (ICIDH). In this document,
three levels of impairments are distinguished. Over the past years, the
ICIDH has been considerably revised. One of the main differences between
the previous version and ICIDH-2, now called International Classification
of Functioning (ICF), is that instead of ‘disability’ and ‘handicapped’ new
descriptions have been introduced. The ICF speaks about ‘activities’ and
c22.indd 610 11/28/2011 5:37:03 PM

N
Best–Colour design
Woodhead Publishing Limited
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
Choosing effective colours for web sites 611
© Woodhead Publishing Limited, 2012
‘participation’. This means, first, that broader terms should be used and,
second, that attention should be focused on remaining ability rather than
on disability (WHO, 1999).
Different countries may use different terminology; we use disabled or
special needs user in this chapter. These are people who have special
needs in regard to daily activities throughout their life. Without assistive
technology or special devices they are not able to satisfy all their basic
needs to eat, move, communicate and so on. Within this context, this
chapter deals only with websites and the internet, because most information
and communication technology is based on these. If disabled users are
not able to use software (including the internet) on the same basis as
the population in general then their needs are special and so we refer
to them as special needs users. In what follows, we refer only to visual
problems.
21.5.1 Visual impairment and partially sighted people
It is very important that the developer keeps in mind that visually impaired
and partially sighted people do not have perfect vision. The visus of perfect
vision is scored as 1. For a partially sighted person the visus is between 0.1
and 0.3.
For blind persons:
• ensure that all information can be accessed via text or sound, such that
blind users can use screen readers or Braille display;
• give pre-recorded audio as an alternative medium;
• allow users to navigate the site by using keyboard (the mouse is hardly
used by blind users);
• minimise the user’s memory load because blind users can only hear one
word at a time and need memory to integrate parts of the heard infor-
mation (Hung, 2001).
For partially sighted persons:
• ensure the text size is large enough – otherwise low-vision users usually
need a screen magnifier to enlarge the text;
• give an audio option to notify low-vision users about new information;
• minimise the user’s memory load because the effective screen size is
very small while using screen magnifier;
For users with low vision-pictures must be drawn with thick contour lines.
The user can be given the option to modify the contour line thickness of
the objects. The user must be able to vary the colour of the objects and
background and the speed of motion and to stop the animation (Sik Lányi
et al., 2005).
c22.indd 611 11/28/2011 5:37:03 PM

N
Best–Colour design
Woodhead Publishing Limited
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
612 Colour design
© Woodhead Publishing Limited, 2012
22.5.2 Colour-deficient people
Colour deficiency is often neglected as most people do not consider colour
deficiency as a serious problem. With up to 15 % of the population being
affected by one form or another of colour deficiency, everyone who has a
website should be asking the question: Is it worthwhile making sure my site
is workable for such people?
It is quite common to see combinations of background and foreground
colours that make pages virtually unreadable for colour-deficient users.
Background, text and graphics colours should be carefully chosen to allow
for people with colour-deficiency. Designing for colour-deficient people is
complicated. It’s not just a matter of green/red or yellow/blue combinations.
The most important issue in designing for colour-deficient users is not to
rely on colour alone to convey information and not to use colour as a
primary means to impart information (Karagol-Ayan, 2001).
If we are unable to test our software with the help of colour-deficient
people, we can at lease looked at it in a greyscale setting to check whether
or not all the information is visible. The following practices should be
avoided if you want your website to be friendly to all visitors.
Errors marked in red
When filling out a form on a website, people often make a mistake. Typically,
the form is checked when you submit it to see if all of the information
appears to be valid. If you make a mistake, the form comes back with
wording to the effect: ‘Please fix your entries in the fields marked in red’.
Just one problem . . . You’ve got a colour-deficient user seeing red because
he/she can’t see the red!
Black and white text provides good contrast and is easy for everyone to
read. It is also typically pretty fine and frequently small as well. So, colour-
deficient people can see the text well enough – light and dark contrast. But,
there isn’t enough red to see the red – it is dark just like the black. If it were
blue, they would see it right away, but red is the standard colour for errors.
If the red text is made bold, it becomes easier for anyone to pick up on and
possible for color-deficient people to see because now there is enough red
present to pick it up.
Low-contrast content
Good web design practice, in general, demands a reasonable amount of
contrast between foreground and background. When you have a colour-
deficient visitor, this becomes critical. In the best case, low contrast is dif-
ficult to read; in the worst case, it can’t be read (Figure 22.4).
c22.indd 612 11/28/2011 5:37:03 PM

N
Best–Colour design
Woodhead Publishing Limited
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
Choosing effective colours for web sites 613
© Woodhead Publishing Limited, 2012
Displaying content with gradated colours, as is often done for graphs and
some charts, is another example of the same thing. Unless each colour that
signifies something is substantially different from the next, they will pretty
well blend in for someone with color-deficient vision. Why? After all, they
are different colours! Well, gradated colours are going to contain elements
of red and green. If someone is red/green colour-blind, these elements will
not be visible and everything will look like it is the slightest shade lighter
or darker than the next item. Even then, a differentiation can be made – but
only if the two are next to one another. Separate them and the difference
is lost.
Certainly, these are not the only problems people with color deficiency
experience with websites, but they are the most common. Fortunately, more
and more websites are working to be accessible to disabled users and their
work is being supported by the recommended guidelines made by W3C.
22.6 Web Content accessibility guidelines
The Web Content Accessibility Guidelines (WCAG) 2.0 were published on
11 December 2008 and cover a wide range of recommendations for making
web content more accessible (W3C, 2008a).
22.6.1 Main principles and structure of WCAG 2.0
Structure of WCAG 2.0:
• Principles – Four fundamental principles.
• Guidelines – 12 guidelines provide the basic goals.
• Success criteria – For each guideline, testable success criteria are pro-
vided.
• Levels of conformance – Three levels of conformance are defined: A
(lowest), then AA, and then AAA (highest).
• Sufficient and advisory techniques – An informative list of typical mis-
takes and good-practice techniques is provided. Techniques fall into two
categories: those that are sufficient for meeting the success criteria and
those that are advisory.
Any two very dark (or very light) colours are difficult
to read for anyone. When that combination includes
red, it is almost impossible for a colourblind person.
Any two very dark (or very light) colours are difficult
to read for anyone. When that combination includes
red, it is almost impossible for a colourblind person.
Figure 22.4 Bad example: low contrast difficult to read, or cannot be
read.
c22.indd 613 11/28/2011 5:37:03 PM

N
Best–Colour design
Woodhead Publishing Limited
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
614 Colour design
© Woodhead Publishing Limited, 2012
• Common failures – Describes authoring practices known to cause web
content not to conform to WCAG 2.0
The principles and guidelines from WCAG 2.0 are listed below W3C
(2008a).
• Principle 1: Perceivable – Information and user interface components
must be presentable to users in ways they can perceive.
This means that users must be able to perceive the information being pre-
sented (it can’t be invisible to all of their senses).
Guideline 1.1 Text Alternatives: Provide text alternatives for any non-text
content so that it can be changed into other forms people need, such as
large print, braille, speech, symbols or simpler language.
Guideline 1.2 Time-based Media: Provide alternatives for time-based
media.
Guideline 1.3 Adaptable: Create content that can be presented in different
ways (for example simpler layout) without losing information or struc-
ture.
Guideline 1.4 Distinguishable: Make it easier for users to see and hear
content including separating foreground from background.
• Principle 2: Operable – User interface components and navigation must
be operable.
This means that users must be able to operate the interface (the interface
cannot require interaction that a user cannot perform).
Guideline 2.1 Keyboard Accessible: Make all functionality available from
a keyboard.
Guideline 2.2 Enough Time: Provide users enough time to read and use
content.
Guideline 2.3 Seizures: Do not design content in a way that is known to
cause seizures.
Guideline 2.4 Navigable: Provide ways to help users navigate, find content
and determine where they are.
• Principle 3: Understandable – Information and the operation of user
interface must be understandable.
This means that users must be able to understand the information as well
as the operation of the user interface (the content or operation cannot be
beyond their understanding).
Guideline 3.1 Readable: Make text content readable and understandable.
Guideline 3.2 Predictable: Make web pages appear and operate in predict-
able ways.
c22.indd 614 11/28/2011 5:37:03 PM

N
Best–Colour design
Woodhead Publishing Limited
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
Choosing effective colours for web sites 615
© Woodhead Publishing Limited, 2012
Guideline 3.3 Input Assistance: Help users avoid and correct
mistakes.
• Principle 4: Robust – Content must be robust enough that it can be
interpreted reliably by a wide variety of user agents, including assistive
technologies.
This means that users must be able to access the content as technologies
advance (as technologies and user agents evolve, the content should remain
accessible).
Guideline 4.1 Compatible: Maximize compatibility with current and future
user agents, including assistive technologies.
22.6.2 Colour-related principles and guidelines
In the following section, we highlight the principles and guidelines which
relate specifically to colour.
• Guideline 1.3 Adaptable: Create content that can be presented in dif-
ferent ways (for example simpler layout) without losing information or
structure.
1.3.3 Sensory Characteristics: Instructions provided for understanding
and operating content do not rely solely on sensory characteristics of
components such as shape, size, visual location, orientation, or sound. (Level
A)
Note: For requirements related to color, refer to Guideline 1.4.
• Guideline 1.4 Distinguishable: Make it easier for users to see and hear
content including separating foreground from background.
1.4.1 Use of Color: Color is not used as the only visual means of convey-
ing information, indicating an action, prompting a response, or distinguish-
ing a visual element. (Level A)
Note: This success criterion addresses color perception specifically. Other
forms of perception are covered in Guideline 1.3 including programmatic
access to color and other visual presentation coding.
1.4.8 Visual Presentation: For the visual presentation of blocks of text, a
mechanism is available to achieve the following: (Level AAA)
1. Foreground and background colors can be selected by the user.
2. Width is no more than 80 characters or glyphs (40 if CJK ). (CJK means
Chinese, Japanese and Korean fonts.)
3. Text is not justified (aligned to both the left and the right margins).
4. Line spacing (leading) is at least space-and-a-half within paragraphs,
and paragraph spacing is at least 1.5 times larger than the line spacing.
c22.indd 615 11/28/2011 5:37:03 PM

N
Best–Colour design
Woodhead Publishing Limited
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
616 Colour design
© Woodhead Publishing Limited, 2012
5. Text can be resized without assistive technology up to 200 percent in a
way that does not require the user to scroll horizontally to read a line
of text on a full-screen window.
22.6.3 Some definitions from WCA92
Contrast ratio
(L1 + 0.05) / (L2 + 0.05), where
• L1 is the relative luminance of the lighter of the colors, and
• L2 is the relative luminance of the darker of the colors.
Note 1: Contrast ratios can range from 1 to 21 (commonly written 1 : 1 to
21 : 1).
Note 2: Because authors do not have control over user settings as to how
text is rendered (for example font smoothing1 or anti-aliasing2), what the
contrast ratio for text can be evaluated with anti-aliasing turned off.
Note 3: For the purpose of Success Criteria 1.4.3 and 1.4.6, contrast is
measured with respect to the specified background over which the text is
rendered in normal usage. If no background color is specified, then white
is assumed.
Note 4: Background color is the specified color of content over which the
text is to be rendered in normal usage. It is a failure if no background color
is specified when the text color is specified, because the user’s default back-
ground color is unknown and cannot be evaluated for sufficient contrast.
For the same reason, it is a failure if no text color is specified when a back-
ground color is specified.
Note 5: When there is a border around the letter, the border can add
contrast and would be used in calculating the contrast between the letter
and its background. A narrow border around the letter would be used as
the letter. A wide border around the letter that fills in the inner details of
the letters acts as a halo and would be considered background.
Note 6: WCAG conformance should be evaluated for color pairs specified
in the content that an author would expect to appear adjacent in typical
1 Font smoothing is a feature that significantly affects the final look of a type on screen.
Anything on the screen, including text, is displayed using pixels. However, on current computer
displays pixels are rather big objects. Low resolution results in rather unpleasant ‘jagging’ or
‘pixelation’ (Szafranek, 2009). Low resolution is that small glyphs of different typefaces are
virtually indistinguishable as they are constructed from very few pixels. To overcome these
problems, several font smoothing techniques were invented, for example anti-aliasing, subpixel
rendering.
2 In digital signal processing, anti-aliasing is the technique of minimising the distortion artifacts
known as aliasing when representing a high-resolution image at a lower resolution.
c22.indd 616 11/28/2011 5:37:04 PM

N
Best–Colour design
Woodhead Publishing Limited
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
Choosing effective colours for web sites 617
© Woodhead Publishing Limited, 2012
presentation. Authors need not consider unusual presentations, such as
color changes made by the user agent, except where caused by authors’
code.
Flash
a pair of opposing changes in relative luminance that can cause seizures in
some people if it is large enough and in the right frequency range.
Note 1: See general flash and red flash thresholds for information about
types of flash that are not allowed.
Functionality
processes and outcomes achievable through user action
General flash and red flash thresholds [types of flash that are not allowed]
a flash or rapidly changing image sequence is below the threshold (i.e.,
content passes) if any of the following are true:
• there are no more than three general flashes and / or no more than three
red flashes within any one-second period; or
• the combined area of flashes occurring concurrently occupies no more
than a total of .006 steradians within any 10 degree visual field on the
screen (25% of any 10 degree visual field on the screen) at typical
viewing distance
where:
• A general flash is defined as a pair of opposing changes in relative lumi-
nance of 10% or more of the maximum relative luminance where the
relative luminance of the darker image is below 0.80; and where ‘a pair
of opposing changes’ is an increase followed by a decrease, or a decrease
followed by an increase, and
• A red flash is defined as any pair of opposing transitions involving a
saturated red.
Exception: Flashing that is a fine, balanced, pattern such as white noise
or an alternating checkerboard pattern with ‘squares’ smaller than 0.1
degree (of visual field at typical viewing distance) on a side does not violate
the thresholds.
Almost all systems used today to view web content assume sRGB encod-
ing. Unless it is known that another color space will be used to process and
display the content, authors should evaluate using sRGB colorspace. If using
other color spaces, see Understanding Success Criterion 1.4.3. [W3C, 2010]
c22.indd 617 11/28/2011 5:37:04 PM

N
Best–Colour design
Woodhead Publishing Limited
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
618 Colour design
© Woodhead Publishing Limited, 2012
W3C has produced detailed guidelines and a guide to understanding and
implementing Web Content Accessibility Guidelines 2.0 (W3C, 2008b).
22.7 Conclusions
The use of the world wide web will continue to increase in both the social
and the commercial arenas to become accepted by users as an integral tool
essential for everyday life. With this extensive growth and reliance on the
web for information of all types, the need for good colour schemes for
websites will also increase in value and importance. Designing the perfect
colour harmony for a website remains a challenge as web designers work
towards developing colour palettes that reflect the nature of the companies,
services and products while being clear and easy to understand.
From extensive research there are now published guidelines that can help
the web designer to avoid making mistakes, as well as increasing knowledge
and awareness of the best methods to support the needs of colour-deficient
web users.
It is essential for web designers to understand some of the basic rules of
colourimetry, colour harmony, colour in culture and the challenges faced by
colour-deficient users. I would like to see an increased focus on teaching
these subjects in the web designers’ curriculum. We have seen the ease with
which we can set colours in HTML code, but the challenge remains in the
selection of the right and most effective colours.
Disabled and elderly users are a rapidly growing part of our society,
and have special needs in using information technology including
websites. Colour-deficient people form a significant part of this special
needs group. We have now gained a greater understanding of their
requirements, and it is not very expensive to take into account the guide-
lines to developing barrier-free websites, Guideline 1.4 ‘Distinguishable’ of
WCAG 2.0 contains essential information regarding how to make it easier
for users to see and hear content, including separating foreground from
background.
Designing products and services for everybody (including disabled
people) is not only morally correct, but makes sound financial sense too. If
access is not barrier-free a large number of users will be lost. Therefore, we
strongly recommend that web designers have home pages tested by several
validators and by special needs users too in order to ensure accessibility,
useability and overall user satisfaction (Sik Lanyi et al., 2011).
It is impossible to count the number of websites. Almost every company
has its own website, and who knows how many companies there are in the
world? What we do know is that there are numerous social websites. If we
add up the number of the registered users of several social networks we
will get a total of about 1 173 000 210. Yes, maybe some people are members
c22.indd 618 11/28/2011 5:37:04 PM

N
Best–Colour design
Woodhead Publishing Limited
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
Choosing effective colours for web sites 619
© Woodhead Publishing Limited, 2012
of several sites, but we can still estimate that nowadays 1/5 of the earth’s
population belongs to a social website.
The other fact is that by 2020, 25 % of the EU’s population will be over
65. Spending on pensions, health and long-term care is expected to increase
by 4–8 % of the GDP in forthcoming decades, with total expenditures tri-
pling by 2050. However, older Europeans are also important consumers
with a combined wealth of over a3000 billion (European Commission,
2007).
One final important fact is what is written in the European Commission’s
Digital Agenda for Europe.
Digital single market:
• Promoting Ecommerce: 50 % of the population should be buying online
by 2015. (Baseline: In 2009, 37 % of the individuals aged 16–74 ordered
goods or services for private use in the last 12 months.)
• Cross-border ecommerce: 20 % of the population should buy cross border
online by 2015. (Baseline: In 2009, 8 % of the individuals aged 16–74
ordered goods or services from sellers from other EU countries in the last
12 months.)
• Ecommerce for business: 33 % of SMEs should conduct online purchases/
sales by 2015. (Baseline: During 2008, 24 % and 12 % of enterprises was,
respectively, purchasing/selling electronically, for an amount equal to or
greater than 1 % of the turnover/total purchases. (European Commission,
2010, 42)
In conclusion, a very large proportion of the population is using websites
and will buy online. Therefore, we have very good reasons to make websites
barrier free. The financial advantages are easy to see for every company
wanting to retain their clients and users. Designing appropriate colour for
a website is one of the important criteria in developing barrier, free web-
sites. We hope this chapter has added to the readers understanding of this
increasingly important area and has enhanced knowledge in this field.
22.8 Sources of further information
You can find more information about effective colour design for a website
at http://www.pallasweb.com/color.html, while finding perfect colours for
your website is discussed at http://vandelaydesign.com/blog/design/find-the-
perfect-colors-for-your-website/.
http://vandelaydesign.com/blog/design/learn-web-design/ has useful
resources for learning web design, and http://www.color-wheel-pro.com/
color-schemes.html provides useful information on colour theory too.
Colour is never independent; it is part of the overall web design.
You can find several examples of ill-designed pages at http://www.
c22.indd 619 11/28/2011 5:37:04 PM

N
Best–Colour design
Woodhead Publishing Limited
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
620 Colour design
© Woodhead Publishing Limited, 2012
webpagesthatsuck.com/ and other examples that will hurt your eyes (http://
www.datadial.net/blog/index.php/2009/06/09/website-fail-30-web-designs-
that-will-hurt-your-eyes/). Nielsen collected the top ten mistakes in web
design (available from http://www.useit.com/alertbox/9605.html). Bad
human factors designs are discussed by Darnell (http://www.baddesigns.
com/). Finally, a list of free online books on web design is listed at http://
www.webpagesthatsuck.com/freebooks.html.
22.9 References
Abacus Design (2006) How to choose your website colours, Sydney, available at:
http://www.abacusdesign.com.au/articles/how-to-choose-your-website-colours.
htm (accessed October 2011).
Birren F (1969) MUNSELL: A Grammar of Color, New York: Van Nostrand-
Reinhold, 40–78.
Chamberlin GJ and Chamberlin DG (1980) Colour –Its Measurement, Computation
and Application, Philadelphia PA: Heyden, 64–68.
Colours and Fonts for Websites, available at: http://www.wordsandpeople.com/
website_design/webcolours.htm [accessed September 2011].
European Commission (2003) 2010: A Europe Accessible for All, Brussels, available
at: http://www.accessibletourism.org/resources/final_report_ega_en.pdf (accessed
October 2011).
European Commission (2007) Ageing Well in the Information Society, COM (2007)
332 final, Brussels, available at: http://eur-lex.europa.eu/LexUriServ/LexUriServ.
do?uri=COM:2007:0332:FIN:EN:PDF (accessed October 2011).
European Commission (2010) A Digital Agenda for Europe, COM (2010 245, Brus-
sels, available at: http://ec.europa.eu/information_society/digital-agenda/
documents/digital-agenda-communication-en.pdf (accessed October 2011).
Hex Colour Code Chart and Generator, available at: http://www.2createawebsite.
com/build/hex-colors.html (accessed Sepbermber 2011).
HTML Colour Mixer, available at: http://www.w3schools.com/tags/ref_colormixer.
asp (accessed September 2011).
HTML Colour Picker, available at: http://www.w3schools.com/tags/ref_colorpicker.
asp (accessed September 2011).
Hung E (2001) Universal Usability in Practice, Blind and Low Vision Users, available
at: http://www.otal.umd.edu/uupractice/vision/ (accessed September 2011).
IEC TC 100, Audio, Video and Multimedia Systems and Equipment, Geneva: Inter-
national Electrotechnical Commission Technical Committee 100.
ICC (2001) Version 4 ICC Specification, Reston VA, International Color Consor-
tium, available from: http://www.color.org (accessed October 2011).
Karagol-Ayan B (2001) Universal usability in practice, Color vision confusion,
available at http://www.otal.umd.edu/uupractice/color/ (accessed September
2011).
Lyons P, Moretti G and Wilson M (2000) Colour group selection for computer
interfaces, in Rogowitz BE and Pappas TN (eds), Human Vision and Electronic
Imaging V, Proc. SPIE 3959, San Jose CA, 302–313. available at: http://colourhar-
mony.massey.ac.nz/ (accessed September 2011).
c22.indd 620 11/28/2011 5:37:04 PM

N
Best–Colour design
Woodhead Publishing Limited
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
Choosing effective colours for web sites 621
© Woodhead Publishing Limited, 2012
Moretti G and Lyons P (2002) Tools for the Selection of Colour Palettes, in Proc.
New Zealand Symposium On Computer-Human Interaction (SIGCHI 2002), Uni-
versity of Waikato, New Zealand, July 11–12, available from: http://colourhar-
mony.massey.ac.nz/ (accessed September 2011).
Norman RB (1990) Electronic Color, New York: Van Nostrand-Reinhold, 55.
Sik Lányi C, Mátrai R, Molnár G and Lányi Zs (2005) User interface design for
visually impaired children, Elektrotechnik und Informationstechnik, 122(12), 488–
494.
Sik-Lányi C, Czank N and Sik A (2011) Testing the accessibility of websites, Inter-
national Journal of Knowledge and Web Intelligence, 2(1), 87–98.
Szafranek K (2009) Font smoothing explained, available at: http://szafranek.net/
works/articles/font-smoothing-explained/ (accessed September 2011).
Taft D K (2010) Application development: 20 essential things to know about the
HTML5 web language, eWEEK.Com, available at: http://www.eweek.com/c/a/
Application-Development/20-Essential-Things-to-Know-About-the-HTML5-
Web-Language-329684/ (accessed October 2011).
W3C (2008a) Web Content Accessibility Guidelines (WCAG) 2.0, available at: http://
www.w3.org/TR/2008/REC-WCAG20-20081211/ (accessed September 2011).
W3C (2008b) Understanding WCAG 2.0, A guide to understanding and implementing
Web Content Accessibility Guidelines 2.0, available at: http://www.w3.org/TR/2008/
WD-UNDERSTANDING-WCAG20-20081103/ (accessed September 2011).
W3C (2009) Frequently Asked Questions (FAQ) about the future of XHTML, avail-
able at: http://www.w3.org/2009/06/xhtml-faq.html (accessed September 2011).
W3C (2010) Understanding SC 1.4.3, available at: http://www.w3.org/TR/UNDER-
STANDING-WCAG20/visual-audio-contrast-contrast.html (accessed September
2011).
Westland S, Laycock K, Cheung V, Henry P and Mahyar F (2007) Colour harmony,
Colour: Desing & Creativity, 1(1), 1, 1–15, available at: http://www.colour-journal.
org/2007/1/1/07101article.htm#refs (accessed 25 February 2011).
WHO (1999) ICIDH-2 International Classification of Functioning and Disability,
Geneva: World Health Organization, available at: www.sustainable-design.ie/
arch/Beta2full.pdf (accessed October 2011).
c22.indd 621 11/28/2011 5:37:04 PM