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.
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?
The scientific approach lends itself nicely to this whole subject. Thanks for taking the time to write this Joe.
Comment by Mike Cherim (101 comments.) — August 22, 2006 @ 6:48 pm
Thanks, Mike.
I found it interesting - I wish that there was a larger data sample for that second study. It looks like a tendency moving towards a more rapid rate of preference when the text is dark against light than the reverse with this data, but there aren’t enough data points to draw any certain conclusions.
Comment by Joe Dolson (377 comments.) — August 22, 2006 @ 6:56 pm
[…] grey text on a black background is probably a bit worse for your eyes then black on white. Studies have shown that it’s harder to read and even causes some people pain after a while. For […]
Pingback by James5 – Blackle - A black Google? — June 18, 2007 @ 8:39 pm
I disagree. I have more trouble reading black on white BECAUSE of the higher contrast. I think this points more to everyone’s personal preference being different rather than any scientific rigor that suggests there is a ‘natural’ tendency towards one or the other.
I’d also hazard to suggest there could be a cultural element to it too, because it’s only really been since the advent of the computer that it was largely feasible to do white on black or other combinations in a mass media way.
It would be similar to doing a Western text book reading right to left, and then asking people whether they prefer right to left or left to right.
Comment by EasyTiger — June 26, 2007 @ 3:51 pm
You disagree with…what, exactly? Your comments are certainly valuable, but I’m not sure that they actually pertain to the article I’ve written.
What this article does, basically, is summarize research on the readability of various color schemes. I concluded with the very straightforward claim “that a preference for one or the other is predominantly related to personal preference.”
The study I cite which does state that black on white was the best choice is only specifying that black on white is better than the other color choices studied: and I don’t think many would argue that black text on white is a better choice than green text on yellow.
Very high contrast is absolutely a readability problem: but white on black is just as high a contrast as black on white. The comparison being made here is generically “dark text on light background” vs. “light text on dark background.” The subtleties of the full color spectrum just aren’t part of the question.
Thanks for your comments, though - I find your suggestions of the cultural element to be very interesting.
Comment by Joe Dolson (377 comments.) — June 26, 2007 @ 4:04 pm
I’m told its got something to do with what happens when you stare at a bright object such as a largely white screen. your pupils dilate, which increases the sharpness of your vision. Reverse it around, and so does the dilation.
Not entirely sure who it was that told me that, but it does sound plausible.
Comment by shayne — August 1, 2007 @ 11:13 pm
I believe you’re right — - I think I’ve read the same thing somewhere. Like you said, it does sound plausible, at any rate.
Comment by Joe Dolson (377 comments.) — August 2, 2007 @ 10:41 am
I’m not (particularly) disabled in my sight (other than being 51 years of age), and yet when I get to a site I need to, or strongly want to, read that is white on black — I use CTRL A (the PC keycode for highlight all) to turn the text into dark blue on white (my user settings). That allows me to read the text.
{shrug} It works for me. I wish the ‘trend’ of light text on dark backgrounds would hurry up and pass by though.
Comment by Elenor Snow — August 12, 2007 @ 8:15 pm
Ironically, that method ties in very closely with another article I wrote recently - Invisible Text Selection. The general reaction I got on that article was that other people don’t seem to notice this problem very often - but it sounds like you use text selection in such a manner that you might come across it!
Comment by Joe Dolson (377 comments.) — August 13, 2007 @ 10:57 am