I was recently reading one of my favorite sites, copyblogger, when I came across an article on removing sidebars (a subject I may address in another post). The article (which promotes a podcast) tells how a blog about minimalism did this and how it effected book sales (the blog is doing well). While listening to this podcast about a website’s redesign, I of course had to go look at the site in question: becomingminimalist.com
The first post on that site is about starting a blog and what you should do. They start out by promoting BlueHost, which is a hosting service I have used and I also promote. Next they get into site design.
One of the early things they mention is that you shouldn’t use white text on a dark background.
Right away, I was taken aback by that statement as I have actually always said that you should use light on dark or dark on light. I think that people expect to see dark text on a light background and that type of setup is easier to read quickly, but I don’t know that it is better or a must-use solution in comparison to light text on dark backgrounds.
The site in question also gives an example link to a page that uses a black background and white text (you can see that here).
Now, that example is terrible. It is white on black rather than light grey on dark grey, which is too much contrast. The spacing of that page also makes it difficult to read. The font gets progressively smaller as you read on up until a point, and the spacing between lines isn’t enough. Also, the sheet width should be wider to make it easier to read. It also uses a terrible font (I think that is Arial) considering how small the font is.
Despite this terrible example of white text on a black background, I believe that dark text on a white background is harder on your eyes over time (as in a few hours of looking at it). If the text isn’t that dark (ie light grey) or is another color on white, it can also be really difficult to read and be hard on your eyes.
In contrast, a light text (not white or a bright color) on a dark background (not black but a dark grey or dark version of a color) can be a lot kinder on your eyes over a long period of time. I also find that setup easy to read. Take a look at the following graphic:
At this point, I think I should give some examples of other websites that use both dark on light and light on dark.
There are so many sites that use dark text on a light background, and I would guess there is a site like that which you visit every day (this site is one such site). Some examples are google, bing, facebook, new york times, and more.
If proper colors are used, this setup is easy to read and it is what most users expect to see when landing on a webpage. After you concentrate on such sites or programs using that setup for a few hours, if you are like me, your eyes might start to hurt a bit or feel strained, and you might get a small headache. That partly is from looking into a monitor and depends on how hard you focus your eyes.
However, I have found that I can look at a site or program that uses light text on a dark background for a much longer period of time. Photoshop is light on dark for this reason. I typically use the WordPress dashboard that has a dark grey sidebar with light grey text (the default) for the same reason. Some other popular sites and programs that I visit or use a lot that are light text on dark backgrounds include Imgur, GameInformer (they have a cool lights on/lights off feature), and the Xbox One dashboard.
Designs that use dark backgrounds and light grey text might not be the norm, and they might even turn away users as it isn’t what they expect, but I find them much easier on my eyes when I’m viewing something for hours at a time.
This isn’t scientific proof that light text on dark backgrounds is better, I just wanted to show that a lot of notable websites and programs do use light text on a dark background, and you certainly don’t need to 100% rule it out. Depending on your website, your audience, and other factors, light text on a dark background might be a good option for you.