When you browse the web do you prefer websites which have light background and dark text or vice versa? I wrote about it some time ago and it seems to be a polarizing issue. Some people seem to prefer one over the other. My mini poll for example was essentially dead tied – almost even 50/50 split:
Personally, I can’t stand light on dark color schemes. Especially when it is small white-ish font on black or gray background and I’m trying to read it on my laptop. It is an eye straining, headache inducing torture. Not only that but it is also like staring into the sun. Try it – read a few paragraphs squinting at a light-on-dark design and then switch to a dark-on-light website. What happens? You see spots, as your eyes try to frantically re-adjust. Hell, I do one better: now you can experience this for yourself.
Do you see what I’m talking about here? Going from a dark background to a light one wrecks havoc with your eyes. It is unsettling. It usually takes me a second or two to adjust to the sudden change. Going the other way does not produce such side effects. Of course someone could say that as long as you stay on pages with dark background and light text you will be fine, and it’s the dark on light contrast what affects your eyes. Even if that is true, I feel that it takes me more effort to read the former rather than the later.
I decided to do some research regarding contrast and readability and found this interesting quote:
When reversing colour out, eg white text on black, make sure you increase the leading, tracking and decrease your font-weight. This applies to all widths of Measure. White text on a black background is a higher contrast to the opposite, so the letterforms need to be wider apart, lighter in weight and have more space between the lines.
Most people don’t actually do this when designing their inverted layouts. So I created another page, this time following these guidelines:
- Increased the font size
- Decreased font weight
- Increased letter spacing
- Picked a non-black background
- Used a non-white text
You can see the results here. I don’t know about you, but to me this is a vast improvement. The after effect is still there, but it is greatly diminished. The text itself however is much, much easier to read.
Which one do you prefer? The white on black or the cyan on gray (never mind my poor color choices – let’s talk readability)? I find it hard to believe that someone would prefer the former over latter. But I might be wrong.
When I stumble upon a particularly eye-straining light on dark page, I don’t just sit there and squint. After all, I’m viewing it in my own web browser. I can easily tell it to ignore the offending style sheet. Or better yet, I can use Greasemonkey or Stylish to automatically re-format the page in such a way that it does not offend my eyes. The downside of these methods is that they tend to offer site specific solutions. Recently I found something even better: the Readability bookmarklet.
If you haven’t tried it yet, please do. It is brilliant little script that allows you to pick how you want web page to appear on your screen – the font size, weight, light or dark background, margins and etc… It generates a bookmark that you can drag it to your browser toolbar. Once it’s there, you can just press it and see the web page you are viewing transformed fitting your exact specifications. Let me give you and example.
I use this bookmarklet daily, and not just on websites that have a light on dark design. It works for just about every design issue. For example, if the font is to small, if the margins are to wide or if the design is to cluttered, I can fix it with a single mouse click. It is great.