HUMAN FACTORS

Christine Rigden‘The Eye of the Beholder’—Designing for Colour-BlindUsers
Colour-blind computer
users see things
differently from mostpeople, but this is seldom
considered in the designof software or web pages.
This article offers a
simple technique forsimulating thedifferences, to help
designers and developers
avoid disadvantaging
their users.

2

Introduction
Have you ever wondered how
different the world could seem tosomeone with a colour-vision deficiency? Have you ever wondered
whether they can understand yourWeb page, or follow the colour cues inyour software?
If it is not your problem, you haveprobably never considered it. However,one man in 12 has some degree ofcolour-vision deficiency, or colour
blindness (it is rare in women). The
colour choices we make in software andWeb design can make life more difficult
for these people, if we are uninformed.
In good design, colour should neverbe the primary cue for information.
The options should be clear without
colour, and the colour is simply added
as a means of emphasis.
Yet, colour becomes more and morea part of our everyday work, especially with computers increasingly
supporting a greater range of colours.
Often it is simply decorative, but
colour cues are frequently used as theprimary means of informing the user
how to interpret information.
Published algorithms enable us tocalculate how colours appear toindividuals with certain types ofcolour vision deficiency. However, themathematics is fairly complex, anddesigners and developers need aneasier way to see how their choices
impact colour-blind users.
This article offers a method forrepresenting images as perceived
with a colour deficiency, so designers
can produce interfaces which avoid
causing problems for their users.

Most colour-blind people have adeficiency with either red or green,
and by focussing on the worst casescenario for these groups, maximum
inclusiveness can be obtained.
‘The basics of colour vision’
introduces how colour vision works,
in the simplest terms. ‘Problems withcolour vision’ looks at how colour
vision deficiency happens. The
section on ‘The colour transformations’ explains the theory behind thepalettes, and ‘Using the new palettes’describes their application, and ‘Lackof precision in colour displays’ looks
at some of the technical issues withmonitors. The ‘Glossary’ covers thebasic colour-vision terms, and words
which appear there are in bolditalics when they are first used.

The Basics of Colour Vision
We perceive colour via photosensitive
cells in the eye, the rods and cones.
The cones normally contain pigments
tuned to receive wavelengths in threeparts of the visible spectrum (Table 1).
This gives us trichromatic vision.
They can be referred to as Red, Greenand Blue, although r (rho), g (gamma)
and b (beta) are sometimes used toavoid confusion with the commonunderstanding of the colour names.
The wavelengths given are forpeak receptivity, although they also
receive light spread 100 nm or moreeither side of the peak, to a diminishing extent. Rods receive light ataround 500 nm, but only as lightness.
The brain further processes thecolour received by the eyes, and there
are also further psychological issues,

British Telecommunications Engineering, Vol. 17, Jan. 1999

HUMAN FACTORS

Table 1 Comparison of Cone Names and Visible Spectrum Colours
NameAlias

SymbolWavelengthColour 1Proportionrho

redr

590 nmyellow-orange60%

gamma

greeng550 nmyellowish green

30%

beta

blueb

440 nmbluish violet

10%of the shift in sensitivity are referred
to as anomalous trichromats. The
visual effect covers the continuum
from normal trichromatic vision todichromatic vision, so the common
expression ‘colour blind’ is lessappropriate to this group. (SeeFigure 1.)
Eight percent of Caucasian men arecolour blind1. This is made up of 1%
red-blind (protanope) and 1.1% greenblind (deuteranope) dichromats; 1%
red-insensitive (protanomolous)trichromats, and 4.9% green-insensitive (deuteranomolous) trichromats.
Only 0.002% of men are blue-blind(tritanopia—tritanomalous condi-

but this article deals only with theinitial stage.

Problems with Colour Vision
In a person who is a dichromat, oneof the pigments is missing. This is
usually red or green, althoughsometimes blue. A quarter of colourblind people are dichromats.
For the other three-quarters, either
the red-sensitive cones have had theirtuning shifted towards the green partof the spectrum, or the green peak isshifted towards the red wavelengths.
All three sets of cones still work, sothey are still trichromats, but because

Figure 1—Relation between trichromats and dichromats
TRICHROMATS

ANOMALOUS TRICHROMATSDICHROMATSNO REDLESS AND LESS RED

ALL THREE COLOURSLESS AND LESS GREEN

Figure 2—The CIE Yu*v* colour space, with confusion lines for protanopes (left)and deuteranopes (right) (included with permission from HCI Resources Network)
0·70·7COLOUR LINE

COLOUR LINE

0·60·60·50·5

D65

D650·40·4v*v*0·30·30·20·20·10·10·00·0

0·00·10·20·30·40·50·60·70·00·1

0·2

u*

British Telecommunications Engineering, Vol. 17, Jan. 1999

0·30·4u*0·5

0·60·7tions are not known) and 0.003% ofmen are totally colour blind. This
article does not deal with these rarer
conditions.
The red and green forms of colour
deficiency are caused by a recessive
gene on the X chromosome, and are
therefore more common among men.
Only 0.4% of women have any sort ofcolour vision deficiency, most of them
being the red or green forms.

The Colour Transformations
The work described in this article
relates to the most common deficiencies with red and green. These deficiencies are also very similar to each other,in terms of colour perception. It also
deals with dichromatic vision, as thatis calculable and represents the ‘worst
case’ scenario. If one designs for
dichromats, the lesser degrees of colour
deficiency will be well accommodated.
Interestingly, a red or green
deficiency does not simply affect how
one perceives red or green. Anycolours that vary from each other by
the amount of red or green they
contain will also appear different. In
addition, because protanopes are lesssensitive to light at the red end of thespectrum, colours in this area appear
darker to them. Deuteranopes do not
see this luminosity difference, as theother cones and rods compensate.
Another interesting aspect is thatcolours perceived by protanopes anddeuteranopes are broadly similar,
with just a slight greenish cast to theprotan palette, and an orangey castto the deutan palette.
In colour science, the visible
spectrum can be represented in a
diagram known as a CIE chromaticity diagram†. In Figure 2, the outertriangular shape represents visible
wavelengths. The lines that areroughly horizontal through this space(confusion lines) indicate the colours
that dichromats get confused. Every† The colours displayed on acomputer monitor are a subset of thisspace, indicated by triangles in thediagrams.
3

HUMAN FACTORSStandard

ProtanDeutanFigure 3—The look of the Web-safe palette, and how it compares to the transformed palettes
colour along a given line looks thesame as all the other colours alongthat line. The point at which theColour line crosses them represents
the perceived colour for that confusion line.
The position of any colour relative
to these lines can be calculated. The
relation between colours in a CIE
chromaticity diagram and colours forgiven monitor phosphors is known, so
RGB equivalent values can begenerated for a monitor with known
chromaticity coordinates3. It can, intheory, be done with as many colours
as one cares to calculate (within thegamut for the monitor), but the workin this article is based on the standard 216-colour† web-safe palette4, 5.
Values were calculated according
to established algorithms3, andpalette files were created from the† There are 216 colours considered‘safe’ to use on Web pages, because
they are common to most of thecomputing platforms available. Whenother values are used, any systemrunning 256 colours will substitutethe specified colours for those it hasavailable. Backgrounds will changecolour, and flat colours in gifs will
dither. Using the Web-safe palettegives better visual control over what
the end user sees. The web-safe
palette includes all colours (and noothers) which have RGB values madeup of 0, 51, 102, 153, 204, and 255 (or33, 66, 99, CC, FF in Hex).
‡ Please note that printed colour
may look quite different from screen
colour, and these printed images will
not be a totally accurate reproductionof how the colours look on screen.
For more clarity, see the images on
the Web site.
4StandardProtanDeutanFigure 4—The transformation when applied to the 16-colour palette
results in the *.pal format (as usedby Paintshop Pro). Figure 3 gives avisual representation of how thepalettes compare‡ for the 216 colours.
Figure 4 shows the correspondingtransformation of the old Windows
16-colour palette.
A striking feature of these twotransformed palettes is how similar
they are. The transformations are allroughly divided into yellows/ochres,and blues. The protan palette seems
to have the slightest greenish cast,whereas the deutan palette has aslight orange cast. Both red andgreen vanish from the palettes, aswell as purples and oranges.
One can work out easily whether
a given RGB value falls into theyellows or blues group. In general, if
the Red value is greater than theBlue, it appears in the yellows group,
and if Red is less than Blue it
appears in the blues group. A colour
generally appears neutral when
Green equals Blue, more or lessregardless of the value for Red.
The transformed Web colours areavailable as *.pal files and/or *.gifs
which can downloaded from thecolour pages at http://
www.labs.bt.com/people/rigdence/colours/. Certain pages within thesite also ‘list’ the Web colours visually, alongside their transformed
colours, so that a direct comparison
may be made. They are shown all
together, and are divided into blues,yellows, and neutrals as well.

Using the New Palettes
There are two basic approaches tousing these palettes:
l apply them to images, to approxi-mate how they appear toprotanopes and deuteranopes; andl use the understanding of thetransformed palettes to selectcolours which work together
safely for the Web site’s navigational scheme.
For the first approach, the basic
Web-safe palette is loaded or applied
to an image or screen capture. Savethe files into a convenient directory.
In PaintShop Pro, choose Colors Load palette…, and select websafe.pal. ‘Nearest colour’ should be
used for flat-colour images such asgifs, and ‘error diffusion’ for photographs†. (Other commercial paintprograms have similar functions.)
Two copies are then made of theimage. To one copy, apply protan.palin the same way, but this time selectthe dialogue option ‘Maintainindexes’. Apply the deutan.pal file tothe second copy. The resulting images
are a visual approximation of how it
would look to a protanope or deuter† This will also show how theimage will look when viewed on a
256-colour monitor, if it has notalready been checked.

British Telecommunications Engineering, Vol. 17, Jan. 1999

HUMAN FACTORS

Using standard paletteUsing protan paletteUsing deutan palette

Figure 5—Example transformations of a photographanope. Figure 5 gives an example of
how this would work on a photograph.
It is important that the Web-safecolours are in their correct index
positions, in order to correlate withthe transformed palettes. If in doubt,
re-map to the Web-safe palette
supplied with the others.
For the second approach, thedesigner starts with the sort of colour
scheme they are considering, basedon the non-functional requirementsof the site, aesthetics, and thegeneral ‘feel’ being sought. They canthen look at the corresponding
colours in the transformed palettes,
and use that information to help
them choose the most suitablecolours in the primary palette which
will also ‘work’ in the transformed
palettes.

For example, for the colour sitewhere these files are kept, a primarily monochromatic colour scheme
was chosen. By using a mid-tonecolour for the navigation panel, acolour could be chosen for unfollowed links which was contrastingenough to be readable there as wellas in the main page. To be easily
distinguished from a green unfollowed link, the followed links
colour was chosen from among cooler
colours, while still toning with themain colour scheme. Figure 6
illustrates how these compare.
The colour differences in thelighter shades are marginally more
visible to anomalous trichromats,while the mid-tone and darker shades
are more consistently confused.
Multiple colours will create
greater difficulty in finding shadesthat are adequately different fromeach other when transformed.
Early work suggests that only up
to four colours may be chosen
which can be clearly differentiated.
When more colours are used, makesure their differentiation is lessimportant.
Keep in mind cultural meanings
also, when choosing how to represent
information with colour.
The two essential points toremember are:l Make sure that any text has agood luminosity (brightness)
contrast with its background, forreadability. Do not put a mid-toneagainst a mid-tone. Large areas oftext for reading need to ensure
greater contrast than text in anavigation bar.

Figure 6—Sample colour selection based on a monochrome palette, showing how it looks normally, followed by how it appears
with the protan (bottom left) and deutan (bottom right) palettes

British Telecommunications Engineering, Vol. 17, Jan. 1999

5

HUMAN FACTORSl Make sure that the colours chosen

for followed and un-followed links
are far enough apart. It is safest
if they fall on either side of thecolour division in the palette, sothat one colour is transformed
into the blues group and the otherone is in the yellows group.
Then double-check their effectiveness by taking a screen capture ofyour choices (as in Figure 6), andapplying the transformed palettes tothem.

Postscript on ColourDisplays

1998 from the World Wide Web:http://www.hcirn.com/atoz/atozc/coldef.html.
4 WEINMANN, LYNDA; and HEAVIN,
BRUCE. <Coloring Web Graphics.2>. New Riders Publishing,
1997. Browser-safe colours also
explained on Lynda’s Web page at
http://www.lynda.com/hex.html.
5 SIEGEL, DAVE. Images on the Web—Use the Netscape Colour Cube.
Retrieved from the World WideWeb, Nov. 1998: http://www.dsiegel.com/tips/wonk10/
images.html.

deuteranope dichromat with
deuteranopia.
deuteranomaly ‘green insensitive’ anomalous condition.
tri- Latin for ‘third’, and referringto blue (third of the trio RGB).
tritan relating to problems withblue reception.
tritanopia condition where theblue (third) pigment is missing, ‘blueblind’.
tritanope dichromat with tritanopia.
tritanomaly theoretically the ‘blue
insensitive’ anomalous condition, but
the condition is not known to exist.

Biography
A prevalent concern about doing thiskind of work in the past has been thelack of precision involved. The
colours on every computer monitor
are going to be slightly different,
according to the gamma setting andthe colours of the RGB phosphors.
This makes it impossible to come up
with a single ‘true’ RGB value for any
specific real-world colour, and makes
it difficult to manage accurate colour
reproduction on screen.
However, in practical terms, RGB
is used to define colour in softwareand on the Web, without concern forthe chromaticity values. Modern
monitors are becoming more similar
than they used to be, as manufacturing becomes more standardised.
Therefore, in spite of a lack of real
precision, these transformations area valid and practical means of
ensuring that an interface does notcause problems for colour-blind
individuals.

References
1 HUNT, R. W. G. Measuring Colour.
Ellis Horwood Ltd, Chichester,
1987.
2 TRAVIS, DAVID. Effective Colour
Displays: Theory and Practice.
Academic Press, 1991.
3 HCI Resources Network. Colour
Vision Deficiencies. Retrieved May
6

6 POYNTON, CHARLES. Poynton’s Color
FAQ: 19. Is RGB always devicedependent? Retrieved from theWorld Wide Web, June 1998:
http://www.inforamp.net/~poynton/notes/
colour_and_gamma/
ColorFAQ.html#RTFToC19.

Glossarytrichromat a person who has
three colour reception pigmentsfunctional to some degree.
dichromat a person who has only
two of the three pigments functional.
anomalous trichromat a person
who is a trichromat, but one pigment
is dysfunctional, or anomalous.
pro- Latin for ‘first’, and referring
to red (first of the trio RGB).
protan relating to problems with
red reception.
protanopia condition where thered (first) pigment is missing, ‘redblind’.
protanope dichromat withprotanopia.
protanomaly ‘red insensitive’anomalous condition.
deu- Latin for ‘second’, andreferring to green (second of the trioRGB).
deutan relating to problems withgreen reception.
deuteranopia condition where thegreen (second) pigment is missing,‘green blind’.

Christine Rigden
Networks andInformation Services,
BT UK

Christine Rigden is part of BT’s User
Centred Design Group. Her work
involves all aspects of designinginterfaces for usability, but particularly developing guidelines for theconceptual design of software userinterfaces and Web sites. She alsooffers interface evaluations anddesign tutorials. Christine joined BT
in 1988 as a Drawing Office assistant, working in graphic design. She
was sponsored to the BT Women’sBridging Course (Chelmsford) andsubsequently to the University ofEssex as a mature student, andgraduated in 19994 with a B.Sc.
(Hons.) in Information and Business
Systems Technology.

British Telecommunications Engineering, Vol. 17, Jan. 1999