A couple days ago, Roger Johansson published a complaint about the problems he’d been encountering recently with light text on dark backgrounds. It’s an interesting subject – is there a distinct usability difference between dark text on light versus light text on dark? For Roger, there’s no question – light text causes pain. If it hurts, it’s not going to happen. But how general is this kind of problem?

Roger points out an interesting quote from designer Mark Boulton specifying how to deal with reversed color schemes and text. However, Mark hasn’t provided a concrete usability-related reason for his reasoning.

When reversing colour out, eg white text on black, make sure you increase the leading, tracking and decrease your font-weight. This applies to all widths of Measure. White text on a black background is a higher contrast to the opposite, so the letterforms need to be wider apart, lighter in weight and have more space between the lines.

Mark Boulton

Are these designs with inverted white on black more difficult to read because they haven’t followed this rule, or because white on black is inherently less readable?

There are studies on the readability of various color contrasts, which generally demonstrate that dark colored text on lighter backgrounds are easier to read. However, I’ve been unable to locate a study which also considered more complex design considerations such as the kerning or specific color contrast of the text – which certainly must play a role. A study by Dr. Lauren Scharff and student Alyson Hill (more information) of Stephen F. Austin State University shows the expected results – black text on a white background is the best rated combination for readability:

…the most readable color combination is black text on white background; overall, there is a stronger preference for any combination containing black. The two least readable combinations were red on green and fuchsia on blue. White on blue and red on yellow were ranked fairly high, while green on yellow and white on fuchsia were ranked fairly low. All others fell somewhere between these extremes.

Also, in every color combination surveyed, the darker text on a lighter background was rated more readable than its inverse (e.g. blue text on white background ranked higher then white text on blue background).

Following these initial findings, the study continued to perform a more complex examination of the question including considerations of font style and font face – however, the choice of color combinations did not include any reverse pairings, so this second examination doesn’t provide any useful information.

A second study, at the Adaptive Technology Resource Centre of the University of Toronto, approaches the question in a more rigorous manner. This study uses algorithmic measurements of contrast and hue to determine whether text should have high readability. The study considered the difference between a bright text on dim background and mapped the results to discern whether there was any apparent benefit to one or the other:

In order to assess whether the direction of the brightness difference (i.e. bright text on dim background vs. dim text on bright background) is of any importance in determining readability ratings, brightness difference was calculated as the difference between background and text brightness. In the case where the background was brighter than the text, this difference was found to be positive. For those images in which the text was brighter than the background, this difference was negative. The brightness difference was then plotted against the median rating, and yielded a ‘U-shaped’ plot, shown in Figure 6 (below). This plot suggests that the direction of the brightness difference does not appear to be of importance in determining overall readability ratings.

U shaped data graph
[D]

The suggestion at this point is that a preference for one or the other is predominantly related to personal preference. It’s an interesting issue, however – I, for one, certainly have a strong preference for dark text on a light background. Anybody else?