Informal reader survey: Light text on a dark background, love it or hate it?

Published in Web Development on Wednesday, November 8th, 2006

Inspired by some comments by Jennifer Slegg, and the residual pain in my eyes after reading the latest happening over at Bare Naked App, I figured it was time to do a reader poll.

Now, I don't have a fancy polling widget like Mike Davidson, nor to I have the time to whip one up, so please respond in the comments: Light text on a dark background, love it, or hate it?

In my opinion this trend, although initially attractive, is not a good thing to keep up. Thankfully, a quick glance at the CSS Reboot show that, despite the site itself, this trend may not be as hot as it seems.

Comments and Feedback

I absolutely hate white text on a dark background.

A mild color, like the one you have on this blog, is probably the best. Otherwise, white background.

I do like the contrast of the dark background surrounding the content area, because it draws your eyes to the lighter color of the content.

Johnny

Depends. Like just about anything else, when done badly it sucks. On some sites, it think it looks great - really suits the site. On others, it makes everything unreadable (at which point I switch to a different style sheet, usually).

I agree with Dave. There are examples of it's use that has been effective and attractive. Avalonstar, in my opinion, is extremely legible and looks fine and uses white on a dark navy color. Of course theres also times it doesn't work, I think it depends on it's use and the dark color it's laid on top of.

Matt

Thanks for the comments, guys.

There is no doubt that it works and is attractive in many instances, just like anything, I suppose.

I can read the light on dark - unlike some people - but what kills me is when I switch over to another site or app that is dark on light (for instance, from Bryan's site and then back to this comment box) Not fun.

In the early hours of the morning light on dark can be nice. Something I just came across is www.stayquiet.com and it does a reasonable job for a quickly made app. For most of my sites I stick to dark on light though.

To me, it depends on the time of the day, and lighting conditions. In low-light environments, I'd rather reader light text on dark background.

However, I think that if you're going to use light on dark, you should always include an alternative stylesheet; dark on light is just easier to read for the majority of people.

In general I'm not a big fan and would advise against it unless it's done perfectly. But it kind of comes down to the audience and the kind of content you've got. If you going for a broad audience and have a content-focused site, it's probably a good idea to stick to dark text on a light background.

I agree with Keith. Although I hate it most of the times, there are times it looks nice.

Barenaked, for example, is fine with me...

A good rule a thumb I read somewhere was that for a site with not too much copy or for artistic expression it is usually fine. But for text heavy sites it is straining on the eyes. Also that with younger audiences this tends to less an issue. Overall though I think it is harder to pull off lighter on darker than darker on whiter.

Me too. It can be done really well (Avalonstar), not so well (Dustin Diaz's site, which I sometimes find difficult to read), or not too bad but still would prefer dark-on-light.

Whichever you choose, it should always serve the audience and the content.

I get your feed through Sage and I use a white background and black text for all my feeds.

Color away.

Thanks for reading, Jay :-) Although this wasn't for me or any impending redesign...

Having light text on a dark background is hard to read. I cannot stand Light text on a dark background.

I hate light on dark, especially white on black, because it gives me a headache.

Personally, I like light text on dark backgrounds. But not for the main content of a site. I enjoy it for a side bar, or a small section that needs to stand out, but not necessarily what I'll be reading the most.

Yeah Roger, I also get bothered by that setup, not headaches, but my eyes feel like they've been to the gym or something :-)

I like the look, but not the usablity.

Ryan, I can handle things like what you have on your site, but even then the switch gets to me after a long day in front of the screen...

I like it, as long as the contrast is not too glaring.

Hate it, definitely. Since I got an LCD monitor I've understood proponents of light text on dark backgrounds (those swaths of pure #FFF are quite blinding), but to this day I can't accept light text on dark background. It encourages eye strain and is less legible.

Hate it - always have. I don't know why. I just cannot deviate from the standard black text on a white background.

Hate it, at least in content blocks. There are places that it is effective: headings, nav menus, and so on, to offer contrast to the core content area. Your design is a good example of what I'm talking about.

Light-on-dark is perfectly fine with me. Pure white on pure black however is not.

I personally find it harder to read dark-on-light than the other way around, more so on older/cheaper LCDs and CRTs (I normally do my day-to-day browsing on good quality LCDs). When reading articles on dark-on-light sites I am usually forced to invert the screen just to read it. This is why I chose to use light-on-dark for my latest site.

Although, when a font size larger than 12px is used and/or if they have a generous line-height it doesn't really matter what colour the site is.

I love many designs that use light text on a dark background, that have lasting appeal for me. I've never personally had a problem with them, but I agree that a vast majority of people do. Perhaps when I get a few years older my eyes will start to feel the strain.

As long as the text is readable and in readable chunks then light on dark is OK.

I like it on sites that do not have a lot of information - such as my portfolio I used light on dark. It has four pages. It is meant to make a statement, and I think the colors do that (what I wanted anyway!)

For another site I am doing which has many sections, is a large application, I went with dark on light, because people will be looking at it more and reading much more text.

Home » Blog » Web Development

Check out the blog categories for older content

The latest from my personal website,
Mike Papageorge.com

SiteUptime Web Site Monitoring Service

Sitepoint's web devlopment books have helped me out on many occasions both for finding a quick solution to a problem but also to level out my knowlegde in weaker areas (JavaScript, I'm looking at you!). I am recommending the following titles from my bookshelf:

The Principles Of Successful Freelancing

I started freelancing by diving in head first and getting on with it. Many years and a lot of experience later I was still able to take away some gems from this book, and there are plenty I wish I had thought of beforehand. If you are new to freelancing and have a lot of questions (or maybe don't know what questions to ask!) do yourself a favor and at least check out the sample chapters.

The Art & Science Of JavaScript

The author line-up for this book says it all. 7 excellent developers show you how to get your JavaScript coding up to speed with 7 chapters of great theory, code and examples. Metaprogramming with JavaScript (chapter 5 from Dan Webb) really helped me iron out some things I was missing about JavaScript. That said each chapter really helped me to develop my JavaScript skills beyond simple Ajax calls and html insertion with libs like JQuery.

The PHP Anthology: 101 Essential Tips, Tricks & Hacks

Like the other books listed here, this provides a great reference for the PHP developer looking to have the right answers from the right people at their fingertips. I tend to pull this off the shelf when I need to delve into new territory and usually find a workable solution to keep development moving. This only needs to happen once and you recoup the price of the book in time saved from having to develop the solution or find the right pattern for getting the job done..