Light text on dark background vs. readability

What’s up with the current design trend of light text on dark backgrounds? Many web designers seem to favour inverted colour schemes, but what happened to readability and usability? I know I am not the only person to find it very uncomfortable to read text on sites with inverted, high contrast designs.

Light-on-dark designs aren’t new. What’s new is that they have been appearing more frequently in the last year or so. Just take a look at the CSS Reboot Spring 2006 participants. Plenty of light-on-dark designs there.

So what, exactly, is my complaint? If I don’t like the design of a site, I don’t have to visit it. Well yes, but there is a lot of interesting content on some sites that use inverted colours. When possible, I read their content in my feed reader. If I can’t do that I just stop visiting. It’s a shame, but my eyes simply can’t take the strain.

It isn’t just about using light-on-dark text in the main content area either. I also find that high contrasts between different areas of the page cause problems. An example is when the main content area uses dark-on-light and there is an inverted sidebar right next to it. It hurts my eyes, and if possible I make my browser window narrow enough to hide the inverted part of the page when I visit sites that have that kind of design.

Note that I am not criticising the aesthetics of inverted designs, just their readability. Several light-on-dark sites look fantastic for a few seconds or even a minute. I just find actually reading articles on them very straining on my eyes, and I hate the way they linger on the retina when I look away from my screen.

Since most of the sites I want to read are quite well-structured and semantically marked up I could just turn CSS off in my browser and gain instant readability. I could also start messing with user stylesheets. I don’t think either should be necessary though.

To me this is an accessibility issue, the same way many people with impaired vision prefer light-on-dark text and may have problems similar to (or worse than) mine when reading dark-on-light text. As far as I know, I am not vision impaired. At least I have never been told so by an optician or an ophthalmologist. I still struggle with high-contrast, light-on-dark designs.

So if you want to use light text on a dark background, please provide an alternate stylesheet that turns the whole design, not just the content area, back to dark on light. You should also consider what Mark Boulton has to say in Five simple steps to better typography:

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.

I haven’t been able to find much recent research or usability testing that compares the readability of light-on-dark vs. dark-on-light designs. If you are aware of anything conclusive, please speak up.

Who else out there is having problems reading light-on-dark text? Who is not having problems and actually find it easier on your eyes? If you have used light-on-dark for a design, did you perform any usability testing? If so, what were the results?

I’d like to know if I need to have my eyes fixed.

Update:

  1. My preference for dark-on-light designs is not based purely on what I think looks better. I prefer them because I really cannot read white-on-black or light-grey-on-dark-grey designs unless I’m longing for a headache.
  2. Thanks Robert for posting a lovely bookmarklet that makes every site readable. Drag the link to your toolbar and use it next time you go to a site that you can’t read. If you’re a white-on-black fan, change the values.

Posted on August 21, 2006 in Accessibility, Usability

Comments

  1. Interesting post, I hadn’t really considered this angle. Whilst I like some of the designs with light-on-dark, I always lean towards dark on light as a personal preference when designing.

    I would also be very interested in any research on the accessibility aspects of this trend in design.

  2. Oddly enough, last year, I was having problems with eye strain and visitied the optician who suggested switching my work environment (primarily a text editor) to a light on dark colour scheme. Basically his advice was that since most of the screen is usually bright (in a dark on light scheme), you are staring into a light for some 8 odd hours a day. Since I switched, no more eye-strain. YMMV of course!

  3. August 21, 2006 by Carol

    I dislike light-on-dark pages too. When I go back to a dark-on-light page, it feels like I’m waking up again, the window is open and the sun is coming in. It is so much better.

  4. For reading text I definitely agree. The ease of reading with dark on light is considerably higher for myself. I’ve also had an older client in the past request I changed text from light on dark to dark on light because of readability. They said that almost all of their friends of the same age find it difficult to read, especially anything more than a paragraph. I took it to mind and try to use dark on light for any sites that will have a lengthy read.

    But of course I don’t mind using light on dark if the textual content is minimal.

  5. August 21, 2006 by Andy

    Like SteamSHIFT I have also been told by opticians that it is easier on the eyes to have light-on-dark colour schemes. I do actually have a problem with my vision and do find sites that use light-on-dark less tiring to read. However, as long as the contrast between the background and text is good then I do not mind too much. Too many sites exist that use a terrible combination of colours.

  6. In most cases, I actually enjoy reading light text on a dark background. Too white a background is like staring into a light bulb, and hurts my eyes if I have to look at too many of them all day. I find it helps to bump up the text size as well as the leading a bit more when using a dark background. Seems easier to read to me. (I have excellent vision, if that has any bearing on the situation.)

  7. August 21, 2006 by Zephyr

    I do remember a course on screen ergonomics recommended dark-on-light, but I forget the exact reason.

    I think dark backgrounds are more effected by glare from the room / surroundings.

  8. August 21, 2006 by Neil

    The only site where the light on dark background works well for me in the readability area, is John Gruber’s Daring Fireball.

  9. I have some knowledge about this (which I too cannot back up with research citations) and the problems seem to be:

    • Use of full-white on full-black. That’s too high-contrast. Use off-white on dark grey. Or use a grey background with tiny white stripes.
    • The shock of moving from a positive page to a negative page. I think this shock remains in place for quite a while and influences readability. As an example, try reading all your sites as light on dark for a few hours. It may never become truly easy, but it does become easier.
    • Common graphic-design errors are magnified, particularly the influence of really long lines, which look awful in reverse type.

    The WCAG Samurai site looks like complete shite, BTW, which we know already.

  10. I’m among the few (obviously) who much preffer light-on-dark schemes. My eyes hurt like hell reading this (and other dark-on-light) sites.

    But thanks to you I’m now starting to think about offering alternative stylesheets…

  11. I too have problems with light on dark sites. They usually look good for a few minutes then are difficult to read for an extended period of time. I tried the Daring Fireball site that Neil said works well and after a minute of reading my eyes started hurting. I think using a font color that has less contrast would help.

    I think that the background of 456 Berea Street is to bright. It’s the transition between the content area and gradient background image. It hurts my eyes at the bottom of the page.

    Disclaimer. I’m 50. I wear glasses. I work at a computer all day. Then I go home and may be on the computer up to another four or five hours if I’m working on a project. I try to keep it to a minimum so that I spend time with my family. Changing to an LCD monitor was a tremedous help in reducing eye strain. The other thing I’ve done is I bought a pair of I-Optix reading glasses. My eyes actually feel like they relax when I put them on.

  12. I prefer light text on dark background. Maybe it is because I’m using a CRT monitor (eMac), but a white page just has too much glare, and makes my eyes burn after using it for a longer time. I’ve set my editor, terminal and newsreader to use a light on dark scheme because it’s much easier on my eyes.

    I don’t like white on black, because that looks harsh, but light colors on gray feel very comfortable to me.

  13. I think it’s inevitable. The rise of blogs and 2.0 and blah blah blah ushered in millions of web pages with predominantly white backgrounds and dark text, and a lot of designers (myself included) are likely getting bored with the whole thing and looking for something new.

  14. It’s a cheap way of making a site look cool. Also people are so obsessed with making sites standards-complient that they forget about usability.

  15. August 21, 2006 by Jeremy

    well…as for ligh-on-dark, i agree with those who say it’s fine when there’s a minimal amount of text. it’s not terrible, but i wouldn’t recommend full text pages like that.

    though, i seem to remember that this site had a “high-contrast” version before the redesign :)

    i’m more about the “clean” look of dark-on-light…actually grey text on white bg…just me, though.

  16. Also people are so obsessed with making sites standards-complient that they forget about usability.

    I think some people are so obsessed with usability and accessibility they forget about aesthetic and visual design.

    Accessibility, like most things, is an continuum. It’s not a binary (yes or no) matter. Most accessibility best practices have a trade off. Sometimes that trade off is in visual aesthetic. Sometimes it’s in time, money, and resources. Sometimes it’s in something else. But there’s almost always a trade off. All we can really do is achieve the greatest possible level of accessibility without making a trade off we’re not comfortable with.

    I’ve got two newspapers and two books on my desk right now. Both have pages with reversed-out text. No one is demanding that they offer “alternate” editions. Why? Because people understand that it’s impractical. It’s too much time, money, and resources for the publishers to invest.

    Why do people take a different attitude with the web? Why do people demand that we offer alternative editions without considering the additional time, money, and resources this takes?

    People attribute less than 100% accessibility online to laziness or insensitivity, but that’s usually not what creates it. Usually it’s simply a matter of resources. A designer has two weeks to produce a site, and his employer is only willing to pay for so much.

    Of course we should all strive for the greatest accessibility possible. But we also need to keep in mind that people have been reading books and newspapers for five hundred years that don’t have resizable text, don’t have a light-on-dark or dark-on-light option, and don’t let you choose between sans and serif — and no one has died from it.

    Things like an alternate dark-on-light view should be a bonus — something you do if you have the time and resources — not an expectation of every website out there. Demanding this sort of thing is just flat unreasonable and not practical in most real-world situations.

  17. August 21, 2006 by Roger Johansson (Author comment)

    SteamSHIFT, Andy: I’m guessing that depends on what kind of eye disorder you have.

    Carol: That describes it pretty well!

    Glen C: Pitch black on pure white can be straining too, I agree.

    Neil: The original draft of this article actually contained a list of example sites that I cannot read without seriously straining my eyes because they use light-on-dark text. Now that you mention Daring Fireball, it was on that list.

    Joe: The shock factor definitely exists.

    Tanny: You have a point. The background here is pure white, which may be too bright. I have recently changed the gradient background a bit though - it doesn’t go all the way to white anymore.

    Todd: Hehe, yeah designer boredom is probably a major reason.

    Jeremy: The High contrast (or “Zoom”) layout still exists. It hurts my eyes to look at it, so it probably works for those of you who prefer light-on-dark ;-).

  18. I prefer high-contrast text — either white text on black, or black text on white. Even gray text on white is tiresome for me (which is why I read this site via Bloglines :)

    A tip for the Mac people: hit Ctrl+Option+Apple+8 and invert the colors on your montior if your eyes get tired.

  19. August 21, 2006 by Roger Johansson (Author comment)

    Jeff:

    Why do people take a different attitude with the web? Why do people demand that we offer alternative editions without considering the additional time, money, and resources this takes?

    Because it is much, much quicker, easier, and cheaper on the Web than in printed media?

    It doesn’t have to be a complete alternate design, which obviously could take more time than is available. To me, offering a dark-on-light print CSS would do it in most cases (in fact that is how I read some sites). If you look at the “Zoom” layout of this site you’ll notice that it pretty much sacrifices aesthetics (depending on your taste, obviously). It didn’t take me long to implement though.

    By the way, I’m not demanding anything here. Just asking people to please think about it :-).

  20. I compensate for the inverted colour scheme by using larger than standard fonts, and a similar colour for the background and font (e.g. dark blue background and light blue font).

    I find this just about maintains enough readability without straining the eyes, and I’ve tested it on several monitors to find that readability is fine (to my eyes that is).

    Theres probably a 50/50 split between people who find dark on light acceptable and those that don’t, but then nearly 100% of people probably find light on dark acceptable.

    Of course, have you ever considered that the contrast or brightness is a bit too high on your monitor?

  21. Because it is much, much quicker, easier, and cheaper on the Web than in printed media?

    That’s debatable, I think. It’s probably easier, quicker, and cheaper — but that’s doesn’t make it feasible in all situations. It still costs time and money, even if it’s less of it.

    Again, I’m not at all saying we shouldn’t strive for this. I’m just saying that I don’t understand the attitude of demanding that we do these sorts of things (not that you were demanding, but people certainly do). It’s an ideal to reach for, but you can’t always reach every ideal.

    It’s just interesting (and frankly, kind of odd) to me that it was just fine and dandy to use reversed out text in print, but if we do it online, we also have to provide an alternate.

    The more and more I think about accessibility, the more and more I realize it should be a browser/operating system level function. With resolution dependent UIs in new OSes (like Leopard, for example), scaling will be handled. Apple already gives the the afore-mentioned Ctrl+Option+Apple+8 for color inversion. Most OSes already offer a built-in “magnifying glass.”

    Here’s the thing: for the entire history of the world, if you were one of the 5% that had a hard time reading text of a certain size, it was on you to deal with it. Get a magnifying glass. Get bifocals. Whatever. It’s your problem, you deal with it. Now, online, us web designers are expected (not asked, but expected) to accommodate every possible impairment someone could possibly have, plus simple preferences (like your preference for dark-on-light). At some point, I have to start questioning whether or not the culture of accessibility has gone too far. It’s one thing to say, “here’s something nice you could do for your readers who prefer such and such.” It’s another thing entirely to be like, “if you do x, then you must also do y, or you’re an insensitive bastard who doesn’t care about handicapped people.” Again, it’s not you that I’m hearing that from — but I’ve certain been getting that attitude thrown my way a few times lately.

    Thanks for this, Roger. I think I’ve finally got my next blog post (which I’ve been trying to come up with for days). :)

  22. August 21, 2006 by Brian Ritchie

    I just wanted to weigh-in as another person who prefers light on dark. This website in particular is very straining for me to look at for too long. As someone else pointed out, it feels like staring at a light bulb.

    I think white screens are different than white paper. I tend to think the rules are slightly different for websites than paper media. I’m wondering if many of old-school rules for readability are based on paper media.

    It does make sense to me to be concerned about the contrast regardless of which layout is used. Black on white or white on black is just too much for the eyes.

    The content on the page plays a role as well. In the middle of this page, there is too much brightness for my eyes. However, when I scroll to the very top of this page, the other content and darker sidebars help with lowering the brightness. In that context, a white background with a black font works.

    I think the “best of 456 Berea street” box at the bottom of this page is much easier to read than the main body text.

  23. OK, I’ll bring the research.

    A study at Stephen F. Austin University produced quite a lot of interesting data, particularly the observation that the optimal color combination can vary with the font in use — something that discussions of “light on dark” versus “dark on light” rarely touch on. If I’m reading correctly, their initial survey seems to have found that black on white was the most generally readable combination, while the more detailed followup did not replicate that; black on grey and (surprisingly) green on yellow were the best performers.

    Another study, at the University of Missouri (link goes to PDF), looked at color combinations affecting a number of factors, including readability. The PDF, which was the only version of the paper I could find, does not appear to include the results tables, but if anyone could find a full version that’d certainly be interesting to look at, although the fact that they used participants’ responses on a Likert scale, as opposed to objective measures of reading speed and retention, tends to make me wonder about the study’s quality (also, unfortunate terminology errors such as substituting “hexagonal” for “hexadecimal” don’t help its credibility).

    A paper from the Wichita State University usability lab touches briefly on the topic and summarizes the extant research; its references section provides a lot of potential leads for researching the topic, and their synopsis indicates that dark on light, in general, is better than light on dark.

    There’s a lot of reading in there, and I haven’t quite finished all of it (these have been in my “to read” bookmark list forever), but hopefully it’ll contribute to rational discussion about this (as opposed to “I like light on dark” vs. “I like dark on light”).

  24. The most directly applicable research I know of is by Lauren Scharff, who did a study on the readability of several colour combinations, and a follow up.

    However, I think it may be somewhat out of date, the issue with light on dark was:

    When light text is placed on a dark background the text may seem to glow and become blurred; this is referred to as halation, and it may make the text harder to read.

    With nicer TFTs common now, it would be worth re-doing the research.

    My initial feeling is that it is probably symmetrical, but we are heavily swayed by what is ‘normal’, and sudden changes can seem harsh.

    As part of our zoom testing last year, roughly 1/3 of the visually impaired participants preferred light text on dark background. My understanding is that people with certain cognitive issues (e.g. Dyslexia) sometimes also prefer a dark background, or at least less contrast.

    Broadening this slightly to include contrast as well, this is the one area of accessibility that has conflicting requirements: Maximum contrast is needed for those with visual impairments, and more subtle shades for some people with cognitive impairments.

  25. I wrote about this issue, generally, for fadtastic a while back. It taught me the same thing we’re seeing here in the comments: readability isn’t scientific, at least not beyond having sufficient contrast. One person’s readable text is another person’s migraine.

  26. I’m with Jeff on this one. While I always do my best to make the sites I design accessible, there is a limit to what is cost effective to impliment. We do not yet live in a utopia where we have infinite resources to cater for infinitly less likely preferences or abilities, nor should designers be expected to do so without the funding and client willingness to back up such an approach. However, that hasn’t stopped me developing a print style sheet and a zoom stylesheet that I can usually apply to any website I build - styles like that, by nature, often don’t require much (if any) customisation.

    As a matter of preference, I find light on dark to be far more comfortable on my eyes when I’m in a dark environment (the office at night), and visa-versa, dark on light in a bright environment (office in a morning). Saying ‘light on dark is bad, my eyes hurt trying to read it’ may well be truthful, but not neccessarily all that valid. There’s a simple solution a Ctrl+A away, if it bothers you that much.

  27. Play with the light-switch over at Snooks. I prefer the default ‘lights-off’. As Joe mentioned, it’s the level of contrast rather than the colours that affects readability, mine anyway!

  28. As a matter of preference, I find light on dark to be far more comfortable on my eyes when I’m in a dark environment (the office at night), and visa-versa, dark on light in a bright environment (office in a morning).

    God forbid someone prove that to be the case, or people will start demanding that we make our websites change color schemes based on the time of day (which, of course, will have to account for all possible time zones, including those on Mars, even though less than 0.001% of your traffic comes from Mars).

  29. August 21, 2006 by Emil

    It’s very easy to say “Light text on gray” but what about Veerle(http://veerle.duoh.com), which I by myself find very easy to read. Also snook.ca has his light switch, but I think the contrast increases with the switch (the background is still black).

    Another question which relates to this contrast issue is working areas and computer screens. What do you think about monitors which has black/dark frames versus white/silver.

    And background lightning? Lamps in the ceiling/behind the computer or just a dark cellar?

    I think all this elemens has to do with readability on the web. If you look at gamers they love dark web sites because they often sit in a dark room and play games. An example of this is swedens biggest gaming site (www.fragbite.com) which has a dark blue tone which the gamers love.

  30. I find that the only thing that bothers me is not enough contrast between text and background and too small fonts rather than the colour scheme. (Shaun Inman’s site is a perfect example in this regard) My own little blog uses light on dark and I find it perfectly readable on different monitors…

  31. “Not that there’s anything wrong with that.”

    I think light-on-dark and dark-on-light is personal preference. Does it matter? Really, it doesn’t unless one has a personal agenda to push. Including myself, we designers have “rules” and “guidelines” in which we judge others by.

    Dark backgrounds are no new trend to the web. Even Neilson pointed it out in his web mistakes reports in the 90s.

  32. August 22, 2006 by Roger Johansson (Author comment)

    Weiran:

    Of course, have you ever considered that the contrast or brightness is a bit too high on your monitor?

    Yup. I actually played around with it a bit now and ended up turning the brightness down slightly. Doesn’t help with inverted sites, but it makes sites that use a 100% white background (like this one currently does) a bit easier on the eyes (more on that later in this comment).

    Jeff: Sure, it’s going to take some time to set up an alternate stylesheet. I can’t argue against that.

    Reversed text is just as straining for me to read in print as on a computer screen. I remember struggling to read parts of the pop magazines I bought in my early teens because they used white on black.

    I believe the most important difference between printed media and the Web when it comes to accessibility is that the Web makes it possible to accommodate different needs.

    About that article: copy and paste your comments from here and you’re about half-way! :-) (What I mean by that is “Thanks for taking the time to write such long comments.”)

    Brian: Since reading the comments about the background of this site being too bright to be comfortable I have started looking at changing that. I tried a couple of very light colours and yeah, it made it easier to read. So expect some kind of change soon.

    James, AlastairC: Thanks for linking to some actual research on this topic. Will read ASAP.

    Andrew: I guess it’s like with text size - it is impossible to please everybody.

    Matt: Well, providing print and zoom stylesheets, even if very plain, is a lot better than doing nothing. It’s even better if you can apply them to most sites without much customising.

    There’s a simple solution a Ctrl+A away, if it bothers you that much.

    I prefer bringing up a print preview or turning off CSS ;-).

    Ed: Snooks styleswitch goes a long way. I would have liked the black background to change too though. The edge between the white and black kind of “crawls” for me. But it’s much more readable to me than the default.

    Emil: Veerle’s site works for me depending on which screen I’m using. So yeah, you can have text that is lighter than the background and still be readable. I did say that what I have problems reading are “inverted, high contrast designs” ;-). She also uses fairly large text and a generous leading, which also helps.

    I haven’t given much thought to the colour of the actual monitor frame. I’ll pay attention to that and see if there is a connection.

  33. please provide an alternate stylesheet that turns the whole design, not just the content area, back to dark on light.

    Does this mean we’ll be seeing a redesign of your main navigation up top, Roger? :-)

    Clearly there’s a time and place for any design aesthetic. But if anything highlights the need to make it really easy to give users the power to choose alternatives to how they view a particular site, it’s this conversation. Browsers manufacturers and designers take note: Alternative stylesheets have the potential to be much more than a fringe feature.

    As to how to promote their popularity, well, that’s another conversation.

  34. I prefer light on dark sites over the opposite very much. Even my text editor is set up that way.

    I truly believe it is a thing of finesse and/or nuance. As someone before me said — the real bugger are “full conteasts” like #fff text on #000 background, especialy woth Windows’ crappy clear type.

    It is funny Roger that you have collaborated on your most recent redesign with a designer that kind of made it “the thing” recently. :)

  35. When I used to worked on CRTs I liked large light colored text on a dark background, because it was less eye strain due to the fact that I wasn’t staring into a bright CRT bulb all day long.

    Once I switched to LCD flat panels however, light text on black caused me a ton of eye strain. Whenever I come across a site with dark background and light text, I have to turn off all CSS styles in my browser in order to continue reading the site.

  36. August 22, 2006 by sunny

    Light-on-dark is fine, so long as the contrast is sufficient.

    A site by a very well-respected designer has been mentioned in the comments a couple of times; she uses this technique. I find much of it difficult to read, not for extended periods, just difficult to read at ALL. The main article text is fine, but other parts of the page have dark red and dark blue text on a dark background. I can barely even see some of the red text, let alone read it (and I have 20/20 vision, no glasses/contacts).

    I ran the Colour Contrast Analyser over it, and the site fails abysmally. I was enormously confused as to why a designer of this calibre would do this, so I wrote to her to say I was having difficulty, and mentioned the contrast failures, and asked if she thought it was a problem. She replied that I was the only person (or perhaps one of two) that had complained, so she saw no reason to do anything about it.

    MOST OF IT FAILS THE ANALYSER. Out of all the tests, 14 pass and 38 fail. I think that’s appalling for a designer who gets kudos for her great design abilities.

  37. I think you are going too far here. If the site uses proper markup, you can indeed turn off css or perhaps even make your own user stylesheet. Catering 1% of the audience beyond that is just plain silly.

    If you suggested defining alternate stylesheets for light on dark designs, I could accept it, but this is too much fashion police for my taste.

  38. Interesting points about white backgrounds hurting eyes. I use a grey background for my main content, with a less harsh version of black for the text. Also, my sidebar is a dark brown (the type which Roger obviously doesn’t like). I might have to rethink that now.

  39. I understand your point, but I think you’re missing all the people who find it far easier to read light-on-dark schemes. My own site — hardly interesting content to most people, I’ll admit readily — uses light-on-dark. Why? Because it’s much easier for me to read comfortably. I’ve toyed with switching to dark-on-light a few times, but every time I do, I get several people telling me to switch back to the dark background. It’s just easier on the eyes sometimes.

    To each his own.

  40. Interesting. I find light on dark a little less readable, but it depends on the font-size, face, and most notably, the amount of content… plus the level of contrast seems to be an important factor (too much is a bad thing). I do understand; some sites reach out to me and rip my eyes out. When I designed the interface for GrayBit.com, I created two versions: light on dark and dark on light. Personally, on that site, I prefer the light on dark. There’s not a lot of text so it works for me. I polled people at a couple of developers’ forums and overwhelmingly people preferred the original light on dark as I did. Because of this I made it the default style. (I did make a PHP style changer, though, to make the other theme available to those who prefer it.)

    I’m curious, with the thin typography used (Century Gothic), the font-size and face, and the amount of content, do you find something like that a little more doable for you Roger? It’ll probably still cause some strain and pain but I am curious. Would a light dray or off-white text be more suitable?

  41. August 22, 2006 by Cocos

    I think it depends on the design. For an example Veerle´s blog 2.0 is inverted and it´s fine to read. I even think it´s easier to read than this site. But in general I prefer dark text on light bakground.

  42. August 22, 2006 by Roger Johansson (Author comment)

    If the response so far is anything to go by, there are clearly more people than I could have imagined who not only tolerate light-on-dark but actually prefer it. I guess that emphasises the fact that we’re all different and have different needs and preferences.

    Chris: Hehe :P. You never know. This discussion may have consequences ;-).

    Dragan:

    It is funny Roger that you have collaborated on your most recent redesign with a designer that kind of made it “the thing” recently. :)

    I spoke to Veerle about that, and her response was that it’s only her blog that is light-on-dark. Her other designs are dark-on-light.

    sunny: I can’t answer for the design choices Veerle made for her blog’s design, and I don’t see the need to attack her here.

    Henrik:

    If you suggested defining alternate stylesheets for light on dark designs, I could accept it, but this is too much fashion police for my taste.

    This wasn’t meant for me, was it?

    Yvonne: Your sidebar is light enough to not cause any problems for me.

    Mike: The default style on GrayBit.com I can only look at for a few seconds. Once I start reading the text the letters go blurry and I start squinting. I probably need to get glasses or something :-P. Avoiding 100% white for the text would probably make it a bit better.

    The dark-on-light theme works very well for me though!

  43. So I guess this is the point that someone starts writing a Greasemonkey script to analyse colour differences and flip them if they’re light-on-dark? :)

  44. Actually, I don’t have any eye disorder other than staring-at-a-computer-for-too-many-hours-a-day-itis …. ;-)

  45. August 22, 2006 by B4PJS

    You have made some very interesting points here in your article. For a lot of people like myself who are dyslexic, the standard black on white is of too high a contrast to be able to read properly. I find that the best colour scheme for me personally to use is white text on a blue background, as is offered in MS Word. This is akin to the pink colour filters that some dyslexic people use when reading printed text. I personally do not find printed text a problem, it is the back-light in monitors because it projects the light at you, rather than just reflecting the ambient light.

    In my personal opinion, as someone who prefers the blue background/white text, your alternate stylesheet is awful for me to read and i had to change back to the default within seconds. I have learnt to get on with dark on light, as it is the default settings for computers almost everywhere.

    Even if you do not prescribe to light on dark, i am sure that when you watch a presentation that is projected onto a screen, even you would prefer the dark background as the glare from the highly reflective screen will start to hurt your eyes and decrease your concentration.

    This is how i would like to see all layouts on the web, but i know that is never gonna happen so i just apply the same style to my own web pages and let other people make their own. My Myspace account Myspace

  46. August 22, 2006 by Roger Johansson (Author comment)

    Robin: Haha, yeah that sounds like a cool idea.

    SteamSHIFT: I guess that’s my problem as well ;-).

    B4PJS: My alternate stylesheet is an experiment I implemented after reading Joe Clark’s article Big, Stark & Chunky. The colour choices aren’t based on research or anything. And I agree that it is not very… visually pleasing.

  47. When I did my Computer Science degree, way back in the mid 1980’s, light-on-dark was the norm. We were taught that it was the best set-up and that we should discourage users from requesting the opposite (this being before Windoze et al gave users control over their colour schemes). The thinking was similar to those opticians cited above - the large area of bright background strains the eyes.

    Well, rightly or wrongly, popular opinion is opposed to that of my old tutors. Maybe screen technology has come on in 20 years, maybe we’ve got used to ignoring the supposed problems of dark-on-light. Maybe gasp the academics were wrong.

    Personally, I tend to stick with dark-on-light, but not usually pure black on white. The only place where I think dark backgrounds really score are sites with lots of photos - there’s a reason why old photo albums had black pages!

  48. Funny, these issues are not new. In fact the light on dark issue is pretty universal and thus have basic design rules and constraints since the age of Gutenberg. The high constast problem falls into the same category, whether it’s white on black or black on white. It’s good to see that the importance of typography and aesthetics being addressed across the board. I overheard one of our application developers addressing a similar problem.

  49. @ Sunny:

    She replied that I was the only person (or perhaps one of two) that had complained, so she saw no reason to do anything about it.

    It seems like you have a very selective memory because in my last paragraph I wrote :

    I’m also planning on doing an another color for those that need it but that takes time and that’s something I don’t have right now. With that said I can’t put a date on it when it will be ready. Hope you understand.

    Anyway I just wrote my opinion on the matter

  50. When I first began in web design 10 years ago I favoured white text on a black background. I quickly discovered, through a large number of complaints, that people did not like this design combination.

  51. August 22, 2006 by sunny

    No “attack” intended. And no names mentioned.

    The site owner’s response of “only 2 people have complained” stuck with me, and I confess I did not take to heart her “I’m also planning on doing an another color …” because it felt like a brush off. I have sent an apology to the site owner.

    I’m simply frustrated at trying to follow the standards guidelines of font sizing, resolution and window size compatability, colour contrast tests etc., when many “big” designers don’t appear to comply with them. However, it was wrong to vent my frustration here on this topic.

  52. I think this is all down to the individual. What is great for one person is bad for another. There are so many other factors to take into account besides just light on dark or dark on light. Display type, screen resolution, ambient lighting, general environment etc. They all affect how we perceive what we see.

    It’s nice to offer alternatives for this sort of thing but it’s not an accessibility issue in the same way as font size etc. I will leave some sites purely because they look bad to me, nothing to do with content, just my perception of the page :) I don’t believe those sites should offer different designs for those who don’t like the main one.

    I totally understand your point though :) Provided you can get a nice match colour-wise, offering another stylesheet doesn’t take too long. My site hasn’t been rebuilt for years but I intend to allow people to upload their own CSS when I rebuild it so they can make it look as they choose, any that I like I can also offer as an alternative to all users.

  53. I guessed the best “accessibility sites were darkest ones ..or at least that’s what original computers ( commodores, amstrad, MSDOS) were…isn’t?

    Maybe Opera guidelines accessibility guidelines are..wrong.

  54. If I’m reading a magazine with light text on a dark background, I can hold it as close to my face as I want. If I’m using Internet Explorer on an old CRT monitor (like the vast majority of web users), it might not be so easy for me to achieve optimal viewing.

  55. I think it is actually a very subjective matter: for instance for me it’s actually easier to read long posts on Veerle’s Blog than it is on your blog. The grey text of your blog is just a little too light for me. It’s impossible to please everybody I’m afraid ;-)

  56. I’m in web design for about seven years and to be honest people prefer dark colors more than clean style and light ones (from my own experience). I think it is easier to emphasize some things on the dark background but if we are talking about the readability the dark text on light is definetely easier for reading. While designing the site we should also take care about the audience (I mean the age). The teenagers prefer dark, sharp colors, older people like clean style.

  57. August 22, 2006 by stephen

    Due to visual issues I’m definitely a fan of light-on-dark, but I don’t mind dark-on-light, as long as the contrast is high enough. (my real pet peeve) If necessary I can always ctrl-opt-cmd-8 the screen as I’m doing right now. So I’m not sure if the fix is altrenative CSS (which is nice, but adds to design overhead) or educating users to use the accessibility tools already built into their operating system.

  58. I don’t have any problem, and at certian times in the day (at night) I actually prefer it, as a bright screen is harder to look at.

  59. August 22, 2006 by Jonas Geiregat

    Nice article, but it’s missing some visible examples, instead of written examples.

  60. August 22, 2006 by Eric J

    another +1 for light-on-dark. It was explained to me that the print industry uses dark-on-light not just because of ink and smudging, but because the light from paper is reflected light. Light on a computer screen, on the other hand, is emitted light; thus light-on-dark text is easier on the eyes.

  61. I have not seen this in a long time. Are we going back to 1998? I remember writing about this dumb mistake.

  62. August 22, 2006 by Fenrir

    If a site contains enough good content it maybe worth while to consider setting your browser to override the sites chosen colors with your own

  63. August 22, 2006 by doug

    My solution to reading light-on-dark pages is to select a block of text with my mouse so it’s highlighted. I get less eyestrain this way.

  64. I think light-on-dark is just oldskool, I still love it, i still code in light-on-dark, and i would rather most sites would have a light-on-dark option for reading purposes.

    But I can understand, my background is unix, linux, dos, so I am quite used to the light-on-dark situation.

    And, some people may say that light-on-dark is actually less aggressive to the eyes, after a long period.

    dark-on-light might be easier in the short run, but light-on-dark is for hardcore ppl that spend hoursreading in a monitor. (and by that I mean more than 12hours a day, like myself)

    my .02

    /cheers

  65. I used to very much prefer a black background with bright green text, but now it causes eye strain. It turns out that my left eye now has a very small amount of astigmatism, enough to make it very annoying. Now I prefer a light background. My right eye has no astigmatism but it cannot compensate for the left in this situation.

  66. August 22, 2006 by friend

    I have problems throughout the day trying to read the computer, especially if I’m doing a lot of research. A few tips that I’ve found:

    — learn the keyboard shortcut for increasing the font size in the browser — highlighting the text on a page will sometimes invert the color scheme. so if the background is black and the text is white, highlighting the text makes the background white and the text black…or close to it. — for those pieces of the page that hurt the eyes (a side bar with a contrasting color), check out the nuke anything extension for the firefox browser. you can right-click on any object in the page and remove it, at least until the next time the page is loaded. i find this to be one of the useful extensions for some of the extact problems you mentioned.

    best of luck. — friend

  67. August 22, 2006 by Brian

    When i don’t like the light-on-dark design, i usually press ctrl + a then read it.

  68. August 22, 2006 by Halgy

    I don’t mind it. In fact, I love it. Maddox started doing it almost a decade ago and I still love his site. But really, if you have the time to post an article b!tching and moaning about backrounds, you need a good headbutt. To the groin.

    Halgy

  69. August 22, 2006 by Azure

    Personally I find the dark text on a light background quite painful to read after any period of time. This is one of the resons I use a text browser in an XTerm for most sites. (I also have a visual impairment, which may skew my results.) The only times I find a light background at all bearable are those when I am forced into an environment with very high ambient light (which is painful in itself, no matter what I’m looking at.) I have heard claim that the Plan 9 people have usability testing favouring dark on light, but there’s a significant enough number of people who prefer it the other way, even those without visual impairments, that any usable, accessible site or application should offer both choices. One of my problems with most desktop environments is that even with changes in colour scheme, many applications won’t let you turn white on black to black on white. You are correct that a small area of video inverse to the main content can be quite distracting.

  70. August 22, 2006 by Kripto

    I think you’re picking nits here. I look at terminals all day that are either green on black or white on black. My eyes don’t get strained and I don’t get headaches from reading the text.

    I want to know what is with pompous web designers who think they know everything there is to know about design.

  71. I peronally like dark on light most of the time, but on some text heavy sites the light on dark really works well. Maddox’s site, for example, which is about 90% text, is very easy for me to read and not as straining as looking at a glowing white screen with black letters.

  72. August 22, 2006 by Megalomaniac

    I use the light on dark scheme everywhere I can .. someone once described the dark on light scheme as trying to read the lettering on a switched on bulb.

    With that and Verdana and high contrast .. I find reading much easier.

  73. August 22, 2006 by Etaoin shrdlu

    As my name indicates, I used to be a typographer.

    The first golden rule of reversed type is * MAKE IT BOLD *

    Reversed type (white type on black background) has to be bold, because the black “creeps” over the white, and makes the letter strokes thinner and harder to read. Worse, often, the serifs (the little lines at the end of strokes that makes letter more recognizable) often get totally gobbled-up by the black, thus making the text even more unreadable.

  74. I really don’t mind it, I find light on dark just as easy to read as any other kind off web page =\

  75. August 22, 2006 by coversyl

    Erm, the readability of a piece of text has nothing to do with the font.

    Readability refers to how easy the content is to read as in the words used, phrasing, composition, etc

    The legibility of a piece of text, on the other hand, may well be different if dark on light or light on dark

  76. August 22, 2006 by smak

    Reading light text on a dark background is much easier on your eyes and reduces eye strain for the long run.

    Staring a giant white light is not good for your eyes.

    Try black backgrounds for a while and your eyes will thank you. Give it a week.

  77. Actually I have the opposite point of view. To me looking at web pages that have the white background are difficult to view. To me it’s like trying to see a black speck on a flashlight. The white color on a monitor is basically a bright light turned on while the dark pixels that make up the text are turned off.

  78. I don’t know, I prefer a balance between the two. I find Light on Dark easier on the eyes, and sites like this where everything’s bright except the text (and even the text isn’t black, it’s grey), actually hurt my eyes. However, on my sites, I realize that some people can’t read light on dark, and other people’s eyes hurt when they read dark on light, so I try to find a balance between the two so my eyes don’t hurt on my own site, and other people can read the site.

  79. I personally prefer light on dark. I have my entire desktop set up in that fashion, I find it much easier to read, and I get much less eye irritation than looking at dark on light.

  80. Maybe any OS should, next to “close” and “minimize”, offer a “negative” button. To toggle light-on-dark/dark-on-light

  81. Howabout the firefox browser? It by default lets you choose for a page to have no style! View->Page Style->No Style

  82. I tend to agree with Maddox on this one:

    “I’ve chosen a black background for most of my text because it’s easier on the eyes than staring at a white screen. Think about it: your monitor is not a piece of paper, no matter how hard you try to make it one. Staring at a white background while you read is like staring at a light bulb (don’t believe me? Try turning off the lights next time you use a word processor). Would you stare at a light bulb for hours at a time? Not if you want to keep your vision.” Maddox (www.thebestpageintheuniverse.net)

  83. I actually find it much easier on my eyes to look at a dark background than a light one. white backgrounded pages, while ubiquitous really strain my eyes.

    I agree completely with Maddox.

  84. Although I only skimmed the other comments, I was surprised I didn’t see a reference to the A List Apart article on design for low vision, which states:

    Invert the screen

    Many visitors will want light-on-dark text rather than the dark-> on-light text we’ve gotten used to since the first Macintosh.

    Customize colors

    However, bright white on flat black will not work for everyone; > it’s too bright.

    Seems like light-on-dark designers are trying to play nice.

  85. I’m guilty of using the dark text on a light background for the main part of my blog, but then switching it around for the sidebar:

    http://weblog.timoregan.com/

    I don’t know if this is hard on peoples’ eyes or soothing. Personally, I don’t have a huge problem staring at a predominantly white screen as long as there’s a lot of light in the room.

    Otherwise, I agree with many of the above posters: Your monitor is a gigantic flashlight, NOT a piece of paper. I think too much light from the monitor could be bad for your eyes. Maybe this is different on an LCD? I dunno, I still use CRTs…

  86. Personally , having a large glowing area in front of me (the “white” background on most monitors is actually a very brightly glowing light - try it in a dark room if you don’t believe - or better, take a picture (wihtout flash) of one) is very annoying.

    I want passive, non-glowing displays (the old non-active-matrix LCD displays; my watch; paper) to be black-on-white; but any glowing display to be white-on-black.

  87. I’ve had a light on dark site since 1996, and while I keep trying to come up with a better design, I’m still stuck with it. It just works best for me.

    I’ve never had any readability complaints, but then it’s only been texty since 2004.

    This seems to be more a matter of taste, since the biological/medical arguments seem to be going both ways. :)

  88. August 22, 2006 by internetperson

    I completely disagree with your article, I think it is to much from an individual perspective to be an article, where are you documentation that says what you say here is correct?

    I have normal eyes and like dark on light sites, but for massive reading I think medium-light on medium-dark sites is better. I say medium, because I belive that eyes are not made for hard white on pure black or black on white light on a screen… the contrast too high (…and I believe that you are targetting white on pure black, and not seeing the broad perspective of shades that could be used) Screens are getting larger and larger and I can not understand why a large white rectangle with darker letters could be better than medium-bright on medium-dark, its like reading text on a transparent paper holding it up against the white sky..

    Also from a usability perspective medium-light on medium-dark enables you to use colors another way. Orange, yellow, turquise, or pure red(R) blue(B) or green(G) and similar gets much more visible (think street lights at night) and can be used to grab the reader / viewer of a page in a much more visually and extensive way than a visual homogeny with white as background. Also think how clear the different stuff separated visually on dashboard is when it is dark outside.

    Example:

    I am a designer not a programmer, but do XHTML and CSS templates occasionally. I thought it was hard to differentiate the tags and content when everything floated together in one hard bright light, so I setup my editor to showing a medium-dark background, the .<p>content</p>. in a lighter shade (still dark, because the “Lorem Ipsum…kind of content is unessential when working with tags and structure”) and the different tags in “neon” colors so they was easy to differentiate… The coders on my office saw my screen and thought I was weird…weeks later almost everyone had converted to my kind of setup, because it let them see the code easier differentiate elements and lower the strain on their eyes watching a screen 12 hrs everyday…

    An alternative to not strain your eyes is to adjust your monitor light down when you want to read black on white on a screen.

  89. I find the easiest text to read is actually lower contrast that black on white or vice versa. Using a dark gray over a light gray (or similar contrast) will help considerably because higher contrast will screw up your vision. Black text on a white paper is easy to read when printed because paper is not backlit and will not put as much strain on your eyes. Also remember that you can find a happy compromise between readability and design. High contrast text is fine if it helps the design, as long as visitors need not stare at it for extended lengths of time. I have an article on readability on my Web site right now. http://www.ronniesan.com

  90. I own and operate a comic site where I have a “white on black or brick red” color scheme because I feel the color scheme compliments the comic material there. As an artist, I’ve done a lot of research on the difference between reflected light (What you see when you read a book or a newspaper) versus projected light (what you see when you’re reading off of a monitor). I’ve found in my research that, depending on what kind of monitor you have and the levels of contrast it’s set to, the ammount of light entering the eye from projected light is anywhere between 50% to 400% higher than if you were to read the same material printed on paper of any color. This is possibly harmful to the eye. My comics (which are image files on the site) are still black letters in white balloons with artwork on white backgrounds, but the background for the site is black because I don’t want people to get headaches from it without knowing why. I’ve begun steps myself to impliment selectable color schemes into my own site because not everyone shares my design sense either. I believe an option like this for most sites would please everyone if they’re able to simply select a color scheme that works for them.

    You raise certain points, but it’s possible that you might have the contrast or resolution set too high too. Also, simply selecting the text inverts it for you if you were to run across a site with a design scheme you’re not fond of with no ability to slect a color scheme you prefer better.

    -glych.

  91. August 22, 2006 by Anonymous

    I find that I don’t mind dark on light if it is an LCD. But if it is a CRT, or a very bright LCD, then I must have light on dark. It’s just too hard on my eyes.

    Of course, I prefer dark on light for mediums that reflect light, rather than emit it.

  92. August 22, 2006 by Toybuilder

    Hmmm, it used to be the norm that light text was on a dark background… When the Mac’s first came out, the commmon complaint was that it was hard to look at the Mac’s black-on-white screen for a long period of time!!

    I agree with some of the above comments that it’s the extremes of contrast that makes it hard to read.

  93. August 22, 2006 by internetperson

    An addition to comment #91

    Also in todays LCD monitors, lighter means better in the specs and I guess most people do not adjust their displays from the defaults. After callibrating my dell 24” for professional print design, its down from 100 in brightness to 15.

    Also my macbook pro screen is to bright and have to adjust itself (with its light sensor) when it gets dark in the room.

  94. August 22, 2006 by Cyanide

    Reading long pages and blogs that have white backgrounds is a killer for my eyes. Ever since i downloaded a program called powerstrip i’ve been able to invert the bright white pages to black with white text. I find reading much easier, but it still takes some getting used to. I’ve had plenty of eye disorders and usually have pain when i go to sleep and wake up. Inverting the pages seems to help quite a lot.

  95. August 22, 2006 by Old man

    There was a time when they were all yellow on black or green on grey. We bitched for decades to get black on white like most print.

    Personally I now use black on off-white, rather like traditional printed newspapers, whenever I can effect it.

  96. Some thoughts that came to my mind while reading this were 1) the green or amber on black monitors of yore and 2) reading (15 years ago) that green on white was easiest on the eyes.

    I respect your opinion, but personally I feel this is a subjective aesthetic matter, with little to do with readability in a more theoretical or abstract sense. Contrast and color choice are however relevant in that respect. But to me, color schemes could be considered part of the artistic dimension of a webpage. In such cases, it should be considered by more standards than just readability.

    That’s not to say there is no physical effect (i.e. “comfort index”) associated with classes of schemes. I work with two 19” LCDs and they produce a lot of light. (However, after a couple weeks of headaches, I got accustomed to it.) Anyway, as I’m sure people have mentioned, a well-equiped browser allows you to disable the referenced CSS styling.

  97. This is kind of absurd - it was proven long ago that light text on a dark background offers the best contrast and readability.

    Apple, for better or worse changed this with the the Mac UI fairly early on and the move to white, bright, hard to read pages was born. If brightness and lack of contrast were desirable then we would all work with our screens facing the sunlight - but as we all know it is awfully hard to because the white sceen washes out.

    In fact high contrast stylesheets are available on some sites (light text on a dark background), the sole purpose being to increase usability and readability - not to impair it - so I would say you have this backward - regardless of whether you were taught that a page should be white. For those with visual impairments a high contrast site with light text on a dark background has been proven to be the most legible.

  98. I agree that reversed-out type is definitely less readable in print design and I’m reasonably sure that the Mark Boulton quote in your article refers to print design.

    For an excellent discussion of the difference between designing for print and designing for the web, please see: http://www.wpdfd.com/editorial/wpd0600.htm

  99. August 22, 2006 by Me Myself I

    Chalk another one up for hating dark on bright (notice I didn’t say light) and loving light on dark. If I wasn’t running a script with greasemonkey in Firefox which converts all backgrounds to black, all text to orange, and all links to green, my eyes would be killing me right now. I occasionally disable the script in greasemonkey to see the “interweb” as it REALLY is but there are still too many sites like yours to leave it disable for much more than my own sites which are all light on dark… I suppose I could enable javascript/cookies and I presume all other things bad to use your high contrast link too but what would be the fun in that?

  100. There’s a fair bit of work on this in HCI. Here are a couple of papers that tackle it. My area of focus is not on colours or general font issues, so I can’t speak to their authority, but checking the number of citations in Google Scholar or other more traditional source to get a sense of how well they are respected in the HCI/Human Factors worlds:

    This one is less on point, but seems to cite a few that would be worth reading:

    Discriminability measures for predicting readability of text on textured backgrounds

    Hope this is of use,

    Daniel

  101. I don’t know..white text on a black background with say a font like ‘Arial’ is highly readable.

  102. August 23, 2006 by Chard

    I am currently working on a site for a company that treats dyslexia. The research I did into colour schemes suggests that dark-on-light is more likely to be easier to read by people with dyslexia. However, this is not always the case and there appears not to be a clear winner. Light grey or cream backgrounds also appears to be preferable to white.

    Another thing I found was that some people find less common colours easier to read. One site I found had black-on-yellow. However personally this made me nauseous.

    Another thing I found, which appears to be echoed here, is that large areas of white can cause strain and make text harder to read. This may be in the form of the unused white space on a website for example.

    The solution I am implementing is to have a dark background with light grey panels which will contain black text. Hopefully this will provide high contrast and reduce glare.

    Personally I do not necessarily have a preference, though I can sometimes find white on black glaring. I think it is finding the right balance whichever scheme you choose - and maybe educating users where the brightness control is on the monitor.

  103. August 23, 2006 by Trent

    Mark Boulton is discussing “Typography,” not web-page layout.

    Typography is real, honest-to-goodness page layout done on paper!

    His advice is perfect for PAPER.

    On a terminal, Bright Yellow on Black is the best combination for the health of your eyes. It produces the least strain of any of the basic combinations. I read this in a medical journal in the mid-eighties and have seen nothing to dispute its veracity. It’s been a winning color combination for me.

  104. August 23, 2006 by Johan

    We should research which color combinations provide too much contract, and always referring to the light source/emmitance of the monitor which is device dependant; Of course the key is using black and white to mix with the colors we will use, the fonts we use (serif-sans-serif).

    So its colors, line-height, color contrast, font choice.

  105. August 23, 2006 by Anon E. Mouse

    Hey cool, I can post on this again! Thanks for opening it up for comments again Roger!

    I just wanted to thank you for this wonderful parody on truth. Though, it was aweful hard to read with all that dark text on a light background. May I suggest a dark, almost slate, background with an easy green or something for the text color? It’d be much easier on the eyes than having all that full bright light color blasting at us. Or even black background with a 15% grey foreground. Millions of options.

    Hopefully you won’t play censorbot again; people who are against free-speech shouldn’t post blogs. Afterall, it’s an oxymoron. Don’tcha think?

  106. I find that the light text on dark backgrounds is somewhat aesthetically pleasing. I do see your point though, and am glad you brought it up, seeing as how a lot of websites are now using this type of scheme (you referenced CSS Reboot…CSS Remix is also showing signs of this trend as well).

    As for readability and usability, it’s important to remember a site’s function. I feel that a light text on dark background works when the website is geared towards a more aesthetic approach to webdesign. However, when it comes to website like yours, and others that deal with practical web design issues and other issues related to CSS, semantics, etc. etc. readability is of the utmost importance, and thus, we have use dark text on light backgrounds. I am by no means saying your site is any less aesthetically pleasing (I wouldn’t be posting here if I didn’t love this site so much), than a dark background site, but maybe the dark background site is aiming for a more artistic representation of web design. Just a thought.

  107. August 23, 2006 by Roger Johansson (Author comment)

    I have been reading the research reports and studies that people have provided links to. As far as I can tell there is no conclusive evidence either way, though most studies found that dark text on light background is considered slightly more readable than the opposite. In the end it is mostly a matter of personal preference.

    Some people seem to have interpreted this post as something other than my personal opinion. It is not. This is how I personally feel about high contrast light-on-dark designs. Many will disagree, and that’s fine.

    I just spent 10 minutes adjusting my high contrast layout (which should probably be renamed to something like “inverted layout”) to something that may be more pleasing for the light-on-dark fans out there.

    Daniel: Thanks for taking the time to find and post those links.

    Natalie, Trent: Mark’s site seems to be offline right now so I can’t double-check. However I believe his advice regarding colours is valid for computer screens as well.

    Trent: What works for you does not work for me.

    Johan: Yes, there are more factors than just colour.

  108. I find dark text on white hard to read and it strains my eyes. I liken it to staring at the sun.

  109. August 23, 2006 by vitriol

    Wouldn’t it be fair to assume the majority prefer dark text on light backgrounds? After all, to start with, on very old machines the background was black with the text on top being lighter. There must be some reason for the change.

  110. August 24, 2006 by nosferatu

    I MUCH prefer a dark background with light content. A white page hurts my eyes. I think Veerle understood that better than anyone, since she chose a dark grey-green background with a light green font for most of the content. Green is a beautiful colour and easy on the eyes if the hue is used correctly, so I would have to say that your site is far more problematic to read than Veerle’s blog. In fact, I feel it even more when my eyes are strained and tired. I shift from dark on light to light on dark and WOW…

    Dark backgrounds will always be my first choice for websites with extensive written context (such as blogs). For short websites, I don’t mind a white background.

    nosferatu.

  111. August 24, 2006 by Wulf

    I frequently read free Public Domain ebooks from Project Gutenberg and I almost always switch them to white-on-gray and set the font to Arial. I’ve even been meaning to create a macro for it.

    If I were to read a black-on-white ebook, I’d get a headache.

    However, it’s a different matter for most websites, because it can practically blind you when you switch from a dark site to a light one.

  112. It depends on the design for me. Straight white on black is hard to read for me too. If the contrast is lowered, such as light gray on dark gray, it instantly gets easier to read. Text styling is an important part too. ;)

    Take Veerle’s site for an example. I’d say it’s very good on the eyes, as it’s not straight white on black, but very light blue on a dark green (at least seems so unless my screen has problems displaying colors correctly). ^^

    In my opinion of course. :)

  113. August 24, 2006 by Claire Alyea

    For myself, I know that dark on light is often troublesome. Having read music for the past 12 years I’ve heard from instructors who have consulted optometrists that the black notes on a white page are some of the most eye-straining conditions.

    I also agree with the computer screen theory that you have so much light coming off the screen with dark on light. I’m an architect so we use AutoCAD (a drawing program that is often used for long periods of time) and if anyone has ever used it they would know that the default color is a black background with a white cursor/lines. It cuts down on eye strain throughout the day.

    I feel like the author is more concerned with their personal style choices and the “norm” for the internet as opposed to which might actually be better. Light on dark can be hard if you’re switching between the two all the time, but overall the light on dark sceme is much more friendly : )

  114. August 24, 2006 by Howard Dickins

    One interesting and valid reason for displaying light text on a dark background is for use on a laptop. Why? Because it helps save battery power…

  115. Just wanted to thank the person for the Mac Ctrl-Option-Apple-8 button trick - it’s awesome :^)

    Howard, is that really true? Hmmm…

  116. August 24, 2006 by NFCTD

    Quite funny that I’m just starting to be happy with all those white-on-black-websites.

    My next redesign will be white-on-black as well. Maybe I’ll add a serverside styleswitcher so people can switch from one to another (white/black <> black/white).

    But I lóve it! On a huge TFT-screen, with the browser ‘fullscreen’, a white background is só white! When it’s black (or very dark) it seems that the ‘light’ in the screen is turned off. I prefer that.. it’s calming me down. If I want to see the sun, I’ll go to the beach.. ;’)

    By the way… what hurts as well is the yellow comment textarea… disguisting! Or should is say, I ‘don’t like the yellow background of the textarea at the bottom of this page’ with a very British accent. Ughh..

  117. So all sites should have light backgrounds for text? Give me a break. I can name dozens of very succesful designs that work. The case in point was the example of the CSSreboot site showing the trend is going that very direction.

    If your personal preference is for a light background than so be it turn styling off or read the RSS feed. No you shouldn’t have to but you shouldn’t criticise a designer’s preference if you have that option available to you.

    I suggest that if your retinas are continuing to burn you should see and optometrist.

  118. It’s not the light-on-dark in it self that is the problem, it’s how it is executed. I for instance have to zoom in on many pages to actually be able to read the text.

    Anti-aliased text looks great on light background but most of the glyph disaspears on a dark one: Example 1. Actually, the screenshot is somwhat more readable than the original screen, don’t know why.

    While this is readable (from Blogger): Example 2. I just noticed that the Markdown syntax documentation is a good example of the later.

  119. August 25, 2006 by kris

    here might be a tip for ya.. don’t know if its been mentioned yet, for a quick change, just select all the text with ctrl-a or highlight with your mouse.

    some people I know do that.

  120. August 25, 2006 by Jason

    So would I be out of line if I asked you to create an alternative stylesheet that turned off all the eye irritating advertisements on this site?

    Same thing.

  121. August 25, 2006 by Deforest

    For anyone here who says that light text on a dark background is easier on the eyes, I’d like to ask that you go read this page in its entirety and then come back and tell me if you felt no eye strain or discomfort what-so-ever.

    If you did not, I’m willing to wager you are under the age of 30 years old. I too used to think that these kind of designs were actually “more readable” than dark on light, but from the benefit of years I can now say that I was dead wrong.

  122. August 25, 2006 by Roger Johansson (Author comment)

    kris:

    That usually does not work for me. It only makes the text even harder to read. I guess the “select text to invert it” thing is for Windows users only.

    Jason:

    So would I be out of line if I asked you to create an alternative stylesheet that turned off all the eye irritating advertisements on this site?

    Absolutely not. As a matter of fact, my inverted layout does just that.

  123. August 25, 2006 by Howard Dickins

    Is it true that light on dark text uses less battery power on a laptop? Actually I don’t know for sure. It sounds as though it ought to be true. It’s true that turning the brightness down helps. But, I suppose, that’s becuase it’s turning the intensity of the backlight down and hence using less power. Maybe using a darker page doesn’t really help… Any ideas anyone???

  124. Using inverted colours with the brightness turned down on my iBook doesn’t make that much difference Howard :/

    Might be because the battery’s about to explode, of course :P

  125. I tried reading your post but it started hurting my eyes so I didn’t get a chance to finish, I did however read what this guy wrote, and I totally agreed with him:

    http://www2.jeffcroft.com/2006/aug/24/accessibility-follow-up/

    So I guess you are saying let’s all make our websites have white backgrounds and black text.

    I got a better idea, I don’t care what color combination a website choses if it is heavy on text and has a lot of content I would rather print it out than stare into my computer screen which is giving off a great deal of light, so the theory of dark on light being better jsut doesn’t make much sense when that means you are recieving more light in your retna.

    ok I gotta go cause all this white is killing my eyes to the point taht I ahve a migrane just trying to type this comment up.

  126. August 26, 2006 by Max Bode

    Interessting article! I definitely agree on the reading text part. I don’t think there’s anything wrong with light text on a dark sidebar though!

  127. I quite often switch between light-on-dark and dark-on-white. I prefer the negative schema in my console window. I don’t find it uncomfortable to switch between these - maybe I’m just so used to that.

    But the console is not really white-on-black, it’s more gray-on-black. Plus, the console has monospaced font, which might help too. Reading the Daring fireball example did hurt my eyes - too bright letters.

    (By the way, there seems to be a bug in this commenting form - when I choosed “Yes” and then “No”, the content in all the fields above suddenly disappeared. This made me a bit angry, as I had already filled out the fields. I looked at the code, and it seems to be your intent, but I can’t understand the reason to do this.)

  128. August 26, 2006 by Roger Johansson (Author comment)

    Rene: Sorry about the comment form. It was indeed a bug that looks like a leftover from the original Movable Type script. No idea why it was set up to clear the fields but it’s fixed now.

  129. August 26, 2006 by Robert

    Web colors are not like the mattress tags you can’t remove. If it’s less than readable, I zap the colors with this bookmarklet. Just stick it up in your toolbar, use as needed.

    javascript:(function(){var newSS, styles=’* { background: white ! important; color: black !important } :link, :link * { color: #0000EE !important } :visited, :visited * { color: #551A8B !important }’; if(document.createStyleSheet) { document.createStyleSheet(%22javascript:’%22+styles+%22’%22); } else { newSS=document.createElement(‘link’); newSS.rel=’stylesheet’; newSS.href=’data:text/css,’+escape(styles); document.getElementsByTagName(%22head%22)[0].appendChild(newSS); } })();

  130. My initial blog is light text on a black background because I felt it suits my mood. On a related note, I used to work with a colleague who was blind from birth. He told a story about how he diagnosed text “missing” from a webpage when his sighted coworkers could not troubleshoot the problem. Turns out they had white text on a white background. How could he tell? His text “pin reader” showed the words and the color attributes as separate objects.

    sardonicynic.blogspot.com

  131. I remember reading a couple of articles which stated that people who read something which was light text on a dark background seemed to retain memory of the information for a longer period. I’ve been googling the heck out of that and I can’t seem to find the places I read that now, but I wonder if perhaps it is because people aren’t used to that sort of background so they read slower and with less ‘skimming’ end up recalling more? Who knows.

    Personally, I much prefer light text on a dark background. I find it easier on my eyes, and less likely to give me an eyestrain headache after a long day at the computer. My blog has a default of light on dark, but I have an alternate sheet of dark on light they can switch to. Even though I prefer light on dark, I’m probably going to redo my design for the Fall reboot in traditional light on dark as the default or just find some better way to open up the dark layout for readability.

    BTW - Love the new design changes she did for you… except one small thing and since we’re on the topic of contrast I thought I’d mention. The bottom of the bright red menu bar (where it hits the stark white) absolutely kills my eyes. I noticed I’ve gotten into the habit of automatically scrolling your menu bar out of view when I get on the page. Probably wouldn’t be such a sharp contrast if it was the taupe color you have on the sides instead of white, or a less sharp red (like the hover color instead).

  132. I wonder if contrast is not the issue. High contrast is, of course, easier for people with some forms of visual impairment to make out.

    However for the rest of us the high contrast is strain, whether black text on a pure white background, or the inverse. Of course, if contrast is insufficient, that’s hard to read too (though maybe an exercise in how the visually impaired see the world!).

    In my opinion (and with a seeming vacuum of research on the issue, it’s all opinion here!) the most comfortable text to read is that with a moderate contrast, whether light-on-dark or vice versa.

  133. I suppose it would have helped if I’d said what page I was talking about that menu bar problem on — comment preview. The others are fine with the transition background of the google ads.

  134. August 27, 2006 by Roger Johansson (Author comment)

    Nicole: Most designs will have some areas that work less well for some people I suppose. Some will probably find it odd that I have problems with many light-on-dark designs but not with the menu bar vs. white background that you mention. We all have different eyes it seems ;-).

    Dan100: There is a decent amount of research actually. Links are spread throughout the comments here ;-). I fully agree that medium contrast, whether positive or negative, is much easier on the eyes than high contrast.

  135. Your readability theory only works well in paper.

    I use a programmer editor 8 hours a day and I vastly prefer it with white text over a dark blue background. My eyes feel much better for it. And normal webpages cause strain in my eyes.

    A computer screen is not the magazine your teachers used to learn all their readability theory.

    That and MS Word in 1995. I’m sure MS spend a lot of money convincing some people (wrongly) that dark text over a white background is better for your eyes than the D.O.S. way, in a computer screen. “Hey people! Do you read a magazine with white text over a dark background? No? There you go!”

    And Web 2.0. It’s sooo Web 1.0 to use a dark background that everbody should rationalize the readability stuff. No, no, no, here we are Web 2.0, we use dark text over light background!

  136. great site with important information for me! Thanks.

  137. August 28, 2006 by Yehudah Goldstein

    I installed Web Developer Toolbar in Fx, and I select Disable Page Colors on every dark background website, like Veerlee! Hahahahaha, you designers lose!

  138. I also find that high contrast dark on light design hurts my eyes. But the worst thing about dark on light is when on the contrary the contrast is too low. Every day I come across a professionally designed website where I simply can’t read the footer, the navigation or even the main content. This is ridiculous. Here’s a great Firefox extension to check the readability of low contrast pages.

    Robert’s JS is cool but how to revert the style ?

    Notice : I didn’t read the previous comments.

  139. I know a number of programmers who configure their text editor to display light text on a black background (ala DOS). This is because long periods spent reading text set on a bright white background cause them eyestrain. Clearly some people find the reverse to be true, and it seems to be the commonly held opinion amongst useability experts that dark-on-light is preferable.

    One thing to note about text set against dark backgrounds is that stems tend to appear thinner, and a larger point size or heavier font weight is required to compensate. In print design this is due partly to ink bleed, but I think it also has to do with the visual illusion created by contrasting light and dark elements, which holds true for screen design too.

  140. I personally like light-on-dark designs; they’re much easier on my eyes. I keep my desktop background dark for the same reason. My own blog is light gray on black, and I’ve had a few people that commented about the difficulty in readability (on http://www.richardsramblings.com/?p=419) However, I like it that way and won’t change it until I get bored with the design in a few years (I might someday offer an alternate style, but I’m too lazy to do that right now)

    I’d like to ask that you go read this page in its entirety and then come back and tell me if you felt no eye strain or discomfort what-so-ever. If you did not, I’m willing to wager you are under the age of 30 years old.

    I find the page to be quite readable, and I am nowhere near 30 anymore!!

  141. August 30, 2006 by sean

    I have read in the past, white text on black is hardest on your eyes. Causes strain, eye jitters. Bothers me anyway…

  142. I usually don’t bother with sites like this. I can’t. My eyes simply won’t allow me to view them.

  143. An interesting point about white-on-black versus black-on-white (from an optometric point of view). It is actually quite true that white text on a black background is more ideal (from a psychophysical standpoint) with respect to visual acuity (or, how well your eyes can resolve individual features of characters). The reasoning comes from irradiation effects — bright light perceptually “bleeds” into dark areas. It therefore makes more sense to use white characters on a black background for comfort and ease of reading.

  144. Framing the debate in terms of light on dark vs dark on light is too simple. As mentioned, there are some typographic considerations that make reading reversed text much easier.

    Granted, white on black is glaring. And also granted that most web designers don’t do light on dark well. That doesn’t mean that it can’t be done effectively.

    Increasing both leading and kerning as well as using larger font sizes can make a world of difference. Getting a good but not too high contrast is important, too.

    It’s interesting that a number of Mac editors are featuring full screen editing, generally with reversed text. I do most of my composing in such an environment. I do my daily work of web coding with reversed text too. It really makes staring at the screen all day less stressful on the eyes.

    But, I have carefully adjusted colors and brightness as well as chosed very readable fonts and made the text larger than default settings.

    If done with some knowledge and care, reversed text can be easier to read, especially for long periods than typical black on white. Unfortunately, most people don’t do it well. Maybe reversed text should come with a disclaimer, “Expert driver. Do not attempt this at home.”

  145. September 5, 2006 by bbleeker

    Since I got my eye fixed, I prefer black on white again, but when I had a cataract I much preferred light text on dark backgrounds. I used a nifty Firefox extension, Stylish, to create my own styles for pages I visit often, and a general style for other pages. Works not just for colors; you can make over a site in any way you want. You can also download styles that others have made from www.userstyles.org.

  146. September 5, 2006 by Nicolas

    I’ve read most of the comments (up to 100) and I was suprised to see how many people actually prefer light-on-dark over dark-on-light.

    In the last few days I’ve been redesigning two websites. One of them is the website of a clinical laboratory which contains lots of information. Lots of text and lots of pages. I didnt even think about using a dark background. It wasnt just an identity issue but also a readability issue. As most of the websites most people read daily (online newspapers etc) are dark-on-light then I chose to go for dark-on-light. Its not a website where you want to suprise people but to inform and keep them updated.

    For the other website, my company’s, I chose a light-on-dark theme which I find really nice and readable as there is not much text (there’s no blog or large amounts of text). I hope that this color combination will actually do good as there are not many corporate websites out there that choose dark backgrounds and light text colors.

    However, I am left with an observation and a question. I think we (as in those-who-spend-more-than-10-hours-a-day-infront-of-a-screen) are accustomed to dark backgrounds and as such we prefer them over dark-on-light. Others though, who spend far less time infront of a screen, prefer dark-on-light as that is what they normally see in real life. (there are exceptions of course, obviously)

    The question then is: is it better to ‘surprise’ a visitor with a light-on-dark colour sheme or is better to provide the expected dark-on-light with a few variations (shadows, gradients etc) so that to avoid rejection? (assuming in both cases an alternative is provided and that all content is readable)

    Great post Roger, the comments as well. It turned into a nice discussion and I hope it continues like that.

    Cheers

  147. September 14, 2006 by Jeelani

    Can u please paste some sample examples or recommend websites where such back grounds could be accessed

  148. Some quotes from recent research:

    “Web design guidelines often include recommendations for appropriate colour combinations, many of which recommend high contrast between text and background with particular emphasis on the traditional black on white. Web gurus are quick to make definitive statements about design and readable text, as exempliffed by Jakob Nielsen (Nielsen 2000): Use colours with high contrast between the text and the background. Optimal legibility requires black text on white background (so-called positive text). White text on a black background (negative text) is almost as good. Although the contrast ratio is the same as for positive text, the inverted colour scheme throws people off a little and slows their reading slightly. Legibility suffers much more for colour schemes that make the text any lighter than pure black, especially if the background is made any darker than pure white.”

    “Unfortunately, Nielson does not offer any references for this statement. In fact, an examination of the research that exists on this topic indicates that the relationship between text-background colour combinations and readability is not as clear as it might seem, though it is generally true that a strong contrast leads to more readable text. In addition, colours are used on web pages for purposes other than maximizing readability. These colours enhance the aesthetics of the page, which can potentially impact the user.”

    And

    “It is somewhat surprising that the white on black colour (negative polarity) was rated higher than the black on white (positive polarity).”

    From:

    HALL, RICHARD H; HANNA, PATRICK. The impact of web page text-background colour combinations on readability, retention, aesthetics and behavioural intention. BEHAVIOUR & INFORMATION TECHNOLOGY, MAYJUNE 2004, 23(3), 183195.

    Juan R.

    Center for CANONICAL |SCIENCE)

  149. September 14, 2006 by Symeon

    I remember in the early nineties when we threw out our wyse terminals and we all got PC’s with terminal emulators, which ofcourse allowed us to change the colours etc, and we all thought it was very trendy to have terminal windows of grey with black text etc. However after a few months we had all reverted to green on black, as the constant staring at code in dark on light was giving everyone a headache.

    Then again you dont spend hours staring at a website, so many times the colours ad to the appeal.

    rgds Sym.

  150. I like white-on-black designs but I got problems with reading texts too. Even if they are quite long.

  151. Does anybody have any information on studies that claim that users spend significantly more time on a site with a overall light color scheme than on an identical site with a dark one? I’ve heard such a study murkily quoted many times without actually naming it. If it exists, I’d love to read the study and analyze the results.

  152. Most of the light on dark designs I see on the web tend to really hurt my eyes. So much so that I find myself knocking the text size up a few notches to reduce the ‘haloing’ effect enough to let me read to the end of the paragraph at least.

    If I switch to looking at dark text on white without giving my eyes a chance to rest (by looking at other things in the real world - shock horror!) I get all sorts of phosphene like after images and my eyes are incredibly strained.

    I agree with Symeon though - green on black is quite readable and is what I set all my terminal windows to as I prefer it to black on white in that situation - maybe something to do with the monospace fonts??

  153. October 3, 2006 by Sainkho

    I’ll take light on dark any day of the week and wish it were more prevalent. Just flicking to that Fireball site referenced above I can feel my eyes easing and thanking me. A monitor glows and radiates, paper doesn’t: what’s right for one ain’t going to be for t’other.

  154. October 16, 2006 by Mr. Nobody

    Wow, lots of comments here! Well, here’s my utterly useless ranting about that.

    I completely disagree!

    I have always “hated” the light-background standard on most computers, windows in particular, and the fact that it’s almost impossible to make a decent light-on-dark theme. It’s always something that gets invisible or something, and I have to switch back for a minute.. Though just recently I think I have managed to make it right on a windows XP system with 3rd party software. Time will tell.. Though not perfect…

    I prefer black background and some light text, taste may vary but for the moment it’s cyan. Much more readable IMHO, and not as eyestraining!!

    That might be better if screens didn’t give off so much light though… Cause no doubt it’s better to read stuff from paper than a screen anyway. Possible exception is a front projection. Oddly enough.

  155. Check my light-on-dark blog :) http://64k.be

  156. October 21, 2006 by Court Kizer

    I really wish you would have done some research before making this post.

    I (will probably be very unpopular) but strongly disagree. Yes there are many dark background sites with light text with poor visibility.

    However given a site designed with proper text Kerning, user studies have shown that on LCD, CRT, or any type of display users were always able to read faster with a DARK background than light. Not only that stress was measured by fluctuation of the eyes, flickering, blink rate, and rapid eye movement, showed very clearly that white backgrounds are far worse for long periods of time.

    One of the issue with dark backgrounds and readability is text kerning. With dark backgrounds it’s important to put the characters closer together NOT farther apart as some sites do.

    Computers in general are not ideal for reading, because they have a backlight, a sort of “deer in the headlights” effect if you will.

    A example (somewhat off topic now) is that many European countries have yellow headlights on vehicles… Why? Because white light (combined spectrum) does damage to human eyes. Similar to how sunlight, does damage to skin.

    I’m not saying a site with a white background is bad, but in terms of pure usability and readability a dark background is better with any source that is backlit.

    An example of a device, that mimics a book and is GREAT with white background, black text is the Sony E-Book reader. Since it’s using a form of e-paper, it is around 200dpi, and with the backlight off it is very, very easy on the eyes, and feels even better than reading from the pages of a book.

    I really like your site, and appreciate your insightfully articles. I love that it always sparks lots of very helpful comments from the web community! Keep up the great work.

  157. October 21, 2006 by Roger Johansson (Author comment)

    Court: I did do research before writing this, and after reading the articles and research that people have posted links to here I can only come to the conclusion that it is mostly down to personal preference (or rather what your eyes prefer). The research I have seen shows no clear advantage either way. If you could post links to research that shows otherwise that would be great!

    That said, I don’t need to do any research whatsoever to claim with fulll certainty that my eyes can’t handle high contrast negative design. It is, as I have stated here before, not just that I think dark on light looks better, it is also a matter of physical discomfort. If I read a long article on a negative contrast site, I will be dizzy and have a headache by the time I’m finished.

    Interesting sidenote about yellow car headlights. I’ve always hated those and wondered why they’re even allowed since it really blinds me when I meet a car with yellow lights. Are they really supposed to be better for your eyes? Xenon headlights are almost as bad.

    Thanks for taking the time to post a balanced comment, in contrast to many others.

  158. Though i’m the kind that feels better when browsering light-on-dark sites, i’d love to attach Robert’s lovely bookmarklet to my blog for alternative choice for my readers.

    If there’s any concern about using it, please do tell me. (It will be apprieciated if you can tell me by leaving a note on my site.) Thanks.

  159. November 15, 2006 by Stevie D

    I’ve got two newspapers and two books on my desk right now. Both have pages with reversed-out text. No one is demanding that they offer “alternate” editions. Why? Because people understand that it’s impractical. It’s too much time, money, and resources for the publishers to invest.

    Why do people take a different attitude with the web? Why do people demand that we offer alternative editions without considering the additional time, money, and resources this takes?

    The difference is that on the web, the cost is minimal. It’s a very quick job to write a high-contrast stylesheet, an inverted stylesheet, whatever takes your fancy. An experienced designer will have at his fingertips ways to switch between them. And that’s all it takes.

    When you’re printing a magazine, it isn’t practical to print multiple different colour schemes and sizes, and it would be very expensive.

  160. November 15, 2006 by Stevie D

    If I don’t like the design of a site, I don’t have to visit it. Well yes, but there is a lot of interesting content on some sites that use inverted colours. When possible, I read their content in my feed reader. If I can’t do that I just stop visiting. It’s a shame, but my eyes simply can’t take the strain.

    This is one of those things that I think comes down to users, not designers. Occasionally, I come across a website whose style grates or is difficult to read. One click and the styles disappear, and I’m left (in theory) with a bare bones HTML document that I can read easily. OK, so it doesn’t look pretty, but I don’t care, it enables me to read the page.

    If you have the same issues from time to time, browse the web with Opera (or Firefox), which empowers the user to make these changes easily.

    Some of my pages use light text on a dark background - but switch off styles and they are perfectly usable.

  161. Actually, I much prefer reading light text on dark background as it is mentioned at either Daring Fireball or my own website. I even use WriteRoom for creating really big texts and there, too, I have light text on dark background.

    I think there is just the personal preference that makes you either love staring into the bulb or not…

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

    Exactly (except for the “lighter in weight” part which seems contradictory to the rest of the statement). Sites with light-on-dark always use tiny little skinny fonts. That’s the problem. Also, white-on-black and neonyellow-on-black are the only two light-on-dark schemes that aren’t super hard to read.

  163. January 17, 2007 by Oscar Lima

    Teaching is part of my job. I teach to large classes in auditoriums where students can be at almost 20 meters (60 ft) from the board and, unanimously, they all prefer chalk on blackboard than pens on whiteboard.

    I have a “naive” explanation for this: the eye’s attention is naturally attracted by bright objects and since the objects of attention in writing are words these are better put as light-on-dark. The same applies to road directions (the best are white on dark green or dark blue), to actors in a theater, to stars in a moonless night, etc. I noticed also that in beamer presentations, light on dark works better (and the sleepy ones can doze unobserved).

    However in all the above cases, what you want is to attract attention at a few bright objects surrounded by darkness (the signs, the actors, the catchphrases and the buzzwords), but that may not always be the case. Indeed, when there are too many objects of the same type, like in countinuous writing, maybe the attention should maybe be turned dimmed, rather than enhanced, so black text on white paper may be better suited for long reads.

    Maybe, I think it’s hard to tell and it may as well be just a question of taste. As far as I go, I prefer to write computer code with bright colors over a dark (almost black) background. Saves some on the power bill too ;-)

  164. Regarding the theory (posted by Howard Dickins) that light-on-dark designs increase laptop efficiency:

    LCDs would not use any less electricity with a light-on-dark design (they might even use a tiny bit more). The backlight is always on and the display simply blocks the light where it wants darkness. (Adjusting the screen’s brightness from the laptop’s settings does reduce power consumption, because it’s actually turning down the backlight.)

    It would work on CRTs, but I’d hate to see a laptop with a CRT, lol.

  165. I think there’s another factor to be considered: ambient light!

    Reading light text on a dark background is so much easyer on the eyes when sitting in a room with dimmed lights (or completely dark). At the moment of writing (02h33) this website really hurts my eyes (and head), whereas Daring Fireball seems to do quite okay :). More scientific study is definitely needed!

  166. Stevie D, Roger: In Opera, you can simply click the ‘Author mode’ drop down and select one of the preset CSS to improve the readability of any site. Sure some bg images or fancy graphics may get lost in the process but at least you won’t get a headache.

  167. Light text on a dark background can be done well. I especially like the colour scheme on photo sites. Less background distraction lets me focus on the photo.

  168. I don’t think that you need to have your eyes fixed. I too find inverted colours very head-ache inducing. Perhaps what websites should offer is a click through button allow the user/reader to choose the design they like, i.e. if the website has lots of inverted colours and other flashy head-ache inducing stuff, then offer a click through button for “Simple Design Option”, that won’t give you a headache. Let the user choose.

  169. If we’re not criticising aesthetics, and we’re commenting on readability, then why is every newspaper and magazine in the known world (except the FT), BOW? And why is every news website in the world, BOW?

  170. August 2, 2007 by Bobby

    Does the website darkoogle.com seem alright for viewing ? their background is black and the text are green.

  171. I’ll never understand these sorts of complaints. I have impaired vision and I’ve always found light text on a dark background far easier to read.

    Take a look at how monitors work… Light backgrounds mean more light. More light means more eyestrain.

    This site hurts my eyes like the blazes. You could benefit by toning it down a bit.

    I’d be interested in reading more of your blog, but my eyes just can’t take the strain.

  172. August 10, 2007 by James Penketh

    I’ve always used green on black for my screen work, simply because with the right fonts it is much easier on the eyes than black on white. (In my opinion.)

    I’m currently reading your page through some fairly heavy black-tinted glasses, because otherwise my eyes start aching.

    However, Your Mileage May Vary.

Comments are disabled for this post (read why), but if you have spotted an error or have additional info that you think should be in this post, feel free to contact me.