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:
Dark on light wins by tiniest margin.
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.
This:
Original Page
Into this:
Page you can actually read
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.
I agree, but any kind of shell/cmdline should be white text on black background.
Must be years and years of gazing at mainframe (and then, later, (Li/U)nix shell sessions), but I actually prefer light on dark backgrounds.
That said, in today’s web environment, it’s quite difficult to create a decent design implementation as opposed to dark on light, as the web has always tilted. The font size must be bigger, from a select set of sans-serif families, and margins and line-height must also be configured properly.
It can be done. daringfireball.net (pronouncing nothing on the editorial merit of said site, just its look and feel) is a great example light on dark readability.
Problem is, too much flashy and splashy, too many colors — dark on light has to be a much more minimalist endeavor.
But if done right, I prefer. Especially since these days I generally work in dimly light offices.
Since I usually sit in a darkened room (so I don’t know what time it is, so I don’t know that I should be in bed!) I find screens that are predominately white quite tiring. So I’m kinda in the light on dark camp.
That said, I Do like light-ish on dark-ish, that seems to be the optimum for me.
But as a rule, if it interests me, I read it!
For webpages I prefer reading dark-on-light, but for programming and working at a terminal I prefer light-on-dark. I think that’s because proportional fonts on web pages are hard to read in light-on-dark, because it usually hasn’t been adjusted the way you did in your second example. The monospaced fonts I use in Emacs and in my terminal emulate those weight and spacing differences simply by being monospace, making it more reasonable to my eyes.
I also have a problem with excessive floaters in my eyes, particularly a couple of permanent ones. They can be a problem on a white background where it’s easy to see them, but I can’t see them when looking on a dark background.
I always preferred light on dark, I think this is mainly because i spend a lot of time using the terminal (which i cant stand to read when its dark on light). I would love it if i where able to do most of my web browing in elinks, which by the way, your site shows up great in.
I think for me its just a brightness preference, for example I prefer to have less lighting in a room, and i usually cover my walls with posters and things to cover up the whiteness (i live in an apartment so i cant paint my walls).
Trying out your example pages, i found that while i noticed the sudden “turning on the lights” effect, there wasnt any after image, and i didnt have any feeling like i had to re-adjust my eyes to read the text. The second example is what i would probably consider as idea for a web page.
I’d be curious to know if light on dark/ dark on light preference would have something to do with how much terminal use someone has seen in the past.
I was also going to mention daringfireball… it’s just about the nicest light-on-dark implementation I can think of. Just because it’s usually done poorly doesn’t mean it can’t be done well.
I also find light on dark less tiring to read. Switching back and forth between your test pages, it’s the transition between dark and light that takes a little time to adjust, and not the inverse.
Also, I’m not used to the blinding luminosity and contrast people usually use in their display, and invariably lower them 50-70% before I can get a comfortable position. Dark on light only makes things worse, since a majority of the screen will be lit instead of a minority.
I use Firefox with “Custom Toolbar Buttons” so in the tool bar is an icon that switches a page with bad colors to my chosen default colors. Simple fix. I use it more often than I would like.
I also have a slight red-green color problem. On some pages I cannot read the headers with yellow or orange on white. This one is OK, but is easier to read when I use Custom Toolbar Buttons – Page Colours to switch the orange to blue.
Wonderful !
I hate light text on dark background too. It’s very painful when reading and concentrating on such a page.
Many thanks for this wonderful tool !
I really dislike black/dark text on a pure white background. The contrast is just too much for my eyes, and all that bright, white background really hurts my eyes. The best for me is a pale-coloured background with black or dark-coloured text on it (a very pale blue with dark blue text; a pale grey background with black text; and so on).
I found this interesting, reading it on my high-contrast settings which gives me a black background with lime-green text (which looks white to me.)
I am legally blind, but have a very small ‘hole’ in one eye that allows me to see three or four letters of a word, or in other words, allows me to read, albeit a pain in the rear.
I cannot look at anything white. It causes an extreme glare and pain in the eyes, almost identical to looking at the sun. (Interesting coincidence I must say.) If all web sites were designed with dark backgrounds and light text, I wouldn’t need the high contrast settings at all; however, this is not the case, nor realistic either for that matter.
The point is, many people with visual issues are in the same boat, i.e., require a ddark background and light text in order to read a web page at all. Designers create their sites for people with normal vision, as they are in the majority with rarely much thought to those of us who aren’t so fortunate.
Now it can be said that people like myself can just change their computer settings, and the design is of little consequence. That is true, but you need to remember that their are many (and I mean MANY) people who can see well enough to use normal settings, but have trouble with content on light backgrounds, as in, they can read them, but it is far more difficult. Besides that, no one wants to change their settings to an ugly black and white unless they really have to.
What is the answer? That is not easy to say. Providing a choice in design, for example, two style sheets may be one. Before I switched to a high contrast scheme I used to skip over sites that were hard to read and move on to the next. (Much more business is lost that way than people realize.)
I don’t know that this has helped the debate anyway, but I did want to add that people with impaired vision have a completely different take on this. (Incidentally, there are some people with impaired vision who require the opposite, dark text on a light background, which only further complicates the issue. Most of us, however, need dark backgrounds and light text.)
It’s a dilemma to be sure. I expect little to change.
WHITE TEXT on BLACK BACKGROUND gives me a FRIGGEN HUGE HEADACHE and EYESTRAIN. It is HORRIBLE. After only 5-10 seconds, I can no longer read it. After I switch back to the normal Google search windows, my eye shows aftereffects, much like looking at a bright light and seeing the light burn-in in your eyes.