Dark on Light or Light on Dark? [duplicate]

Question

For a very technical site documenting code, sharing code snippets, and documentation, I have been told that using dark fonts on light backgrounds is recommended for people being able to read the information clearly as possible.

While, for my eyes and designing skills, dark backgrounds and light text works way better for me. A few clients have said that that does not work at all for the type of site which I have created.

Which would work better for a technical site: dark backgrounds with light colour fonts or light backgrounds with dark fonts?

Answer 1

Rather than the other answers that just express personal opinions let me direct you to this article that in turn cites some actual research which I will quote here as well:

However, most studies have shown that dark characters on a light background are superior to light characters on a dark background (when the refresh rate is fairly high). For example, Bauer and Cavonius (1980) found that participants were 26% more accurate in reading text when they read it with dark characters on a light background.

The explanation for this they provide is

People with astigmatism (aproximately 50% of the population) find it harder to read white text on black than black text on white. Part of this has to do with light levels: with a bright display (white background) the iris closes a bit more, decreasing the effect of the "deformed" lens; with a dark display (black background) the iris opens to receive more light and the deformation of the lens creates a much fuzzier focus at the eye.

I have to admit that I am surprised this is the case as I have light astigmatism and yet still prefer white on black, so there definitely is some preference factor here still, but it seems that black on white is actually better which I always believed to be an artifact from printing times when it was and is cheaper to print black on white. (auch, as one of my applications is white on black in android style).

Added side note, the 50% statistic is plain wrong, I have just looked at a fair number of studies and all sources I have just seen are givings numbers below 35%. Add to that that not everyone with astigmatism has a problem with this (e.g. I) and you get to the point where you are talking about less than 25% of your users probably. Is that a lot? Definitely, but it does put it into perspective.

Overall giving the user the choice might still be a good idea, although maintaining 2 separate designs never is fun. An alternative is directing them to screen inversion tools. True, it's not the nicest solution, but it can at least solve the issue for those with extreme astigmatism.

Answer 2

This poll results turns out about 2/3 of people prefer light code on dark background.

If you are stare into a light for some 8 odd hours a day, opticians suggests a light on dark colour scheme, it is easier on the eyes to have light-on-dark colour schemes.

Also consider reading this post on graphic design stack-exchange which suggests a different perspective.

Answer 3

We learn to read with dark ink on light paper, and even day-to-day, most of our reading is in that mode. Therefore, most people are going to prefer dark-on-light. So long as the contrast is reasonably high, the characters crisp, and the white background not excessively bright (glare), most people will be happy with it. Light-on-dark is just a holdover from the days of early text-only terminals (IBM 3270, etc.), and some people still like it. If you can satisfy both parties with configurability, great. If not, I'd go with dark-on-light unless you get feedback from your intended audience that they prefer light-on-dark.

Just because you prefer light-on-dark is no excuse to force it on everyone else, unless they've told you they prefer it. I suspect that you're in the minority in preferring light-on-dark. Configurable foreground and background colors are ideal, with black-on-white being a good default.

Answer 4

There are more factors to consider as far as user experience than just what is "easier" on the eyes.

There are a couple advantages to black on white. One is printing. If I find a really good snippet, I might want to print it out and pin in on the wall next to my workstation for handy reference. I might also print out a longer article to read on the bus/airplane/in bed/wherever so I can take notes and highlight on it as I read. Those are just a couple of many use cases for why a user would want to print. But in general, black on white will use significantly less ink or toner. If you do white on black, certain browsers will print the text in pale gray on white (because it's default is to not print the background color). Not legible.

So you go ahead and say, great, I want to make it print nicer, I'll make a print stylesheet with inverted colors. It will only be white on black on the screen, when you print the colors will be reversed to print well.

Second use case. I actually do this a lot. I'm trying to gather a bunch of information on a particular topic, so I copy and paste segments that are relevant into a word document. I then later, condense it down into notes or whatever. When you use "reverse" colors, I get annoyed. Instead of code that's pretty-printed in IDE-like colors that will be legible in a word document, I have colors that are hard to read on a white background and print poorly, and I'm going to have to manually change all the colors.

Additionally, choice of colors may to some people be an indicator of professionalism or conformance to expectation. Lots of news sites, professional sites, even stack exchange, for better or worse, use white on black, not the reverse.

I realize color preference here is a strong preference for a lot of people. Some like it one way, others like it the other. Those who prefer their computer screen mostly dark with light color text have, in my experience, a very strong preference. In the other direction degree of conviction about their preference may vary. I have no statistics on this as to which is more popular, but it's certainly quite subjective.

Since you appear to really prefer light on dark, I'll point out that it is not difficult to accommodate both preferences. Swapping style-sheets at runtime, or having a user cookie to set style sheet preference is easy to do. Making your images look great on both light and dark backgrounds is slightly more work, but is not impossible either, so long as the consideration is made as the images are created so you don't end up with "glowing shadows" or the like.

And as others have already pointed out, inverting your screen colors is always an option, should you go with the color scheme you don't prefer.

Answer 5

This is normally down to personal preference. For example, where I work, several people have a dark background/light text setting enabled; on the other hand, I prefer to work with light background/dark text.

If possible, I'd allow for both, and allow your users to choose which they prefer

Answer 6

I don't think there is such a thing as 'best styling' for a particular group or field of websites. As you said yourself, two people that use the same document/website can have very different perceptions on what works best.

I would suggest creating both and let the user decide. An example I can think of is last.fm which 'playfully' let you change the look of the website. Although for last.fm it isn't really a necessity.

Furthermore, I'm making the assumption that you prefer dark backgrounds with light text because you've worked with command prompts and terminals for quite a while. This Article doesn't quite answer your question directly, but gives you a way of thinking on what would work best for different types of users. Not all users on a technical website will be used to a terminal screen, for example.

Answer 7

I think the best way to share code-snippets is to style them the same way as the IDE does. Since different developers use different IDE's, this can differ from user to user. Maybe a pull-down with the option 'render like [name IDE]' could be a solution. Saving this in a cookie or something would make thing easier for the user when viewing more snippets.

As for documentation, I think most rules of typography apply here. In my experience most documentation is black on white, but I have very little experience with documentation.

Answer 8

It depends on the user, personally I suffer from a somewhat rare medical condition called palinopsia which affects my vision and the symptoms are much worse when looking at bright coloured objects on a dark coloured background (lime on black being the worst). So for me personally, I'd choose dark text on a bright background every time.

Everyone is different, so you could;

1. Give people a choice of colour
2. Invite users to take a poll to vote for their favourite colour scheme
3. Look at similar sites to your own and base your colour scheme around theirs
4. Have 2 versions of the site running simultaneously, both with different colour schemes, and use an analytics service to see the bounce rate and average view time of both versions. After a few weeks, make the winner the only version.

Answer 9

Descriptions and documentation should be written dark over light. Code examples should be written in light over dark. Additionally, the same color should be used for each type of code described.

You have to ask yourself what the reader is going to be looking for. Is an experienced coder actually going to forget his curly braces? Well, that's not a big issue. A big issue will be if it takes him longer than ten seconds to locate the information he is looking for when he is referencing or if it slows him down at all when he is studying.

There's no standardization on this, and there shouldn't be.

Whatever you do, avoid the heinous style of lwn.net.