Ow, My Eyes!
I don’t know if I’m seeing more and more blogs that use light text on a dark background lately, or if I’m just getting more sensitive to it for some reason, but I don’t think my eyes can take it any more. Sure, some sites look nice with that combination, but only when you first load them up. After reading a paragraph like this, the super high contrast gets to me. And the worst part is when I go to a different site and have the lingering after-image of the high contrast blog still burned in my retinas.
If you know someone whose blog features a lot of light text on a dark background, you can forward this link to the visual offender. It’s a special page demonstrating just how much of an eye strain it can be. Maybe we can eradicate this practice one blogspot site at a time.
For now, I’ll be using this bookmarklet which automatically changes any website into black-on-white in your browser. Drag it to your bookmark toolbar to keep it handy. (found here)
Comments
For sites I visit often, like this one (you think white on black is bad, try bright green, orange and yellow on black), I create a Stylish stylesheet that automatically fixes the page. But I realize that’s more work than most people would want to do. So thanks for the bookmarklet!
(Stylish is a Firefox add-on. No link because of your spam filter!)
Posted by: Doug | September 8, 2008 11:31 AM
Ow! Don’t do that.
When I come across a poorly-designed site, whether it be a palette disaster, an overflashed front page, intrusive music, whatever, I immediately navigate away.
The content just can’t be worth it and life is too short.
Posted by: pannonica | September 8, 2008 11:42 AM
Er, how is white on black higher contrast than black on white? The examples are hard to read because they’re bold and tightly spaced. On the linked page, the justified text also adds to this.
It has basically nothing to do with light text on a dark background, which ought to be, if anything, less straining on your eyes since the dark background represents that much less light being beamed at your face.
Posted by: Miles | September 8, 2008 12:14 PM
I know that everyone’s mileage will vary on this. And you’re right I did make my example worse than in many blogs — but I figured people are less likely to read my example in its entirety than a blog they really care about, so I exaggerated the problem to make it more easily apparent.
And of course it’s true that black on white has technically as much contrast as white on black. But on a back-lit display, it’s similar to looking at a flashlight in a dark room, as opposed to looking at a black spot in a light room. When my eyes adjust to the darkness, the brightness is blinding.
I’m also know that, for some people, white on black is more readable on a screen. But I can’t relate.
Posted by: David | September 8, 2008 12:26 PM
Paper doesn’t glow, asshole.
Posted by: Fred | September 8, 2008 12:28 PM
damn you! I just finished my portfolio, just checking for proof reads and now you’ve made me uneasy about uploading it because its white text on black. I think mine looks fine because I use fairly thin and spacious text…
Posted by: Billy Simmons | September 8, 2008 1:23 PM
Billy, I hear you: My own portfolio website also uses white text on black (although the text is pretty sparse). However I’m planning a redesign that will change that. It didn’t used to bother me as much as it does now.
(I’m not a graphic designer, so someone who knows more than I do can probably offer examples when I’m wrong on this — I’m expressing my own viewpoint, and your mileage may vary)
Posted by: David | September 8, 2008 1:32 PM
Oh no, you’re making me rethink the design of my new website!
(Though it’s only been one week I’ve been working away at it, and yes my eyes are getting a bit tired.)
Posted by: RichM | September 8, 2008 2:01 PM
I think this is a matter of taste, and as one user brought up, typography. I can make a wretchedly difficult to read site using black on white, and the sample text you included wouldn’t look that hot white on black anyway.
As someone who has spent years programming on Linux, white on black (with syntax colouring, naturally!) is the only comfortable way for me. Black on white is just about the worst; so bright! On the Mac, I use writing software with full screen writing modes which blacken the entire screen and present only text. I use a light warm grey for this.
Posted by: AmberV | September 8, 2008 2:46 PM
Black-on-white hurts my eyes more than white-on-black. The latter can be more difficult to design (more leading, larger type, &c.) but I find I’m far more willing to read it.
I’ve made a dark Wikipedia theme and it has helped me greatly.
http://flickr.com/photos/stilist/2840767774/
Posted by: jordan | September 8, 2008 3:00 PM
Some people have dark backgrounds with lighter text as part of “green” movement. See blackle.com as an example of this movement related to Google. I participate in this, and as I express in my blog that I know most people are not seeing websites on CRT monitors where the energy savings is real, I do it as just another reminder.
Posted by: Mr. Wisdumb | September 8, 2008 3:10 PM
There has been some research on this. If you see 456bereastreet.com’s blog entry on the same subject, there are some interesting comments that might steer us away from subjective “I like black on white,” or “I hate people who like black on white” statements, towards a more rational discussion. Check out comments 23 & 24, where research is cited. If anyone finds any research that’s more recent, please post it.
Generally, it appears that dark text on light backgrounds are easier to read for the majority of people. However, the amount of light in the viewing room affects this - i.e. if it’s a bright, sunlit room, a light background is preferred, and if its a dark room a darker background is favored. Also, people with visual impairments may tend to favor high-contrast, dark-background websites.
Posted by: Ellen | September 8, 2008 5:39 PM
I wonder how much of this also has to do with everyone having different focal habits?
As a designer, I’m frequently amazed by how often non-designers will clutter a Word document with bolded text and all-caps and swear it’s much clearer to read than evenly weighted text.
Perhaps the overall evolution of on-screen typography has dropped the ball here? Maybe we too quickly forced a fluid medium onto a pixelated medium before our vision/brains could catch up?
Posted by: Carlo | September 8, 2008 6:08 PM
Thank you for speaking the truth, especially about the horrible after-images! I can’t explain why black on white is better than the reverse, but the trendy black pages with light type always hurt my eyes…
Posted by: Ned Batchelder | September 8, 2008 8:27 PM
Guilty… ah, I’ve been meaning to change it for a while, looks like now is as good a time as any…
Posted by: Brady J. Frey | September 8, 2008 9:28 PM
Light on dark is only hard on the eyes if you’re doing it wrong.
http://hoskings.net/ben/light-on-dark.html
#000 -> #333
#fff -> #ccc
Lovely.
Posted by: Ben Hoskings | September 8, 2008 11:35 PM
I always found white on black to be easier to read, but when I went that route on my blog my page views dropped off- a lot! I found that dark gray on white seems to get the best response because the contrast is softened significantly.
Posted by: Elizabeth R | September 9, 2008 1:11 AM
Softening the colors (like Mr. Hoskings’ example) is a great way to lessen the strain.
You can also use light on dark if you’re not dealing with large blocks of text. It’s particularly nice when you are emphasizing graphics (i.e., a photography portfolio) because it emulates a darkroom. It’s still recommended to use a dark grey (#333) instead of black, though.
Don’t be afraid to play with other dark colors on light, such as dark green on cream.
This has been a Professional Graphic Designer Presentation. :)
Posted by: Steve | September 9, 2008 2:53 PM
I agree with those who have noted that softening the colours is often the best approach.
A white background gives you instant burn-in, making anything you subsequently look at (e.g. any images on your site) appear duller. Softened colour on black seems the most appropriate if that’s an issue for you.
Posted by: Pseudonym | September 10, 2008 3:32 AM
Your example only proves that full justified text set in bold weight and tight leading filled with awful rivers is hard to read in either white on black OR black on white.
Full justified type wont read well here because your eyes do not have the visual cue as to what line you are on. I agree, color scheme does indeed have some part in it however, but simply reversing to black on white is NOT the answer. Perhaps switching to a hierarchy of dark greys.
Dont mis-educating the public about color scheme when the real problem is BAD TYPOGRAPHY. There is no right and wrong in design, only effective and non effective.
Posted by: UM NO | September 10, 2008 2:18 PM
“To demonstrate the difference, click this link and come back to this page when your eyes have recovered.”
hmm… link on the example page doesn’t work - or is it just me?
Posted by: no name | September 10, 2008 7:38 PM
This is a great discussion of Web typography, especially as regards the softer colors. And that bookmarklet is a godsend.
White-on-black isn’t necessarily harder to read than the reverse, and if it was the Web standard, it wouldn’t be a problem. The afterimage when I move to a black-on-white page is what kills me.
Posted by: Mark Dodge Medlin | September 10, 2008 11:49 PM
Yep,another thing you can try if you’re on a Mac,
try the following: control-option-apple-8 will desaturate and invert the display
Posted by: Blitzy Boy | September 11, 2008 12:36 PM
It also doesn’t help that the browser anti-aliasing is shit if you don’t use safari or chrome, the font is bold and serifed and that the line-height is shit as well. Light text on a black background CAN WORK, you just gotta know how to pimp it (sans font, slightly bigger, with a greater line height does wonders.)
Posted by: wicky | September 12, 2008 4:23 PM
If white text on a black page is so bad, why are you hosting google ads in the same format on both the black/white & whote/black pages?
Posted by: Mark | September 25, 2008 3:48 PM
After a few months of white text on a black background, I’ve just switched back to black on white. (Also try playing with the size of the browser window!) http://stewdio.org/
Posted by: Stewart | December 16, 2008 2:05 PM
I’m TOTALLY the opposite, for some reason: I find white backgrounds with black text more eyestraining, though it’s mitigated if it is off-white instead of white-white.
Plus, unless the design is REALLY good, I find I start lumping all those white pages together with the Big Corporate sites, which are never anything BUT white paged.
With the same CSS/Javascript thingummies that people use to alter font sizes on blogs they read, it would be really easy to offer a dark and light theme which the user can choose, and that’s going to be the direction I’d like to move towards. Choice is good.
But my default will always be for dark backgrounds - they have an underground connotation, for one thing. But mainly, it just doesn’t hurt my OWN eyes.
Posted by: Mesila | January 11, 2009 12:25 AM
I actually find the light-on-black easier on my eyes. But really, as any pixel-artist will attest, both pure white and pure black are quite jarring to the vision. A better alternative is to use colours that have less extreme luminosities and a bit of saturation, like #254117 (dark green) on #C3FDB8 (light sea green)
Posted by: Ifer | March 24, 2009 10:37 AM
I found this while looking for information on whether dark-on-light or light-on-dark is better. Frankly, I did find the “owmyeyes” page quite annoying. However, I thought, the reversed version was even worse… my eyes were almost in pain by the huge expanse of bright light hitting them on all sides of the text (on a high resolution monitor, your text only takes up about a quarter of the width). Frankly, I found this blog design almost as bad.
I think the issue has more to do with font-choice, leading, kerning, content width, etc., then the colors it is in. I’d suggest you experiment with those a bit, and you may find that there may a happy medium between the two extremes — that lay closer to light on dark.
Posted by: Guest | February 7, 2012 9:36 AM
I respectfully disagree with your assessment about the visibility of dark text on light background.
After using computers for thirty hears, my visual sensitivity has seriously declined to the point that I need a flashlight to see in shadows in my own house, and I have had to up the lumens of all the luminaries.
I attribute that to working on damned bright screens for decades, ever since Windows, as a matter of fact, where I have had my eyes blasted day in day out by bright white backgrounds to the point where I just can’t see in the dark anymore.
I really long for the times we used to have bright letters on dark backgrounds. But the worst has to be grey type on slightly lighter grey background. Totally illegible; I simply refuse to read web pages written this way. At least YOU aren’t doing it ;)
Kudos for bringing the subject up; it’s still a sorely neglected issue in web design.
Next issue to tackle: serif fonts that literally PRICK your vision with their pointy edges!!!
Posted by: Chris C. | June 25, 2012 5:15 PM