How to turn web pages in browser into black & white (Grayscale)?

Question

How can I turn all colours of web pages into simple black and white, on my web browser?

Which browsers support this (Chrome, Internet Explorer, or Firefox)?

Is this even possible?

Solution 1

Fast-forward a couple years, and this can be done nicely in CSS.

body {
  /* IE */
  filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);

  /* Chrome, Safari */
  -webkit-filter: grayscale(1);

  /* Firefox */
  filter: grayscale(1);
}

If you need a reusable shortcut that works on any website, the easiest thing is probably a bookmarklet, which can be used for a bookmarklet as if it were a URL. The code:

(function () {
  var body = document.body;
  body.style['filter'] = 'progid:DXImageTransform.Microsoft.BasicImage(grayscale=1)';
  if (!body.style['filter']) {
    body.style['-webkit-filter'] = 'grayscale(1)';
    body.style['filter'] = 'grayscale(1)';
  }
}());

And the bookmarklet snippet:

javascript:(function(){var e=document.body;e.style.filter="progid:DXImageTransform.Microsoft.BasicImage(grayscale=1)",e.style.filter||(e.style["-webkit-filter"]="grayscale(1)",e.style.filter="grayscale(1)")}())

Solution 2

I was looking for the same, and have found several options:

• Grayscale Tool does what you want

  The downside is that you need to activate it on every page, and the shortcut is Shift+g, which does not work if you're in a text field. And any time you click something, you get colors again.

• Page Filter Effect does this and more, and has a button you can click. Needs to be activated per-page.

• Sheen offers a slider which allows to continuously shift between color and grayscale. Needs to be activated per page.

Solution 3

I found this nice blog entry which explains how to do it in both IE and other browsers:

"“Grayscaling” in non-IE browsers" (James Padolsey)

The basics for IE specifically:

elem {
  filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
  /* Element must "hasLayout"! */
  zoom: 1;
}

You'll want to make a custom CSS file and use that in the browser to apply to all pages (look into IE's Accessibility options).

For other browsers, it requires more work, including adding javascript to loop through elements and convert to grayscale. So it's not going to be "point'n'click B&W", but might get you headed in the right direction.

The blog has a demo page for it, and you can download the JS script from there.

Comments

[Joe Internet]

Opera has a high contrast mode... presentations.cita.illinois.edu/funct/slide21.html