Can’t Read Light Text on Dark Backgrounds?
computing, tech support January 20th, 2008
Some of my favorite blogs are designed with white (or light) text on a dark background. There’s only one problem. I can’t read them.
Evidently I’m one of those people who finds the contrast straining on the eye. It’s OK for a minute or so, but if I’m reading a lengthy article, after a while my eyes get very tired and I have to stop.
Also, when I click onto another page, the image from the light-on-dark page remains, sort of like a picture negative.
So what do I do to keep reading those blogs? I created a little bookmarklet in my Firefox web browser that contains java script to swap the color contrast. When I click the button, light goes dark, and dark goes light. Ahhh! Much better.
The only problem is that I can’t find a way to do the same thing for my readers who use Internet Explorer. Believe me, I’ve tried. If anyone knows how to create a bookmarklet for java script, let me know and I’ll post it.
To create this bookmarklet in Firefox, make sure you have an active Bookmarks Toolbar. Click View > Toolbars and make sure Bookmarks Toolbar has a checkmark next to it. If not, click it and it’ll be activated.
Drag this link up to your Bookmark Toolbar and drop it there. It’ll create a button that you can rename if you want. Right-click the button, left-click Properties and in the Name field enter something like Switch Contrast or whatever you want to call it. Click OK.
Now when you visit a blog or web site that uses light text on a dark background, click that button and the colors will be inverted!
If you don’t have Firefox, you can get it here. I’m not a fan of Internet Explorer, so I take every chance I get to sing Firefox’s praises. If you need some help with this tip, drop a comment in the drawer or email me at kathyblog07 [at] gmail [dot] com and I’ll be happy to help you!
Post addendum: Whoops! I need to clarify that I did not write the java script. I created the bookmarklet from script I found on the web. I cannot properly credit the person who wrote it because there is no linkback to his site. All I know is his name is Robert. That’s all I could find at the site I found the script on. So, thanks Awesome Java Script-writing Robert Somebody. You’re saving our eyes!
If you got a kick out of this post, subscribe to The Junk Drawer feed!
January 20th, 2008 at 9:26 am
What a great tip! Now if you could just teach me to write code in Java Script! I don’t know why, but I’ve just never been able to grasp that scripting language. I can write in Basic Script and several other languages, but my brain can’t grasp Java Script. Need anything written in COBOL, I’m your guy!
Lee’s last blog post..Sunday Scenery
January 20th, 2008 at 9:33 am
OK - I am very sorry my blog has this color pattern.
I am also very sorry that I am so technologically inept that whatever you wrote just got completely lost on me.
Margaret’s last blog post..Life’s Little Lessons
January 20th, 2008 at 9:45 am
Hey, Lee — I updated my post to clarify that I did not write the java script that does this. I found exactly one reference to it on the web, which was ill-credited. Had I been able to find the original author, I would have been glad to credit him. Oh my God! COBOL. I think I have you beat there. My first programming language was Pascal.
Margaret — My eyes are actually OK on your blog. But just barely. I think if your blue background was any darker, I’d have to use my handy-dandy button on you.
BTW, there’s a controversy over which is better. Many designers actually recommend light-on-dark because they feel it’s better for readability. I didn’t want to get into that argument in this post. It’s really a matter of what your eyes can handle and I wanted to provide a way for people to help themselves to a tool that improves things if they’re like me and have trouble with light-on-dark.
January 20th, 2008 at 11:00 am
I’m with you on the Firefox..It’s the best out there..
robert bourne’s last blog post..Mish Mash of Things
January 20th, 2008 at 12:17 pm
Be the Bloke! (or is it “Be the Mrs. Blog Bloke?” - intended as humor only, just in case the Bloke surfs by )
Thankfully, your Bookmarklet is multi-browser lingual!
The “Switch Blog Background” bookmark works for the Safari Web Browser on my iMac and Firefox on my PC and iMac!
Another creative solution to heal my migraines caused by reading white text on dark backgrounds!
My old solution was to copy - paste the white text into my word processor and change the text color to black.
Thank you for the your creative time-saving solution!
Debbie Dolphin’s last blog post..Technorati Thunderdome Lighthouse Lift-0ff & Comedy Disc CD Meme
January 20th, 2008 at 12:46 pm
Robert — Firefox is superior in so many ways. Here’s a link from my archives on my 5 Must-Have Firefox Extensions, complete with instructions for installing them, if anyone’s interested:
http://junkdrawerblog.com/2007/09/5-firefox-must-have-extensions.html
Debbie Dolphin — Blokesters Rule! Thank you for testing in other browsers and operating systems. Good to know it works for them, as well. Some people also simply highlight the text on the screen so it gets a temporary white background and changes the text to a contrasting color. I find that a little messier-looking than just hitting the button for the whole page.
January 20th, 2008 at 1:17 pm
Great tip! Did your cat figure this out too?
Jeff’s last blog post..No, really… it wasn’t me!
January 20th, 2008 at 1:34 pm
Ooh, tech tips! This is a good one. My poor eyes need all the help they can get. I’m just getting used to Firefox after years of IE. More incentive!
JD’s last blog post..I’ve Seen David Strathairn in His Underwear so you don’t have to
January 20th, 2008 at 1:46 pm
Love the tip. I especially liked the fact that I could read the instructions and follow the steps at the same time. I almost can’t wait to find a site that requires the switch.
January 20th, 2008 at 2:06 pm
Jeff — Nope, this one’s all me!
JD — Mine too. I’m always using the tip that Shadow came up with to make the text larger. This one helps me a lot, too.
ann of the shampoo bag — I’m glad you found it easy to implement. And it cracks me up the screen name you are using. If anyone is curious, read all about it here:
http://junkdrawerblog.com/2008/01/the-shampoo-snafu.html
January 20th, 2008 at 3:11 pm
Hallelujah sister, hallelujah! It is a little too technical for me, though. Instead I subscribe to the blog via Google Reader and then the text is on a white background.
But look at you getting all technically jiggy with it. Burn in Hell Internet Explorer, burn in Hell!
cardiogirl’s last blog post..I stood up to a 7-year-old — baby steps I know, but it still felt good
January 20th, 2008 at 3:19 pm
i feel the same way about dark backgrounds and light text.
chickadee’s last blog post..Welcome Kiwi
January 20th, 2008 at 3:51 pm
I don’t have trouble with light text on dark backgrounds. As long as there is sufficient contrast, I’m good to go. What I do have problems with is light text on light background and a dark background with text only marginally lighter. I’ve seen white backgrounds with faint yellow text and dark blue backgrounds with royal blue text. I have to highlight those to read them. Usually I end up not visiting such blogs again.
Libertine’s last blog post..Spirit in the Sky
January 20th, 2008 at 4:50 pm
Great idea. Thanks for sharing it. White on black IS extremely tiring to read. I can handle a few seconds and then I’m gone.
windyridge’s last blog post..Where Did He Go?
January 20th, 2008 at 4:53 pm
I’ve found that using a light grey, instead of white, can ameliorate this effect, but still provide sufficient contrast.
Libertine’s last blog post..The Countdown Begins
January 20th, 2008 at 5:41 pm
I’m a new convert to Firefox and nearly every day I find another cool thing I can do with it. One plug-in that’s come in quite handy is the Web developer feature. (Sorry if I got the name wrong.) Whatever-it’s-called places an eye dropper in the bottom corner of my browser, so I can determine the hex code for any color on any page. It’s a great help when doing Web design.
When I used to surf on IE, my hard drive would clog with downloaded images. It was so bad, I had to clear my cache three times a day. With Firefox, I only clear it once a week, and usually it isn’t even necessary.
Firefox rocks!
January 20th, 2008 at 5:51 pm
cardiogirl — You’re right. Color contrast is a non-issue for people reading blogs via a reader. IE does indeed need to die.
chickadee — I think the preference runs 50/50. You either love it or hate it.
Libertine — God, yes. I’ve seen yellow text on white backgrounds and wonder if these people are color blind. It’s true. If a blog is too hard to read, people generally don’t come back. I’m constantly obsessing over my blog’s readability. I hate how cramped the sidebar is, but I have yet to figure out how to widen it.
Windyridge — That is why blog design is so important. We all have only seconds to grab and keep the reader’s attention. Unless the content is super fantastic, they might just browse away, never to return.
Carla — I have only one reason to use IE, and that’s to check and see how my blog renders on it. I need to make sure it looks OK in a browser that more than half my readers use. One blogger I know had to change his theme because it looked like hell in IE, but fine in Firefox.
January 20th, 2008 at 6:04 pm
Thanks for the reminder about checking in IE to make sure a design works. I forgot to do that with this week’s post! Due to your prompting, I checked it. Thankfully, it’s fine.
I have another page on my blog that looks funky in Firefox but great in IE. After spending about an hour tweaking it to get it to work in both, I just gave in and erred on the side of Microsoft. Like it or not, they still rule the world.
January 20th, 2008 at 6:35 pm
The other benefit of Firefox over IE is the security issue. IE users are just begging to get infected with the latest virus, trojan or spyware.
Lee’s last blog post..Sunday Scenery
January 20th, 2008 at 6:51 pm
This is a useful script ! - Thanks !
Better than permanently changing settings for all sites on Firefox which you can do by going to:
Tools > Preferences > Content, click on the Colors button and uncheck, “Allow pages to choose their own colours …”
Tech Support: Click on the “Green” link in the “yellow” box.
You: All I see is a blue links !
Tech Support: (Elevator Music)
January 20th, 2008 at 9:53 pm
Just wanted to let you know I’m loving your new script thingy. Now as soon as I encounter a white on black site I click the button and my eyes are happy. Yay!
Jeff’s last blog post..No, really… it wasn’t me!
January 20th, 2008 at 10:06 pm
For fun I once wrote an entire post using the same font color as my blog background. In other words, you had to highlight the entire blog to read it. It was interesting to see how many of my readers didn’t catch it.
VE’s last blog post..Let’s Talk about the Word
January 21st, 2008 at 6:17 am
Carla — It’s easy to get used to how our blogs look in our favorite browser. Always a good idea to check on others.
Lee — And Firefox has so many cool features and add-ons that are easy to implement. I’ll never go back.
Jaffer — Cool, indeed! And elevator music.. funny!
Jeff — Junk Drawer. Saving eyes, one set at a time!
VE — I’ve seen someone do that before. Maybe it was you? If I recall correctly, it caused a stir?
January 21st, 2008 at 10:47 am
Thank you! Thank you! Thank you! Thank you! Thank you! Thank you! Thank you! Thank you! Thank you! Thank you! Thank you! Thank you! Thank you! Thank you!
There’s a DVD site I read every day, and it’s the old “white text on black” issue. Like you, I can only view it in short bursts. Just tried the script, and it works like a charm.
Best part? It works in Seamonkey as well as Firefox! (And, as Kathy knows, I greatly prefer the ‘Monkey any day…)
January 21st, 2008 at 12:21 pm
Whoops I’m guilty of having a white text on black background blog. But I might change the template one of these days.
Yeah, Firefox > IE
cyberpunk’s last blog post..Seven Weird Things About Me
January 21st, 2008 at 1:37 pm
My Journal has this design as well!
Jean-Luc Picard’s last blog post..Starfleet Academy Exam (Part One)
January 21st, 2008 at 3:26 pm
Phew, it looks like moving to over Wordpress has improved commenting over here. I wish I could say the same.
Regarding the reading problem Kathy … have you looked into that Alzheimer’s thing? Just wondering
Cheers!
…BB
Blog Bloke’s last blog post..My Apologies Blokesters
January 21st, 2008 at 3:31 pm
I have two questions for you Kathy:
1. What are you using for the comment avatars?
2. What is the name of the “share this” script?
Blog Bloke’s last blog post..My Apologies Blokesters
January 21st, 2008 at 5:34 pm
Grant — Glad it works in SeaMonkey, too!
cyberpunk — Yeah, but then all your light-on-dark readers will be mad at you
Jean-Luc Picard — No worries. Whenever we want to lighten it up, we can “Make it so.”
Bloke! — I know. My comments are insane. When I first started, I was glad to get two per post. I should be careful what I wish for.
For comment avatars, I’m using the Easy Gravatars plug-in. I grabbed a free icon (the notepad and pen) from freefever.com, uploaded it to my server and then set the default avatar to that. For “Like this? Share it, save it!” I’m using the “I Love Social Bookmarking” plug-in.
January 21st, 2008 at 6:03 pm
Hi Kathy, So, I have a white background with black lettering and I’m the type of blog you don’t like to read? HHHHHHHMMMMMmmmm? Lol. Hahaha. Okay, so I am not redesigning my blog, and my comment here is strictly tongue in cheek. I have to admit though, that I am in favor of the white background with back or dark lettering for the simple fact that the MIS system we use at my place of employment is an old AS400 database with a black background and green lettering. I go home with a headache staring at this all day. When it came time to design my blog, I originally had a black background with white lettering (in my old baseball blog days) and I had to switch because it reminded me of work. If your method works, then more power to you. I have to commiserate with anyone who suffers from constant eye strain, and do what you have to do to alleviate it. I hope you know I’m just horsing around here. It’s the end of a long work day and I’m feeling a bit punchy. Your blog is where I go to get a laugh and wind down. I hope all is well with you, Kathy. -Mike.
Mr. Grudge’s last blog post..Yesterday’s Son
January 21st, 2008 at 6:05 pm
Thanks. That’s what I thought. I’m using another avatar plugin that defaults first to MyBlogLog and then to Gravatar.
Blog Bloke’s last blog post..A World of Blogging
January 21st, 2008 at 6:09 pm
Mr. Grudge — No, actually yours is the kind I CAN read! I can’t read light on dark. I just click my handy-dandy button and I’m good to go! I feel your pain. I remember the old days with green on black. UGH!!! You can be punchy all you want. Don’t you know that’s what the Junk Drawer is all about by now? I’m glad this is where you find yourself after a tough day! I’ve done my job.
Bloke — I prefer to position my avatars right under a person’s name (not off to the right). Maybe you can help me with that?
January 21st, 2008 at 6:11 pm
I just checked the “I Love Social Bookmarking” plugin.
http://wordpress.org/extend/plugins/i-love-social-bookmarking/
Did you know that it uses the “nofollow” attribute, meaning no linky love.
Bummer
Blog Bloke’s last blog post..A World of Blogging
January 23rd, 2008 at 4:54 pm
Hi Kathy,
I can’t comment on anybody’s prom pictures because I didn’t go to either of mine. I didn’t have the nerve to ask anyone to go with me. I think you look nice in both photos. -Mike.
Mr. Grudge’s last blog post..Yesterday’s Son
January 23rd, 2008 at 5:29 pm
Mike — You’re sweet. I’m not sure you missed much, as all I can remember about mine were getting my toe stomped on, and how hot I was in that pink nightmare!
January 30th, 2008 at 9:42 am
Hi Kathy, my first time at your place, and I have enjoyed my read. Great tip with this black & white theme, I also get tired eyes from this. Thanks for that. BTW found your site through BZ.
John’s last blog post..A Year Old & Happy
January 30th, 2008 at 7:20 pm
John — Welcome aboard! I’m glad you liked the tip. I use it all the time.
January 31st, 2008 at 6:55 am
[...] or find another trick. Anyway, if you want this *really easy* fix, then you need to go here and read this article which explains how to do it. It really [...]
January 31st, 2008 at 7:09 am
Thank you so much!
Maia’s last blog post..Good for the eyes
January 31st, 2008 at 5:20 pm
Light on dark - that’s how it should be. But a serif typeface in small point size for body text will make reading a pain. Publication designers will always recommend using a sans serif typeface if you’re going to put light-colored text on a dark background. Try using Verdana text in white on a black background and you’ll see what I mean. Avoid using a serif font like Times Roman or even Georgia on a dark background which I think you might be using. Just happened to drop by. Nice blog.
January 31st, 2008 at 6:18 pm
Markk — Thanks for sharing your expertise. You’re right, I use Georgia on my blog because it’s larger to read (I think) and looks attractive (again, my opinion). I still can’t read light on dark, but it seems to be popular with a lot of people. Thanks for dropping by!
February 18th, 2008 at 5:00 pm
You stare into what amounts to a lightbulb when you look into a monitor.
Slowly, you will fry your eyesight by staring into a white (#FFFFFF) background with thin black text.
If you notice, TV folks never send white backgrounds and never send big amounts of text to your TV screen.
For those stubbornly insisting upon a white background, at least style your black text to render heavier and bigger, far heavier and bigger than you do now.
For those insisting upon writing booklet length webpages, put your writing into a pdf or ebook file, add a link and a summary (think blog post entry) about the file.
Most folks put too many words on web pages, words that say little and your waste time.
Better web designers awaken to truth. A computer monitor is more like a TV screen and nothing like a piece of paper, whether in the form of a book page, printed office document, billboard.
Dark backgrounds make for easy reading, save your sight and help those with low vision.
February 18th, 2008 at 5:07 pm
Pier Johnson — This is so interesting to me that many people urge web designers to put light text on dark backgrounds, but those designers don’t have my eyeballs last time I looked. So I still think that’s a matter of opinion.
As for the larger text, this is critical for a lot of people. I remember when I first started my blog, my font size was too small. I bumped it up to 12pt. and that helped. I’m even considering going larger.
And it’s tough for me to get through posts without enough paragraph breaks. In fact, I add more breaks in my post than I would if I was writing on paper. It really helps ease the eye strain.
Thanks for your input!
February 18th, 2008 at 6:08 pm
There is no opinion about it.
It is a matter of physics, biology and anatomy — the physics of light and optics.
Many wrong things have sprung up since Packard Bell and AOL led Everyday Folks to the Internet and the Web. Chief among them is the job “Web Desiger”.
Many of the so-called “web designers”, if not most, never learned about graphics — typography. Nearly none have studied the Physics of Light and Art or Optics much less TV production.
These folks ought to watch TV channels like Bloomberg and CNBC to see how pros render big amounts of text upon electronic field (monitor).
Nearly all web sites fail because the “web designers” make them function as microfilm readers instead of making them as TV.
Do this. Watch any documentary about ancient history aired on the History Channel. Next, go to your Public Library and pull up some microfilm from a newspaper like the San Francisco Examiner or the New York Times.
Since no video exists from ancient history, documentary makers must use stills of artifacts as well as illustrated pictures. They connect these into a slide show shown with sound.
After 15 minutes of scrolling through a microfilm newspaper (essentially a quite long web page), you will long to watch that history documentary.
Even the worst slideshow hack you can watch on Youtube beats any “web designer” designed web page.
Oh, and if you notice, I format my blog posts with many newline breaks after blank lines.
February 18th, 2008 at 7:22 pm
Kathy, your bookmarklet works well. Thanks.
Two more doings anyone can do:
[1] Get the vastly superior Opera web browser
With Opera, you can control web site rendering easily and with power.
[2] Add another copy of your bookmarklet for black on white.
You will have to rename the bookmarklet and edit the the entry:
(1) Everywhere you see newSS change it to newBW
(2) Swap the words black and white.
(3) Pick other colors that appear after :link and :visited. You can try “yellow” and “gray” or these: #FFFFCC and #DEFFFF
Tips:
[1] Make paragraph text big say 16 pt.
[2] For white backgrounds, make your black text heavy.
[2] For black backgrounds, make your white text thin.
February 19th, 2008 at 7:16 am
Pier Johnson — The point of this post was to share a way for people like me to change the color scheme to something their eyes find easier to read. Thank you for providing instructions for others who may want to go the light on dark route. It’s all a matter of preference. And I think now we’ve covered all the bases, so everyone’s happy.
March 14th, 2008 at 7:03 pm
I know this is an old post but I just installed it into my ‘Flock’ browser and it works great! Thanks.
Babs (Beetle)’s last blog post..Things that go ‘crunch’ in the night
March 14th, 2008 at 7:07 pm
Babs — Glad it helped you. I use my handy-dandy button many times while reading blogs. It’s a life saver!