Recently we talked about navigation bar placement and why horizontal navigation has become the web standard, as well as why using a vertical navigation menu can work but only if you have a solid design plan and reasons for your choice.
<figcaption id="caption-attachment-2261" class="wp-caption-text">Dark text on a light background - it’s not just for nerds!</figcaption></figure>
Now we’re going to discuss another web standard - dark text on a light background. As you’re no doubt aware, the vast majority of websites present their text content in this manner. Exactly how prevalent is this standard? Out of curiosity I decided to go down the Alexa list of top global sites to see how far I could get before encountering one with light text on a dark background. I had just about decided to cap my search once I got past #50 - having already encountered a site that wouldn’t generally be considered “work safe” and figuring there would be more of those to come as I made my way down the list - when I got to #49: imgur.com.
Yes, the 48 most highly visited sites in the world all (as of the time I’m writing this post) have light backgrounds with dark text. Granted, a good handful of those are different countries’ Google branches (google.de, google.fr, etc.) but I think the point stands.
The next point? Once we get down to #49, what can we learn by looking at it? imgur is a site that collects viral images. The relevant content - what brings people to the site and keeps them there - is image based, not text-based. Yes, there are comments, but the comments are secondary at best. People don’t go to imgur to read the comments, they go to look at the images. Not a lot of reading is necessary, and what text based content there is is usually brief and quickly scanned. In short, it matters less if the text is slightly harder to read, because reading isn’t why people are there.
If you poke around on the internet for discussion about dark vs. light backgrounds, you’ll find a lot of intense debate. The fact is, though, that the developers of the top 48 websites in the world know what they’re doing: in general, people find dark text on a light background easier to read. There are, of course, people who disagree with this, and there are endless technical discussions about how light interacts with our eyes to sway us one way or the other. If you’re not interested in the nitty gritties, however, you can cut to the chase. Most people will prefer reading dark text against a light background, and if text is the focal point of your site, you would do well to keep this in mind.
Does that mean that light text on a dark background is never going to work? Like vertical navigation menus, dark backgrounds can be used effectively to build well designed websites, but doing so is going to present more challenges, and won’t be a beneficial choice for many businesses. If you go looking for collections of well-designed sites with dark backgrounds, you’ll quickly start to notice a theme: designers, photographers, artists. Well done sites with dark backgrounds are generally using that background for dramatic effect, and to showcase content that is more visual and interactive than just text on a page - not unlike the stream of images on imgur. Fitting that profile perfectly is our one premium design that (at the time of this posting) is built around a dark background: JAOPRO, a creative agency whose site was designed to showcase their videos.
So do you have to run a creativity-based business in order to make good use of a dark background? Not necessarily, but you do have to have a solid design plan that has good reasons and purpose for using the dark background. Keep in mind that many website designs feature a content area with a light background that can be placed over a background color or texture of your choosing - check out the Dana’s Housecleaning site for an example. The background behind the content area is the dark blue of their logo, but because the content area is white, only the small amount of text in the footer is light-on-dark. If you like the idea of a dark background but don’t want to tackle the readability issues, a design with this style of layout may be a good choice for you.
I’m not by any means calling light text on a dark background a universally bad choice. What it is, however, is an advanced choice. Wanting your site to stand out is understandable, but make sure you’re not pursuing this goal at the expense of user experience.
<figcaption id="caption-attachment-2261" class="wp-caption-text">Dark text on a light background - it’s not just for nerds!</figcaption></figure>
