The Impact of Colored Backgrounds on Text Readability: Pioneering Test Results

From a design perspective, it makes sense to vary the traditional black print on a white page to create more visual interest. But what about the impact of colored backgrounds on readability and comprehension? These factors are more important than an attractive design.

Colin Wheildon, editor of the largest Australian motoring publication, wanted the answers to this because he knew that a nice layout means nothing if readers have to work hard to read the words and afterwards can’t remember what the content was about. With one million readers, he wanted to maximize the effectiveness of his publication.

No research had ever been conducted on this topic – people had merely relied on their intuition – so Wheildon set up a pioneering series of tests to find out the truth. Six separate series of tests were conducted, in which readers were given samples with text printed on tints of 10% of the base color, which was increased in strength in increments of 10%.

Results of the tint tests

Color combination and comprehension level %

1. Black on cyan tint (process blue)

• 10 % tint: Good 68, Fair 24, Poor 8
• 20% tint: Good 56, Fair 21, Poor 23
• 30% tint: Good 38, Fair 19, Poor 43
• 40% tint: Good 22, Fair 12, Poor 66

2. PMS 259 purple on purple tint

• 10% tint: Good 50, Fair 14, Poor 36
• 20% tint: Good 32, Fair 10, Poor 58

3. PMS 286 royal blue on royal blue tint

• 10% tint: Good 27, Fair 16, Poor 57
• 20% tint: Good 12, Fair 10, Poor 78

4. Cyan on cyan tint (process blue)

• 10% tint: Good 6, Fair 7, Poor 87
• 20% tint: Good 0, Fair 2, Poor 98

5. Black on PMS 399 tint (olive)

• 10% tint: Good 68, Fair 26, Poor 6
• 20% tint: Good 53, Fair 21, Poor 26
• 30% tint: Good 32, Fair 19, Poor 49
• 40% tint: Good 22, Fair 13, Poor 65

6. PMS 399 on PMS 399 tint (olive)

• 10% tint: Good 8, Fair 8, Poor 84
• 20% tint: Good 2, Fair 6, Poor 92
• 30% tint: Good 0, Fair 3, Poor 97

Black on white

• 0% tint: Good 70, Fair 19, Poor 11

Black on grey

• 10% tint: Good 63, Fair 22, Poor 15
• 20% tint: Good 33, Fair 18, Poor 49
• 30% tint: Good 3, Fair 10, Poor 87

Black on yellow

Although the combination of black on yellow wasn’t included in the tests, you can see from the extract shown below of Mailchimp’s log-in page, that black on plain yellow is very readable.

Image: Mailchimp Log-In page.

Reader comprehension results

Interpretation of results is that black is the most effective color for body text, and that reader comprehension is high when white or a light tint is used as a background to the black text.

Reader comprehension becomes poorer as the tint is darkened. There needs to be a good amount of contrast between the intensity of the text and the background color.

Black text on white background gives the best results (boring, but hard to escape this fact!). Black text on a light tint also gives a very good result – readers reported they liked the attractiveness of black on a 10% tint of cyan and also black on a 10% tint of olive green. Black on light grey (10% of black) provided a good result as well.

However, printing colors on their own tints makes the text extremely hard to read because there is not enough contrast between the text and the background color. Black is an exception to this.

You can ignore the above information at your peril

For instance, printing on a 20% tint instead of a light (10%) tint cuts reader comprehension by at least 20% in one stroke. It’s like throwing away one fifth of the copies of your publication!

(Although Colin Wheildon’s original book is out of print, his latest version is available under the title: Type & Layout: are you communicating or just making pretty shapes? Author Colin Wheildon, publisher The Worsley Press, Melbourne, Australia, 2007.)

Color printing

Image: CMYK solid colors are used in 4-color process printing on white paper.

Using ‘halftones’

Almost any color can be printed using a combination of the 4 CMYK (cyan, magenta, yellow and key [black]) colors. With CMYK printing, halftoning (also called screening of the CMYK colors) can be used to create tints of colors. Tiny dots of each primary color are printed in a pattern small enough that people perceive a solid color from the combination. For example, magenta ink printed with a 20% halftone produces a pink color, because the eye perceives the tiny magenta dots on the large white paper as lighter and less saturated than the color of pure (‘solid’) magenta ink.

Without halftoning, the three primary process colors could be printed only as solid blocks of color, and therefore could produce only seven colors: three CMY primary colors, plus three secondary colors produced by layering two of the primaries. With halftoning, a full range of colors can be produced.

Colors used in electronic devices

Most of the colors on computer monitors, smartphones etc, showing images in web pages, email designs, and suchlike are based on RGB (red, green and blue) colors. A computer monitor mixes shades of red, green, and blue light to create color pictures. Items displayed on a computer monitor may not completely match the appearance of printed items. When designing items to be printed, designers view the colors they are choosing on an RGB color mode (their computer screen), and it is often difficult for them to accurately visualize the exact way in which the colors to be printed will turn out because of this.

Photo: Computer printers, such as my Brother MFC-9330CDW multi-function laser printer, top of page, can print documents in good-quality full color. Observe the 4 toner cartridges (nearest to furthest in this shot): yellow, red (magenta), blue (cyan), and black (key) within the printer. Laser printers use toner cartridges (filled with fine powder) and a heated fuser, while ink jet computer printers use ink in the same four colors, which spray liquid ink via microscopic nozzles onto the paper.