On the readability of inverted color schemes

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?

19 Comments to “On the readability of inverted color schemes”

  1. I like dark background more, monitors max light (white) can burn the living hell out of your eye. It’s a matter of configuration, but ol’ grannies don’t config that much. Why not stick with the less harmful one, and as the studies tell, as readable option. Dark-on-light seems to me, be a matter of preferance more than something based on professional studies. For ages have we had everything printed with ink on a light colored paper. Definately not a good enough reason to stick with the stuff that eats your eye in the long run.

  2. Thanks for your experiences, Damian – it seems like you’re definitely one of the minority, on that. For your information, both studies focused exclusively on projected light, and specifically on computer monitors.

  3. I prefer dark text on light paper when the light is reflecting (i.e. paper). But when it is looking at light projecting (a monitor) the reverse is true (light text on black background). The study did not seem to indicate how it was studied or if it took those crucial differences into account.

    Certainly, the greater the contrast the easier it is to ‘create’ the letters in my mind.

  4. Thanks for chiming in, minetruly – I appreciate hearing from people who have specific experiences with contrast problems.

    Best,
    Joe

  5. Pure white text on a pure black background hurts my eyes, is hard to read, and produces annoying after-images. I’m 26 and this problem has developed within the last year or two; when I was younger, white-on-black didn’t bother me at all.

    I have a program called Dark Adapted, which allows me to change the color of my screen (Mac/Windows). I use this to change the color of white text when I find a page I want to read.

    Light gray on dark gray doesn’t bother me.

  6. There are two general issues which do not get mentioned too often wrt this discussion (as applied to LCDs).

    1. First, LCDs normally use a fluorescent backlight bulbs which are known for their harsheness of colour. Regardless of the claims that this harsheness has been corrected dramatically in the recent years, the point remain pretty obvous: this light is damaging to your eyes. Hence is the normal colour scheme.

    2. Flicker is the second issue with any monitors you use. The studies have shown (I do not have links right now at my hand but you can google it) that flicker up to 100Hz overstimulates brain of the subject to the dramatic and statistically significant detriment of their cognitive function. Ever wondered why it’s harder to remember text read of the screen rather than paper – search no further. The productivity goes down as well in inverse correlation to the time spent at the computer. Flicker is not only inherent to a 60Hz refresh rate for my top of the line LCD, it’s also an inherent feature of probably most fluorescent bulbs, inluding the one which lits your display. And if you spend most of your time in the office you get extra brain stimulation from office fluorescent bulbs too.

    Well, if there’s little usability issue normal vs. inverted colour schemes it seems reasonable to have those two considerations on the back of your mind. Personally, after finding a way to invert colour on my PC, I can work for 12 hours straight without feeling deepleted emotionally or having sore eyes. The only problem is glare, but that can be handled too.

    :)

  7. It is really informative articles. Sitting in front of computer hours a day, I have problem with my eyes. Recently find out a way to protect my eyes: invert scheme.

    I use Opera and use its inverted color scheme (View > Style > High Contract (W/B)) and in MS Word, I use Blue Background, White Text (Tool > Option > Blue Background, White Text). These schemes seems protect my eyes.

    But I the best scheme is Black background, and Cyan text (#00CCCC) or Black background, light gray text like command prompt in Windows.

    All thoughts are about color, but about the font, I agree with Mark Boulton: “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.”

  8. Since monitors are a projected light source regardless of the color of the light, I think the light-exposure and power-use issue is going to happen no matter what colors you use – even the blacks may actually be projected light. I don’t know whether the color of light makes a difference in terms of eyestrain, but certainly turning the screen brightness down will make a huge difference! That will actually have an effect on the quantity of light generated, and reduce the impact on your eyes. (Unless, of course, you turn it down too far…in which case your eyes may be working just as hard to perceive the monitor at all.)

    Since I spend an inordinately large amount of time at the computer, I tend to keep the screen brightness turned down, except for when I’m doing design work, of course…

    There is, in fact, a document discussing white on blue text which talks about WordPerfect. It’s by John Rhodes, from WebWord. The articles he references are the same I referenced above, but he does say:

    In any event, the white on blue contrast provides especially good contrast in low brightness environments. And, as William told me, this was very useful when refresh rates were slower (i.e., less than 60 Hz). The white on blue contrast in such situations reduced perceived flicker.

    So, that’s interesting information!

    Thanks for your comments, Petter!

  9. Thanks for looking into a very interesting subject.

    Lately, my time reading webpages has gone up considerably due to studying. My eyes becoming sore, I’ve been reminiscing about the good old WordPerfect for DOS in the early nineties. Remember, it used a white-on-blue on-screen scheme? To me, this has always seemed better for ones eyes due to less total light exposure. After reading your article, I’m not so sure anymore.

    I’m interested in another aspect also, though. Saving energy. I was very surprised to find out that lcds don’t save any power on lighter colors. However, having turned my screen brightness level down from 75 to 15 (!!!), my eyes are now so much better. And this HAS to make me more energy efficient.

    Anyway, my point is that these are connected considerations to make while designing for the web. I haven’t found much on it, but I’m sure there was something relevant to these issues prompting the developers of WordPerfect to make it as they did.

  10. Thanks, Eric. I’m glad it was helpful for you. It can be a difficult area to pin down, since a significant element is personal preference — but there is still an identifiable aspect which is measurable.

  11. Thanks Joe for the in depth research, exactly what I have been searching for! I am an Information Architect, and have asked my Usability colleagues about this issue. Though they all speculated that dark text on light backgrounds was the “Correct” way, none of them could point to any research on the topic. I myself prefer the dark on light combo, but I do not find the light on dark to be as annoying as others do. Except the extreme cases, like one might see on MySpace, where some people make the text a bright and saturated, pink lets say, text on a blue background… something like that makes my head hurt. I started down this path because it seems so counter intuitive, with less light shooting out of the monitor at your eyes, one would think you would have less eye fatigue? But as my colleague pointed out, we need light to see. Thanks again! Great stuff.

  12. 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!

  13. 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.

  14. I believe you’re right — I think I’ve read the same thing somewhere. Like you said, it does sound plausible, at any rate.

  15. 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.

  16. 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.

  17. 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.

  18. 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.

  19. The scientific approach lends itself nicely to this whole subject. Thanks for taking the time to write this Joe.

Return to Top