Roger, we have a problem
Light on dark vs. dark on light. Roger weighed in with his personal opinion a couple days ago: Light text on dark background vs. readability. His points make total sense; some people find light on dark designs very difficult to read, so much so that it hurts their eyes.
Things get complicated, though, as you read through the comments on his site. Some are in total agreement with Roger, while others state the complete opposite. I'm not going to quote any comments here, but after reading through most of them, it goes to say: you can't please them all.
Everyone has their thing
The thing about users is that they are all different, and their setups are all different too. Some users have old fashioned curved CRT's, some have newer flat CRT's, some have matte LCD's, some have glossy LCD's, and then, depending on the OS, some have font-smoothing and others don't. On a very bright screen, white really is like a flashlight, while on a dark matte screen, dark designs can be very difficult to read. In the end, I think I can make a few speculations:
- Small text and low contrast should always be avoided regardless.
- Light backgrounds should always be a shade duller than pure white (#FFF). Black text on a cream or off-white color is less harsh on the eyes than black on white.
- Dark designs should never be pure white on pure black. When you put #FFF on #000, you are placing tiny specks of light on a dark screen. The contrast can be too strong. This is why I chose #CCC for my text and #222 for my background.
- Browsers should offer color inversion as a feature, at least until operating systems do. It is not a difficult technique and it only seems logical with text resizing and page zooming already available. Until they do, offering color inversion as a site feature is sound advice (I plan to do this when I redesign).
We could do research on this subject and ask more and more users what they prefer, but I think in the end we'll always find mixed opinions. I myself get a lot of bad feedback as well as good feedback for the design of this site. It might be time for us to make colors as flexible as we make everything else.
Your thoughts?
One of the reasons I let users choose on many of my sites the look is because of the differences people have. I like the idea of the light / dark options also if you are using the dark themes.
I have to agree with what you are saying here Christian. A shade off of pure white is easier on the eyes and actually makes it a little more visually appealing as well.
I think your use of color and font size here makes for a very readable site.
I prefer dark on light. If I encounter a site that is difficult to read, I switch off style.
"Browsers should offer color inversion as a feature"
Or you could provide an alternate stylesheet with inverted colours of your choosing.
Self-reply after a test…
"provide an alternate stylesheet"
This works great until loading another page, which switches back to the default stylesheet, making the facility useless. Bugger.
Libertus: You have to set a cookie so that the preference does not change after going to a new page. A good example of this would be snook.ca blog… just click the tiny lightbulb in the top left corner and go to one of the articles; the alternate stylesheet should persist.
Thanks for the cookie tip, but that's not quite what I meant. I was referring to using <link rel="alternate stylesheet"/>
My testing on the browsers I have available indicates that only Konqueror behaves. Firefox and Opera both forget the stylesheet choice on page loading. This being the case, I have no choice but to go the cookie route, which has the beneficial side-effect of supporting IE users.
My test stylesheet choice is now active on my blog. Thanks for the inspiration!
I've implemented a reverse video mode that switches between my light and dark stylesheets and remembers the setting with a cookie. Thanks for the inspiration!
http://libertini.net/libertus/2006/10/08/reverse-video/#post-333