Color Changing Bookmarklets for Your Browser

The Crescent Moon

(cc) photo credit: lepiaf.geo

These days, the vast majority of computer documents and web pages are displayed in dark text on a light background.  As a result the majority of your computer screen ends up being white space.

Since your display is most likely back-lit, using the computer is a bit like staring into a light bulb.  So if you’ve ever stared at a computer screen all day, or every day as the case may be, you may have caught a case of CVS (Computer Vision Syndrome).  Symptoms are generally mild and may include eye fatigue, difficulty focusing, blurry vision and headache.

To alleviate CVS you could quit your job and go outside or spend a chunk of change on some fancy pants computer glasses infused with all sorts of made-up technology.  But before you run off in a panic, allow me to present some more reasonable solutions to the problem.

Solutions

IMG_7591

(cc) photo credit: Micah Sittig

  1. Lower the brightness on your monitor if it’s too bright.
  2. Adjust the color scheme of your operating system. Changing the default window color from white to a light grey or beige color will reduce contrast making office applications easier on the eyes.
  3. Use a bookmarklet to make web pages easier to read.  (bookmarklets provided below)

Color Changing Bookmarklets

Drag any of the links below into your bookmarks toolbar in order to create a “bookmarklet” which allows you to change the color scheme of any web page.  I’ve found that light on dark color combinations are more ergonomic but YMMV (“Your Mileage May Vary”).

  • javascript:(function(){var newSS, styles='* { background: black !important; color: #C0C0C0 !important; line-height:1.7em !important} :link, :link * { color: #0099FF !important } :visited, :visited * { color: #6666CC !important }'; if(document.createStyleSheet) { document.createStyleSheet("javascript:'"+styles+"'"); } else { newSS=document.createElement('link'); newSS.rel='stylesheet'; newSS.href='data:text/css,'+escape(styles); document.getElementsByTagName("head")[0].appendChild(newSS); } })();
     – clicking here will zap the page to grey text on a black background
  • bright – Robert’s original bookmarklet to zap the colors to black-on-white (bright+)
  • grey – Changes the color scheme to black-on-grey (grey+)
  • retro – Old fashioned computing with green on black (retro+)
  • wp – The old WordPerfect scheme of grey on blue (wp+)

Note: The links with “+” appended also set the line height to 1.7em which can be helpful when lines are spaced too closely together.  Because of a greater perceived contrast, white on black should be given more line height than black on white.

I adapted these from the bookmarklet that someone named Robert posted in the comments of this post on 456bereastreet.com.  The original script (posted above as “bright”) zaps the page to black on white.  While I personally prefer light-on-dark designs, I also favor dim room lighting.   In reality the best color combination for you will depend on several factors such as the amount of ambient light in the room, the type of display, the contrast of the specific colors used,  font type, line height, kerning and personal preference.  For further reading here’s another good post on the subject.

Advertisements

One thought on “Color Changing Bookmarklets for Your Browser

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s