Some Mysteries of Colored Text
By Gerd Waloszek, SAP AG, Product Design Center – 11/17/2000
In my second article on colors I discuss some "mysteries" of colored text. Text plays a prominent role in any software, but in the "old days" there was usually not much to consider with respect to text colors: we mainly found black text on a gray background. The Web, however, changed this too. We find every variety and combination of colored text and backgrounds on the Web – many of them illegible and unpleasant to look at. This article aims to provide some hints on how you can improve the legibility of colored text. I also discuss the intricate interaction between foreground text colors and background colors. You can easily transfer these tips to line graphics as well.
Beware of Blue? Beware of Green, Cyan and Yellow!
Many design books warn against using the color "blue" for delicate structures like text on a white background, because human acuity is worse for blue than for other colors. My personal experience, however, is a different one: green is much more critical than blue. I don't know the reason for this – can anybody help me? If it's not our eyes, then maybe the phosphors of the CRT (cathode ray tubes) screens and the crystals in the LCD (liquid crystal display) screens are the reason. A similar point can be made for cyan and especially yellow. Anyway, here are a few examples that demonstrate this point:
|
Improving the Legibility of Colored Text
You can make text easier to read if you use darker colors and/or bold type.
Darker Colors
|
Be careful not to make the colors too dark as these may no longer be recognized as colors, but as black. Also, you may notice a color shift, when you simply darken colors with respect to color values. To keep the same hue impression you have to manually adjust the colors as done in the following examples (see also my first article about colors: "Some Color Mysteries")
|
Bold Type
Bold type prevents color assimilation (see also my first article about colors: "Some Color Mysteries"), that is, the intruding of the background color (here white) into the letters. Even when bold, however, the colors green, cyan, and yellow are not legible on a white background. You should therefore use them in darker versions.
|
Foreground Background Relationships
Red and Blue
When combining colors, for instance colored text on a colored background, be careful not to combine highly saturated blues and reds. Not only do these colors create an unpleasant visual effect – the colors are also perceived in different depths, which strains the eyes.
|
Of course, there is no rule without an exception. You may want to use this effect to attract attention to your website.
Place Colored Text on Neutral Background to Improve Legibility
If you want to achieve maximum legibility, place colored text on a neutral background (white, black, or gray). You can also use black or white text on a colored background, as shown in the examples at the bottom of the left column:
|
Colored backgrounds may also change the hue of colored text through color contrast or hue induction (color assimilation [reference to first article]), as demonstrated in the right column.
Improving Color Consistency
You can make colors more consistent by using backgrounds which are desaturated and of a similar hue to the text or, for increased contrast, of a complementary hue:
|
Final Word
Using colored text may require some fiddling and testing, especially when used in combination with colored backgrounds. Also note that there may be dramatic hue shifts between CRT and LCD screens as used in laptops and projectors for presentations. Light yellow backgrounds may also be hardly visible on LCD screens and with LCD projectors.
