Reboot: Light vs. Dark

Obviously, one of the common themes that came out of the Reboot was that dark is in. One of the first sites that I drew inspiration from was Ordered List. It had seemed to take the light on top and dark on bottom look from the previous Niggle design (Flickr) and made it dark on dark. Of course, being grey and green, I felt obligated to like it. Then, Veerle's infamous redesign pushed me into a full-on redesign.

I think one of the things I like about these light on dark designs is the reminder of my youth, sitting in front of an ANSI screen where the colours just popped. That was definitely one of the things that I tried to put into this design. No rounded corners; just crisp sharp lines.

Too dark!

But the outcry against black could be heard amongst the crowd. "Hard to read", they say. I've been looking at this design most evenings for a couple months now and actually found it comfortable on the eyes. Why is that? And then it dawned on me...I was always looking at the design in the evening, often working in the dark. Looking at it during the daytime with the bright sun beaming in, I actually found myself preferring the contrast mode on.

Are light on dark designs more susceptible to lighting conditions? Seems reasonable enough. Your monitor will be pumping out less light to show whatever is on the screen. With a white background, the screen floods you with light. As a result, it's more capable of competing with high light situations.

And that may be where Veerle's design does fairly well. While the background is dark, it's not black. It's actually quite light (#2F3E3E) in comparison to what I've got here (#0D0D0D). It gives off more light.

In the end, this may be a lesson learned. I still like the dark theme and I'll definitely hang onto the style, I may just end up playing with the background colour.

If you're interested in seeing how the design of this site has changed, compare the new home page with the old home page. As an interesting comparison, the design iteration before that still exists as the "example" template for things like the Colour Contrast Checker.

Published May 03, 2006 · Updated September 14, 2006
Categorized as Design
Short URL: http://snook.ca/s/588

Conversation

15 Comments · RSS feed
eric said on May 04, 2006

It's not related to light vs dark, but I just noticed that with a narrow window width, the 'narrower' widget is unreachable! It's pegged off to the right side.

Federico said on May 04, 2006

Just for the record, if dark backgrounds are going to be considered evil, who would anyone explain that low-vision people (…) generally prefer light type on a dark background (Joe Clark, Zoom the Web), and all the "dark background high contrast alternate accesible" CSS around. Dark may not be evil, but there may be a risk of being overused (as it was, some time ago, orange).

Chris said on May 04, 2006

I prefer light-on-dark text consoles on my home/desktop pc when working at night and dark-on-light when using the laptop in the park (at least until it is possble to get reflective displays ..)

Eric Shepherd said on May 04, 2006

In print, the material added to the page is the ink - it's black, therefore, we have dark on light.

On the screen, the material added to the page is light, which is white. Therefore, white on dark is the screen parallel to what we're used to in print.

To me, it is easiest on the eyes to have white text on a dark background when reading on the screen. I don't know whether it's because of my screen/print logic above or whether it's just my preference.

Alan said on May 04, 2006

Whoa... just noticed your funky hidden post a comment thing... waaaay cool, how does it perform if there is very little content or is that not in the equation?

On another note, interesting read being as I have plummed for a dark layout in my reboot, I did have concerns throughout what I was doing and this has brought me to think of ways to integrate possible changes.

I did intend to have a flipped contrast version but what you discuss here is slightly more fundamental from a day to day usage point of view.

Thanks for the insight.

James Mitchell said on May 04, 2006

I personally don't have a preference one way or the other. To me, as a web designer, if the colors and contrast flow then it works.

I do agree with Federico (#2), that there is a risk of it being overused. The reality of the matter is that everything is overused in it's own time, there is a sense of 'fads' in everything from menus, layout, color and etc.

@Jonathan: on a side note I really love your site (as your previous version), the little elements (lightbulb, and column toggle, and hidden comment form) add such a wonderful touch. Keep it up!

Jeff L said on May 04, 2006

I commented on your Rebooted thread about the dark background - I finally found the contrast switcher and this is MUCH better. To me at least, it makes your site MUCH more readable.

Ara Pehlivanian said on May 04, 2006

I must say, very nicely done with the lightbulb and the comment box.

Only critique would be to default to the white BG.

Alexander Berglund said on May 04, 2006

I think you managed swich colors and squese the site together really good. I love the little lamp attached to the left of the article as it actually makes me "turn on the light" when I want to go deeper into the writings... A really nifty idea!
I think that you should lighten up the background a bit, despite that you already have given given the reader a "lamp" to do so if they feel it's how they want it. Good work!

Daniel said on May 05, 2006

Don't forget that there are a lot of rubbish monitors out there. Small fonts on black backgrounds can be difficult to read on them.

Alan said on May 05, 2006

I don't know if you have seen this site http://www.asemota.de/stenog/welcome but I think it is one of the nicer designs I have seen in this reboot and it is of the darker breed (heh, that sounds like a horror book).

Andy said on May 05, 2006

Really like the reboot, the colours are great! i much prefer the dark version, find it easier to read.

bruce said on May 05, 2006

if you're going to light text on dark background, it may interest you to read this article.

http://www.markboulton.co.uk/journal/comments/five_simple_steps_to_better_typography/

Lloyd said on June 17, 2006

Personally, I am becoming more interested in design with dark background colours that still retain a shade of colour.

http://orderedlist.com/ is one of my favourites in this style and the differentiation between the different shades of dark blue is exceptionally well done. I think we will see more website of this nature in the future!

John said on December 07, 2006

I do not like very dark background, i like bright color with dark text.

Sorry, comments are closed for this post. If you have any further questions or comments, feel free to send them to me directly.