Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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?

share|improve this question

marked as duplicate by Code Maverick, Joshua Barron, JohnGB, Charles Wesley, Benny Skogberg MCSA May 14 at 4:48

This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.

1  
think also economy of energy : dark background means less of the screen is highlighted... But you could just add a css allowing one to swap to the non-default (default being dark background ^^) –  Olivier Dulac May 12 at 10:59
3  
@OlivierDulac: tech.slashdot.org/story/12/04/19/2026252/… –  David Mulder May 12 at 11:01
4  
Dark background is more seen in gaming / entertainment related environments. –  BlueM May 12 at 11:05
3  
I would give the user the option. –  bendataclear May 12 at 11:44
1  
Also intresting: programmers.stackexchange.com/questions/230115 –  PlasmaHH May 12 at 12:51

9 Answers 9

up vote 32 down vote accepted

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 are you 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.

share|improve this answer
    
These test where done with normal text, like in a book, and are imho not relevant for this question about code. Syntax highlighting gives the user a lot of clues about what the code is made of and a mono-spaced letter creates a nice hierarchy. –  Ruudt May 12 at 11:23
2  
@Ruudt: I am a full time developer with astigmatism and I can assure you that you will never find my IDE's set up with the dark background that allegedly is preferred by developers to reduce eye strain. I prefer light backgrounds for everything: text, graphics, code. On paper and on screen. Finding the link with astigmatism finally explained why I was different in this respect from my colleagues. –  Marjan Venema May 12 at 12:12
1  
@Ruudt: Well actually my comment was to show you that - as far as I am concerned - your assertion that the test mentioned by David "is not relevant for this question about code" is, wrong. The test is absolutely relevant to code as well. –  Marjan Venema May 12 at 12:21
1  
wow this is extremely true as I have astigmatism too, and I find it hard to read anything with dark background. This happens even in real life, not only webpages, for example when the sky is dark I find the traffic lights much more blurry –  Lưu Vĩnh Phúc May 13 at 6:45
1  
I actually just had my eyes tested today and I have developed an astigmatism, which would certainly explain my recent problems with reversed text. –  Imperative May 15 at 3:46

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.

share|improve this answer
4  
Can you provide a cite re opticians' advice –  Mark May 12 at 11:55
    
I don't have anything on web to share but that's what my optician advised me. He said either lessen the glare on light background (use anti-glare filters) or use dark background. –  Gaurav May 12 at 12:37

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.

share|improve this answer

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

share|improve this answer

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

share|improve this answer

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.

share|improve this answer

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.
share|improve this answer

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.

share|improve this answer

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.

share|improve this answer

Not the answer you're looking for? Browse other questions tagged or ask your own question.