The Eye of the Beholder'- Designing for Colour-Blind
←
→
Page content transcription
If your browser does not render page correctly, please read the page content below
HUMAN FACTORS
Christine Rigden
‘The Eye of the Beholder’—
Designing for Colour-Blind
Users
Colour-blind computer Introduction Most colour-blind people have a
deficiency with either red or green,
users see things Have you ever wondered how and by focussing on the worst case
different the world could seem to scenario for these groups, maximum
differently from most someone with a colour-vision defi- inclusiveness can be obtained.
ciency? Have you ever wondered ‘The basics of colour vision’
people, but this is seldom whether they can understand your introduces how colour vision works,
considered in the design Web page, or follow the colour cues in in the simplest terms. ‘Problems with
your software? colour vision’ looks at how colour
of software or web pages. If it is not your problem, you have vision deficiency happens. The
probably never considered it. However, section on ‘The colour transforma-
This article offers a one man in 12 has some degree of tions’ explains the theory behind the
colour-vision deficiency, or colour palettes, and ‘Using the new palettes’
simple technique for blindness (it is rare in women). The describes their application, and ‘Lack
colour choices we make in software and of precision in colour displays’ looks
simulating the Web design can make life more difficult at some of the technical issues with
for these people, if we are uninformed. monitors. The ‘Glossary’ covers the
differences, to help In good design, colour should never basic colour-vision terms, and words
designers and developers be the primary cue for information. which appear there are in bold
The options should be clear without italics when they are first used.
avoid disadvantaging colour, and the colour is simply added
as a means of emphasis. The Basics of Colour Vision
their users. Yet, colour becomes more and more
a part of our everyday work, espe- We perceive colour via photosensitive
cially with computers increasingly cells in the eye, the rods and cones.
supporting a greater range of colours. The cones normally contain pigments
Often it is simply decorative, but tuned to receive wavelengths in three
colour cues are frequently used as the parts of the visible spectrum (Table 1).
primary means of informing the user This gives us trichromatic vision.
how to interpret information. They can be referred to as Red, Green
Published algorithms enable us to and Blue, although r (rho), g (gamma)
calculate how colours appear to and b (beta) are sometimes used to
individuals with certain types of avoid confusion with the common
colour vision deficiency. However, the understanding of the colour names.
mathematics is fairly complex, and The wavelengths given are for
designers and developers need an peak receptivity, although they also
easier way to see how their choices receive light spread 100 nm or more
impact colour-blind users. either side of the peak, to a diminish-
This article offers a method for ing extent. Rods receive light at
representing images as perceived around 500 nm, but only as lightness.
with a colour deficiency, so designers The brain further processes the
can produce interfaces which avoid colour received by the eyes, and there
causing problems for their users. are also further psychological issues,
2 British Telecommunications Engineering, Vol. 17, Jan. 1999HUMAN FACTORS
Table 1 Comparison of Cone Names and Visible Spectrum Colours tions are not known) and 0.003% of
men are totally colour blind. This
Name Alias Symbol Wavelength Colour 1 Proportion
article does not deal with these rarer
rho red r 590 nm yellow-orange 60% conditions.
The red and green forms of colour
gamma green g 550 nm yellowish green 30% deficiency are caused by a recessive
beta blue b 440 nm bluish violet 10%
gene on the X chromosome, and are
therefore more common among men.
Only 0.4% of women have any sort of
but this article deals only with the of the shift in sensitivity are referred colour vision deficiency, most of them
initial stage. to as anomalous trichromats. The being the red or green forms.
visual effect covers the continuum
Problems with Colour Vision from normal trichromatic vision to The Colour Transformations
dichromatic vision, so the common
In a person who is a dichromat, one expression ‘colour blind’ is less The work described in this article
of the pigments is missing. This is appropriate to this group. (See relates to the most common deficien-
usually red or green, although Figure 1.) cies with red and green. These deficien-
sometimes blue. A quarter of colour- Eight percent of Caucasian men are cies are also very similar to each other,
blind people are dichromats. colour blind1. This is made up of 1% in terms of colour perception. It also
For the other three-quarters, either red-blind (protanope) and 1.1% green- deals with dichromatic vision, as that
the red-sensitive cones have had their blind (deuteranope) dichromats; 1% is calculable and represents the ‘worst
tuning shifted towards the green part red-insensitive (protanomolous) case’ scenario. If one designs for
of the spectrum, or the green peak is trichromats, and 4.9% green-insensi- dichromats, the lesser degrees of colour
shifted towards the red wavelengths. tive (deuteranomolous) trichromats. deficiency will be well accommodated.
All three sets of cones still work, so Only 0.002% of men are blue-blind Interestingly, a red or green
they are still trichromats, but because (tritanopia—tritanomalous condi- deficiency does not simply affect how
one perceives red or green. Any
Figure 1—Relation between trichromats and dichromats colours that vary from each other by
TRICHROMATS ANOMALOUS TRICHROMATS DICHROMATS the amount of red or green they
contain will also appear different. In
LESS AND LESS RED NO RED
addition, because protanopes are less
sensitive to light at the red end of the
spectrum, colours in this area appear
ALL THREE COLOURS darker to them. Deuteranopes do not
see this luminosity difference, as the
other cones and rods compensate.
LESS AND LESS GREEN
Another interesting aspect is that
colours perceived by protanopes and
deuteranopes are broadly similar,
Figure 2—The CIE Yu*v* colour space, with confusion lines for protanopes (left) with just a slight greenish cast to the
and deuteranopes (right) (included with permission from HCI Resources Network) protan palette, and an orangey cast
to the deutan palette.
0·7 0·7 In colour science, the visible
COLOUR LINE COLOUR LINE spectrum can be represented in a
0·6 0·6
diagram known as a CIE chromatic-
0·5 D65 0·5 ity diagram†. In Figure 2, the outer
D65 triangular shape represents visible
0·4 0·4 wavelengths. The lines that are
v* v*
0·3 0·3
roughly horizontal through this space
(confusion lines) indicate the colours
0·2 0·2 that dichromats get confused. Every
0·1 0·1
† The colours displayed on a
0·0 0·0 computer monitor are a subset of this
0·0 0·1 0·2 0·3 0·4 0·5 0·6 0·7 0·0 0·1 0·2 0·3 0·4 0·5 0·6 0·7
u* u*
space, indicated by triangles in the
diagrams.
British Telecommunications Engineering, Vol. 17, Jan. 1999 3HUMAN FACTORS
Standard Protan Deutan
Figure 3—The look of the Web-safe palette, and how it compares to the transformed palettes
colour along a given line looks the Standard
same as all the other colours along
that line. The point at which the Protan
Colour line crosses them represents
the perceived colour for that confu- Deutan
sion line.
The position of any colour relative Figure 4—The transformation when applied to the 16-colour palette
to these lines can be calculated. The
relation between colours in a CIE results in the *.pal format (as used Using the New Palettes
chromaticity diagram and colours for by Paintshop Pro). Figure 3 gives a
given monitor phosphors is known, so visual representation of how the There are two basic approaches to
RGB equivalent values can be palettes compare‡ for the 216 colours. using these palettes:
generated for a monitor with known Figure 4 shows the corresponding
chromaticity coordinates3. It can, in transformation of the old Windows l apply them to images, to approxi-
theory, be done with as many colours 16-colour palette. mate how they appear to
as one cares to calculate (within the A striking feature of these two protanopes and deuteranopes; and
gamut for the monitor), but the work transformed palettes is how similar
in this article is based on the stand- they are. The transformations are all l use the understanding of the
ard 216-colour† web-safe palette4, 5. roughly divided into yellows/ochres, transformed palettes to select
Values were calculated according and blues. The protan palette seems colours which work together
to established algorithms3, and to have the slightest greenish cast, safely for the Web site’s naviga-
palette files were created from the whereas the deutan palette has a tional scheme.
slight orange cast. Both red and
green vanish from the palettes, as For the first approach, the basic
† There are 216 colours considered well as purples and oranges. Web-safe palette is loaded or applied
‘safe’ to use on Web pages, because One can work out easily whether to an image or screen capture. Save
they are common to most of the a given RGB value falls into the the files into a convenient directory.
computing platforms available. When yellows or blues group. In general, if In PaintShop Pro, choose Colors -
other values are used, any system the Red value is greater than the Load palette…, and select web-
running 256 colours will substitute Blue, it appears in the yellows group, safe.pal. ‘Nearest colour’ should be
the specified colours for those it has and if Red is less than Blue it used for flat-colour images such as
available. Backgrounds will change appears in the blues group. A colour gifs, and ‘error diffusion’ for photo-
colour, and flat colours in gifs will generally appears neutral when graphs†. (Other commercial paint
dither. Using the Web-safe palette Green equals Blue, more or less programs have similar functions.)
gives better visual control over what regardless of the value for Red. Two copies are then made of the
the end user sees. The web-safe The transformed Web colours are image. To one copy, apply protan.pal
palette includes all colours (and no available as *.pal files and/or *.gifs in the same way, but this time select
others) which have RGB values made which can downloaded from the the dialogue option ‘Maintain
up of 0, 51, 102, 153, 204, and 255 (or colour pages at http:// indexes’. Apply the deutan.pal file to
33, 66, 99, CC, FF in Hex). www.labs.bt.com/people/rigdence/ the second copy. The resulting images
‡ Please note that printed colour colours/. Certain pages within the are a visual approximation of how it
may look quite different from screen site also ‘list’ the Web colours visu- would look to a protanope or deuter-
colour, and these printed images will ally, alongside their transformed
not be a totally accurate reproduction colours, so that a direct comparison † This will also show how the
of how the colours look on screen. may be made. They are shown all image will look when viewed on a
For more clarity, see the images on together, and are divided into blues, 256-colour monitor, if it has not
the Web site. yellows, and neutrals as well. already been checked.
4 British Telecommunications Engineering, Vol. 17, Jan. 1999HUMAN FACTORS
Using standard palette Using protan palette Using deutan palette
Figure 5—Example transformations of a photograph
anope. Figure 5 gives an example of For example, for the colour site that are adequately different from
how this would work on a photo- where these files are kept, a prima- each other when transformed.
graph. rily monochromatic colour scheme Early work suggests that only up
It is important that the Web-safe was chosen. By using a mid-tone to four colours may be chosen
colours are in their correct index colour for the navigation panel, a which can be clearly differentiated.
positions, in order to correlate with colour could be chosen for un- When more colours are used, make
the transformed palettes. If in doubt, followed links which was contrasting sure their differentiation is less
re-map to the Web-safe palette enough to be readable there as well important.
supplied with the others. as in the main page. To be easily Keep in mind cultural meanings
For the second approach, the distinguished from a green un- also, when choosing how to represent
designer starts with the sort of colour followed link, the followed links information with colour.
scheme they are considering, based colour was chosen from among cooler The two essential points to
on the non-functional requirements colours, while still toning with the remember are:
of the site, aesthetics, and the main colour scheme. Figure 6
general ‘feel’ being sought. They can illustrates how these compare. l Make sure that any text has a
then look at the corresponding The colour differences in the good luminosity (brightness)
colours in the transformed palettes, lighter shades are marginally more contrast with its background, for
and use that information to help visible to anomalous trichromats, readability. Do not put a mid-tone
them choose the most suitable while the mid-tone and darker shades against a mid-tone. Large areas of
colours in the primary palette which are more consistently confused. text for reading need to ensure
will also ‘work’ in the transformed Multiple colours will create greater contrast than text in a
palettes. greater difficulty in finding shades navigation 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 5HUMAN FACTORS
l Make sure that the colours chosen 1998 from the World Wide Web: deuteranope dichromat with
for followed and un-followed links http://www.hcirn.com/atoz/atozc/ deuteranopia.
are far enough apart. It is safest coldef.html. deuteranomaly ‘green insensi-
if they fall on either side of the tive’ anomalous condition.
colour division in the palette, so 4 WEINMANN, LYNDA; and HEAVIN, tri- Latin for ‘third’, and referring
that one colour is transformed BRUCE. . New Riders Publishing, tritan relating to problems with
one is in the yellows group. 1997. Browser-safe colours also blue reception.
explained on Lynda’s Web page at tritanopia condition where the
Then double-check their effective- http://www.lynda.com/hex.html. blue (third) pigment is missing, ‘blue
ness by taking a screen capture of blind’.
your choices (as in Figure 6), and 5 SIEGEL, DAVE. Images on the Web— tritanope dichromat with tritano-
applying the transformed palettes to Use the Netscape Colour Cube. pia.
them. Retrieved from the World Wide tritanomaly theoretically the ‘blue
Web, Nov. 1998: http:// insensitive’ anomalous condition, but
Postscript on Colour www.dsiegel.com/tips/wonk10/ the condition is not known to exist.
Displays images.html.
Biography
A prevalent concern about doing this 6 POYNTON, CHARLES. Poynton’s Color
kind of work in the past has been the FAQ: 19. Is RGB always device- Christine Rigden
lack of precision involved. The dependent? Retrieved from the Networks and
colours on every computer monitor World Wide Web, June 1998: Information Services,
are going to be slightly different, http://www.inforamp.net/ BT UK
according to the gamma setting and ~poynton/notes/
the colours of the RGB phosphors. colour_and_gamma/
This makes it impossible to come up ColorFAQ.html#RTFToC19.
with a single ‘true’ RGB value for any
specific real-world colour, and makes Glossary Christine Rigden is part of BT’s User
it difficult to manage accurate colour Centred Design Group. Her work
reproduction on screen. trichromat a person who has involves all aspects of designing
However, in practical terms, RGB three colour reception pigments interfaces for usability, but particu-
is used to define colour in software functional to some degree. larly developing guidelines for the
and on the Web, without concern for dichromat a person who has only conceptual design of software user
the chromaticity values. Modern two of the three pigments functional. interfaces and Web sites. She also
monitors are becoming more similar anomalous trichromat a person offers interface evaluations and
than they used to be, as manufactur- who is a trichromat, but one pigment design tutorials. Christine joined BT
ing becomes more standardised. is dysfunctional, or anomalous. in 1988 as a Drawing Office assist-
Therefore, in spite of a lack of real pro- Latin for ‘first’, and referring ant, working in graphic design. She
precision, these transformations are to red (first of the trio RGB). was sponsored to the BT Women’s
a valid and practical means of protan relating to problems with Bridging Course (Chelmsford) and
ensuring that an interface does not red reception. subsequently to the University of
cause problems for colour-blind protanopia condition where the Essex as a mature student, and
individuals. red (first) pigment is missing, ‘red graduated in 19994 with a B.Sc.
blind’. (Hons.) in Information and Business
References protanope dichromat with Systems Technology.
protanopia.
1 HUNT, R. W. G. Measuring Colour. protanomaly ‘red insensitive’
Ellis Horwood Ltd, Chichester, anomalous condition.
1987. deu- Latin for ‘second’, and
referring to green (second of the trio
2 TRAVIS, DAVID. Effective Colour RGB).
Displays: Theory and Practice. deutan relating to problems with
Academic Press, 1991. green reception.
deuteranopia condition where the
3 HCI Resources Network. Colour green (second) pigment is missing,
Vision Deficiencies. Retrieved May ‘green blind’.
6 British Telecommunications Engineering, Vol. 17, Jan. 1999You can also read
