Nifty bookmarklet to make web pages easier on the eye

Can’t remember if I’ve posted this before, but even if so, it bears repeating.

I find it hard to read white/pale text on dark/black backgrounds online (it triggers occular migraines), so some sites are painful to read and end up being a victim of the back button (even MetaFilter can fall into this category).

If you, like me, find some sites use of negative contrast hard on the eyes, here’s a possible solution.

Short version: Drag this bookmarklet to the bookmark bar of your browser:


Longer version: Copy and paste (and adapt, if you want to change the colours) the following into the address field of a new bookmark, then drag it to your bookmark bar.

javascript:(function(){var newSS, styles=’* { background: white ! important; color: black !important } :link, :link * { color: #0000EE !important } :visited, :visited * { color: #551A8B !important }’; if(document.createStyleSheet) { document.createStyleSheet(%22javascript:’%22+styles+%22’%22); } else { newSS=document.createElement(‘link’); newSS.rel=’stylesheet’; newSS.href=’data:text/css,’+escape(styles); document.getElementsByTagName(%22head%22)[0].appendChild(newSS); } })();

Whenever you get to a page which is designed in high negative contrast (pale text on dark bg), simply hit the Nifty! bookmarklet button on your browser toolbar, and the page will magically change into something more soothing on the peepers.

For example, it turns this:

Into this:

(The original link above is this page from the BBC College of Journalism blog, which I find interesting in terms of content, but unreadable in terms of design)

Another example from this MeFi post: