Colour Choices on Web Pages: Contrast vs Readability
In 1998, someone on a web design list asked whether yellow letters on a black background were advisable; this was suggested to her because of its high contrast, but she felt it would be hard on the eyes. The original email, and my reply, follows [my editorial comments are left-indented and in square brackets]:
From: Carin Perron and John Hooker [firstname.lastname@example.org]
Sent: Thursday, September 17, 1998 2:00 AM
Subject: Re: webdesign-digest Digest V98 #502
>We are presently using white text on a black background
>for a site we are developing. Someone brought up the
>problem with printing such a page and suggested using
>yellow text instead. May I have your opinions on using
>yellow text on a black background ? Personally, I feel
>that bold text colors could be strenuous on the eyes.
The point is well made that printing a
black page is problematical, whatever the colour of text. Reading such a page
is difficult, whether on paper or a web page. Your instinct is right,
black would be hard on the eyes. Yellow and black is the highest contrast
combination, but contrast is not the same as readability. There is a trade-off
between contrast and readability: too little contrast makes things hard to
read, but too much contrast creates so much vibration that it diminishes
High contrast makes more sense outdoors when something needs
read at a distance at high speed (driving at night), but even on the highway,
yellow and black is used sparingly, for warning signs. Normal highway signs
less-jarring white on green or blue on white. Yellow on black is really
overkill on a stationary screen 12" away from the reader's eyes.
Yellow sans serif on black
Bold Yellow sans serif on black
Yellow serif on black
Bold Yellow serif on black
White sans serif on black|
Bold White sans serif on black
White serif on black
Bold White serif on black
[Yellow on black is so high contrast, it is hard to read.]
[White on black vibrates a bit less, but is still too contrasty.]
White sans serif on green
Bold White sans serif on green
White serif on green
Bold White serif on green
Blue sans serif on white
Bold Blue sans serif on white
Blue serif on white
Bold blue serif on white
[White on green is very visible at night, without being alarming.]
[Blue on white is very visible by day, and is easy to read when on the road.]
is nearly as bad as yellow on black. The screen makes this problem worse,
because you do not have simple white, as on a piece of paper, but bright
whether white or yellow. Some people prefer dark backgrounds on web pages, as
on slides, to cut down on the amount of glare, but black is an unnecessary
extreme, and tends to be favored by adolescent males, both designing and
reading. If this is not your target audience, and you like dark backgrounds,
you might think of other alternative colours.
[These days, I am less doctrinaire about never using black backgrounds. They make sense in things that are cinema-related, and we use them for our morph of the ancient Athenian coins, as well as for the information on my film, Chiaroscuro. Black backgrounds are still best avoided in general web design, I think. I would say a good rule of thumb would be, "Does this make my page look like watching a film or slide show (OK), OR, like a black light poster or black velvet painting (Not-OK)?".]
With a dark background, ensure
you do not have overly-bright lettering: tone down white lettering to a pale
gray, or dull the colour used to minimize extreme contrast and glare; this
principle is used when doing slides, as well: at least 5% gray is used to cut
the glare of bright white. Interestingly, this still "reads" as white. Also,
make the text bold, so it has enough body not to be "eaten alive" by the
White sans serif on black
Bold White sans serif on black
White serif on black
Bold White serif on black
Pale gray sans serif on black|
Bold gray sans serif on black
Pale gray serif on black
Bold gray serif on black
Black sans serif on white
Bold black sans serif on white
Black serif on white
Bold black serif on white
Black sans serif on pale gray|
Bold black sans serif on pale gray
Black serif on pale gray
Bold black serif on pale gray
Culturally, of course, yellow on black spells "panic" because of the
convention of using it for warning and yield signs, as well as for police
tape; more elementally, yellow and black together is a very disturbing
absolute negation with what becomes an almost-hysterically hyper-cheerful
yellow. Max Luscher, the colour psychologist, says this combination makes
yellow the compensation for whatever the black is denying or negating.
a subliminal message here that may easily overwhelm your content.
Highway warning signs
are black on yellow,
not yellow on black.
time to think about what the content of the web site is, and read up on the
psychological "meaning" of various colours, so you can appeal to your intended
audience. Much nonsense has been written about colour psychology: myself, I
think a combination of Max Luscher and Johannes Itten will help steer you away
from some of the trendy silliness out there.
Luscher developed a deep psychological test based on simple colour choices in a controlled environment:
his book on the short, 8-colour version of his test is very instructive. A
moment's reflection on the complexity of these few colours, compared to the
subtleties of the full test consisting of hundreds of colours, shows how
difficult it is to making sweeping, simple choices when it comes to colour.
Luscher's work is based on universal colour meanings, as shaped by individual
quirks and pathology; in contrast, Itten's work looks at colour more from an
artistic point of view. While there is a consensus about colour, and everyone,
on some level, understands this, the personal preferences are more
As an art teacher, I have experienced first-hand one of the elements he [Itten]
mentions, the fact that people tend to prefer their own physical coloration,
that is blue-eyed blond(e)s like blue and yellow specifically, and light,
bright, pastel colours in general, while olive-skinned, dark-eyed people tend
to prefer browns, blacks, and other deeper, more saturated colours. I was
covering an art class once where a blonde student was being pressured by her
brunette teacher into darkening and deepening the colours of her painting. I
explained her teacher's natural colour bias, and exhorted the student to be
true to herself (though I am dark myself, and have the same bias).
There are so many layers to colour meaning, after taking care of simple optical truths.
Universal, archetypal meanings whose responses reside in the reptilian
hindbrain (Robert Ardrey's Territorial Imperative has an interesting passage
on animal responses to red, which are essentially the same as human
responses). Psychological states which alter one's responses. One's own physical
coloration. Cultural associations, including art-historical and fashion
issues. Associations with other experiences, such as food, fabric, nature, or other
On top of this, not only do colours affect each other physically
when laid side by side (Joseph Albers' Interaction of Colour has examples of
such extremes as grey turning yellow when placed atop violet), but the
combinations of colours affect each other's meaning psychologically
(Luscher is good for this).
In short, the best colours are the ones that suit the subject
and your intended audience, and coordinate with each other optically and
psychologically to enhance your meaning. Contrast is a minor point. So long as
the page is readable, you have a lot more complex issues to deal with.
I have a list of books on colour theory on my own page, which refers to the books I've
mentioned, and others. The web is just another application for this knowledge,
and, of course, brings its own spin to things.
Hope this helps.
our Website at http://www.writer2001.com
Coriosolite Expert System...
Hooker & Perron, Total Project Coordination
Technical Writing...Graphics...Maps...Colour Suites...Expert Systems
*** List info, status, FAQ, etc.:
Contrast is such a bug-bear to people, still, and continues to create problems for computer users. Optically, the old screens of the "dumb terminals" were as easy on the eyes as could be: green lettering on a black background. So long as there is no glare on the screen, darker screen colours are less fatiguing to look at. Green, of course, is the least fatiguing to the eyes, because it is the true "complementary colour" of the visual purple in the eyes, so helps the eye to maintain the visual purple, instead of stripping it, which causes eye strain.
I well remember some early old Toshiba laptops (we're talking late 1980's, here) that had stark red letters on a black screen. It was enough to make your eyes bleed.
It reminds me, again, of early experiments in computerized marking sheets for schoolteachers in Alberta, Canada: one year (1981) had red circles to be filled in with soft pencil and read by the computer. I recall one high school teacher who did her marking for final exams outside in the gorgeous summer sunlight, and actually burned her retinas. The previous year had had some colour like green or blue, and someone thought the red would be sufficiently different to distinguish the years.
Why don't we do "green on black" or use green in computer displays now? Because it seems very old-fashioned and creaky, but I think those early designs were very "ergonomic," even though that term wasn't much bandied-about in those days.
|More ideal might be
green on dark green, though I think I still prefer the black, as being more restful to the eyes.
Then there were the amber-text screens, which weren't bad, either, but I still prefer the green, given my druthers.
So what do we do now? Bright white backgrounds, with black lettering, for our general office programs. This may be very WYSIWYG (what you see is what you get), but they are still hard on the eyes.
I've been asked about early studies which some branch of the military did which concluded that the original "choice" of computer screen default colors green/black was the most eyestrain inflicting combination. I do not have access to this study, but looked at a few possibilities.
They may have used "pure green," which is very hard on the eyes, since it is one of the brightest colours we can perceive (it is the brightest in low-light situations, but in normal light, yellow is brightest).
Perhaps the text was also quite thin, which is also hard to read, though most old monitors seemed to use a thicker display font.
I am not familiar with this research, so my comments have to be taken with that in mind. Of course, I could simply be wrong, but my own experience working with computer screens of this type, as well as my other reading, makes me wonder exactly what the parameters of the study were. There may have been other variables* not taken into account.
Does anyone remember the old WordPerfect screens? They looked like white on blue, though the letters were really a light gray. You could change the colour combinations, though, and I remember that I would do this periodically, just to give my eyes a rest.
What do I do with modern screens? I turn down the brightness and contrast when I'm not doing graphics. In my long-ago days of data entry on computer screens I could not change, and proofreading tiny output of black print on bright white paper, I used to wear sunglasses. Everyone laughed at my wearing shades, and one employer even became angry, but when I explained the reasoning behind it, he reluctantly left me alone. I even wore shades to do photocopying -- hey, the actinic light from the photocopiers is hard on your eyes!
Or, really, really going back in time, now, does anyone remember the paperback books that were printed on dull green paper? They were very easy on your eyes, and I loved them, but they never seemed to catch on.
Still, one good thing about regular modern paperbacks is that the pages are newsprint, which are dulled enough that they are easier to read than bright-white pages.
If I'm so in love with dark screen colours, then why don't we use black backgrounds on our web pages? Simple. What is best for text alone changes when you bring pictures into the equation. Most images on a black background create a very high-contrast situation that is more difficult to look at for a long time than lighter backgrounds. If you'll notice, most of our pages are not stark white, but have a light image background that gives a slight "paper texture" look, and is a bit softer and kinder to the eyes. You'll also notice that, not only is this text gray, but even the text of my original reply has been made a dark gray. Only the original query, which is in unformatted text, is black. I've done this to be kind to your own eyes, dear reader.
So, whatever you do or don't remember, if you do web design, or any design for things people need to look at, especially if they need to read something on the page or screen, keep these things in mind. Happy designing!
If the research was done many years ago, it may well have been with the older monitors that were essentially a television screen, with the interlaced lines and resolution 1/4 that of a modern computer monitor. If this is the case, then the research may be more relevant to WebTV than to modern monitors with continuous (non-interlaced) display, small dot pitch, and high refresh rate.
I well remember the eyestrain I suffered from some older computer monitors even as late as 1991: without special mesh screens to filter out the brilliance of the phosphor dots, it was difficult to avoid headaches.
Under these circumstances, the text would probably have consisted of a small number of very brilliant green dots against a black background. Also, the shade of green would be very important to the overall effect.
Yellow is accepted as the most luminous colour in daylight or brightly-lit situations; in dim light or semi-darkness, however, because of the "Purkinje shift," green becomes the most luminous colour. If the tests were done in a relatively dim room, a pure green would have provided the highest contrast with the black background, and would have easily created very bad eyestrain. We often also see this in web pages with yellow text on black backgrounds, since this is the brightest colour under normal illumination.
The green used in my example of green on black in the above article is not pure green; it is the green accepted in HTML as "green," which is a green level of 128, not 255 (which would be full-on green), so the contrast is minimized somewhat; also, since I used bold text, the letters are less likely to be "eaten away" by the contrast. So, yes, pure brilliant, unmixed green (RGB value 000-255-000) would be very contrasty, and would create eyestrain.
As I mentioned earlier in the article, one wants just enough contrast for clarity when reading close-up, but not so much contrast as to cause vibration, and thus, eyestrain.
The reason I suggested green was the fact that the rods and cones of the eyes contain the substance "visual purple," which is the perceptual opposite (or complement) to green; therefore, green should cause the least amount of colour-related eyestrain. Visual purple is less like purple than a cool bluish red, so the perceptual complement is a more bluish green. To quote Dr. Ladd-Franklin:
"...The fact that the adaptation-substance is purple in colour serves a useful purpose. The most common faint light of nature is the faint light of dense forests, which is green. The rod pigment is therefore especially adapted to the absorption of the only light which penetrates them."
Classics in Psychology: Colour and Colour Theories, Ch. IV, "Normal Night-Blindness of the Fovea.", Arno Press, N.Y., 1973.
A few paragraphs before this, Dr. Ladd-Franklin mentions that that the visual purple in the rods of colour-blind people respond exactly the same. This is important, when one considers that colour-blindness is highest among white males of European ancestry (about 8%), is rare among white women (less than 1/2%), and nearly unknown among North American aboriginals -- I do not recall the reference for this, but it is well-known. Any system of light or colour must work for people with any amount of colour-blindness, even to the extent of the rarest one, those few who see no colour at all. A brilliant green would not be similar to filtered leaf-green, and the eye could not be expected to adapt well to it.
But using a soft, darkened, clear green, which the eye is well-adapted to, with a black background that makes no demand on the visual purple, being the absence of light, should be very restful to the eyes. This is traditionally why slides and movie credits are shown against black, instead of as black against white.
There are many reasons why the research condemning the black/green combination could have produced that finding, or increased the severity of it:
- The green may have been pure, brilliant green, creating excessive contrast, and not being the correct complement to the visual purple.
This brilliant green would then have created vibration from the high contrast with the black background.
The text may have been made up of very few dots, if low-res, TV-like screens were used, making it difficult for the eye to resolve the letters without strain.
The screens may have had the "interlaced" display of early TV screens, which makes reading text difficult, but I doubt this, as even very old screens seem to have eliminated this. This issue is probably going to recur with WebTV, but even some new TVs no longer use interlacing.
Even if non-interlaced, the monitor screens may have had a low refresh rate, adding to eyestrain. High contrast between black and brilliant green could have exaggerated the eyestrain caused by this.
If the rooms were not dark, any bright lighting in the rooms may have created extreme glare against the black screens, adding to the eyestrain.
Also, ergonomics were less understood then, so the chair height, screen height and angle, etc., may have been less than ideal, or not adjusted to the individuals.
If the room lighting was fluorescent, the flicker rate of the lights and the refresh rate of the computer monitors could have been in conflict, causing a out-of-synch pulse, which could increase eyestrain (made worse by the high contrast of pure green/black). A similar effect can be seen on TV newscasts, where the background computers show a strange "rolling screen" effect because of this interference between the two flicker rates. This is kind of like a "moire pattern," but in time, not space. This would not affect the difference between colours, but the brilliance of a pure green could have exacerbated the strain of this effect.
Research on workplace injuries, such as repetitive stress syndrome, indicates that emotionally tense workplaces are related to higher numbers of injuries (ref. Office Ergonomics - Remembering the Basics (PDF), Workers' Compensation Board - Alberta, 1999 - unfortunately, the "monitor" section of this book confuses clarity of contrast with protection from eyestrain, when these are inverse relationships). The theory is that emotional stress leads to tensing of the muscles, making them more vulnerable to injury. A similar effect may occur with eyestrain, where a stressful working environment could contribute to a decrease in the workers' ability to adapt flexibly to visual input. Even the knowledge that they were being studied could have increased the subjects' emotional stress, making some of the strain an artifact of the study.
Personally, I remember the green on black screens being easier on the eyes, than either the amber-on-black, or the modern screens with black text on white backgrounds: this would be easier to replicate on WebTV. Even as recently as last year, I needed to work on an old system still used by an industrial client, and their green on black screen setup was very easy on the eyes. I tend to be sceptical of research that flies in the face of experience, and wonder what other factors were at play.
As an interesting aside, the "forbidden colours" (for guests to wear) on TV are white, black, red, and sky blue. White is too brilliant, and creates the most havoc; red is also too intense, and causes contrast problems, black creates the appearance of a "hole" in the screen, and sky blue is the colour used for matte projection, so the weatherman wearing a blue tie will be wearing part of the "weather map" on it. Close stripes, hound's tooth, and other such suit patterns are also forbidden, due to the moire patterns they create. Much of this is due to the low resolution and high brilliance of the screens, but would also be best avoided even in high-res computer screens.
In industries that rely on people spending a long period reading text from an illuminated source, the film industry (for the credits), and the presentation industry (from slides to computer screen projectors), the standard is the dark or black background with lighter text, though even the "white" is, the techs tell me, at least 5% gray. But in both industries, the time spent reading text is small: in film, only a few minutes; in presentations, no more than half an hour to an hour.
This does not approach the length of time people working in front of computer screens spend, but if it goes against every instinct and experience of a slide technician to produce a white slide, even though that slide may only be viewed for a few seconds, I find it amazing that the new computer standard for programs is black on white.
This is an example of a typical statement, from the Minnesota State Employees Union Agreement:
"Color of screens seems to be a matter of personal preference, although some research has shown that red and blue should be avoided. [my comment: since red and blue are the highest-contrast colour pair known, and creates visible vibration at the edges, this is over-obvious and not very helpful] Most screens in use today are called negative polarity, or light characters against a dark background. Some people appear to prefer positive polarity, or dark characters on a light background because they feel it aids in focusing, requires less adaptation by the viewer, and decreases glare and reflections on the screen." (Minnesota State Employees Union, AFSCME, Council 6 Agreement 7/1/99 - 6/30/01)
There doesn't seem to have been enough work done in this area. I've often felt that one of the reasons for the changes in screen colours was a desire to avoid a "dated" old-fashioned look; the modern black-on-white also is part of the WYSIWYG philosophy, attempting to imitate the printed page, and then doing a bit of a "backward-formation" into saying this is easier on the eyes. It is easier when one wishes to visualize the printed page, but that is not the same thing.
I do recall, a few years ago, when the WordPerfect/MS Word rivalry was heating up, Microsoft came out with the first WYSIWYG page with black characters on white, that was not only a print preview (as WordPerfect had previously had) but could also be edited in, which was easier than switching back and forth from Print Preview to regular editing mode. WordPerfect responded by making the WYSIWYG look their standard page look, though allowing the operator to revert to the traditional light gray on dark blue screen. I found most experienced operators preferred to do most production work in this mode, since it was easier on the eyes. Over time, I've found, when working with the employees of various clients, the younger operators prefer the black on white, having known nothing else.
Also, most early web pages (after the old Lynx days, when graphical browsers emerged) were very "vanilla," and were black on white, and this became a look people were accustomed to on the web.
I also think it depends on whether a person is scanning a page for information, reading through a long mass of text, or actively doing work, such as typing or data entry, what is easiest. Dark on light is familiar for reading, being like a book, though it can be hard on the eyes after a long time; light on dark seems better for something one is actually working on for hours. I don't know of any studies that have really looked into this in any depth: I think it is mainly industry-driven, which is based on rivalries and consumer familiarity...people like what they know.
For myself, when working in programs that only allow black text on white, I turn the brightness and contrast down on my computer as much as possible, or I experience eyestrain and headache. This is not possible when doing graphic work, but then the black/white problem is not so bad.
Looking at people I have worked with over the years, I seem to be more sensitive to eyestrain on computers than most people: the old monitors were so bad that, without one of those "filter screens", it would take only a few hours for me to have severe, blinding headaches from eyestrain (in the old days, I actually used to wear sunglasses when no monitor screens were available, and this made all the difference in the world: the glasses were, of course, dark green).
Much of the research has been covering the broad strokes, so to speak, and much actual colour work requires more precision, so one needs to proceed with some trial and error, then experience, then limited testing focused on the particular need. Also, research is easier when there is only one variable: in practice, the interaction of many variables creates a scenario that is quite different from the sum of its parts.
I find this is analogous to the research done on how the eye perceives movement in film. As an animator, this is a matter of great interest to me, but in practical fact, the scientists have been satisfied with very broad, average answers that do not address particularities: it is the filmmakers themselves who have done more of the detailed experiments, and the film technicians.
"Persistence of vision" is a term long discarded in the scientific community, though still believed in by filmmakers. There is no replacement theory of any help: it is simply called "the phi phenomenon" and left a mystery. But we know there is a "flicker effect", as well as a "jitter effect" that is usually considered undesirable by filmmakers and viewers. Scientists clock this between 1/5 and 1/10 of a second. Animators know this is only an approximation. Some animation, done "on threes" on video (1/10 second) will work, and yet, other effects, done "on twos" on film (1/12 of a second) produce a visible jitter. It is well known in the industry if any camera effects, such as zooming, panning, etc., are used, the scene must be shot "on ones," or jitter occurs, so this requires 1/24 of a second to avoid. High-contrast moving edges, and a number of other factors, also affect this.
This is all a matter of human perception. All the little details matter, because people seem to perceive holistically, and every element interacts with every other element, changing the entire scenario. I find colour is very much this way.
Dealing with computer screens and their refresh rates may also include certain phenomena found in film, since there is "flicker": graphic artists know a higher refresh rate on their screens decreases eyestrain considerably, so colour alone is not the only factor. If we can generalize from film and animation, the higher the "edge contrast," the greater the flicker effect and eyestrain. Graphic artists know this, and usually use raster images that are "antialiased," giving a blended edge between the two colours, which decreases Simultaneous Contrast, as noted by Chevreul in the 1800's, and has been confirmed by Faber Birren, and the experience of people working with graphics. Vector images, though great for printing, are harder to look at on the screen, since the screen will always break them into pixels, and without the softening effect of antialiasing, lines and edges are sharp and cruel.
Since text on screen is usually displayed based on vector fonts, it seems best to diminish the contrast between text and screen, to minimize the strain caused by the flicker.