Where developers come to connect, share, build and be inspired.


Checking webpages in grayscale with CSS3 filters


Choosing a color palette for your webpage can be difficult, choosing a palette to protect against vision deficiency can be even harder. With just a few added CSS rules, you can get a glimpse of your webpage in shades of black and white - links, borders, images, et al.

CSS3 filter

The new CSS3 filter rule is a powerful new feature which allows you to set various filters such as a brightness, blur, hue, saturation, and many others on all of your HTML content. For our example, we will make use of the grayscale filter.

body {
    filter: grayscale(100%);

And not to forget any vendor prefixes...

body {
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    -ms-filter: grayscale(100%);

Quick Peek

Now, to load this into any HTML document dynamically, we'll need to use javascript to gain access into document.styleSheets. Using document.styleSheets[n].insertRules(CSS_RULE_STRING), we can insert any arbitrary CSS rules into an existing stylesheet.

// document.styleSheets[0] typically has protection...

This will insert our filter rule in the second stylesheet, in the last position.

To make things watertight, let's go ahead and append this rule to all of the document's stylesheets.

for (var i in document.styleSheets)

A Less Error-Prone Solution

Be careful, though, since some members of document.styleSheets are either empty or protected, we need to handle any errors that come up.

for (var i in document.styleSheets)
    try {
    } catch (err) {}

Now, let's make things compact. This time with all of our vendor prefixes. I'll also include a javascript: protocol in the front, so you can enter this directly in your address bar - or create a bookmarklet.

javascript:for(var i in document.styleSheets) try{document.styleSheets[i].insertRule("body{filter:grayscale(100%);-webkit-filter:grayscale(100%);-moz-filter:grayscale(100%);-o-filter:grayscale(100%);-ms-filter:grayscale(100%);}",document.styleSheets[i].cssRules.length)}catch(err){}


The results are just what we expect. Now, I must stress that the grayscale this script produces does not 100% reflect vision deficiency. I have not by any means done extensive research on this topic, but this is a quick solution to see if the highlighted colors on your page are not easily discerned with a different set of eyes.





Thanks for reading. @jdan - jordanscales.com


  • Img_0001

    Great article. Is nice to know that CSS got finally awesome!!

  • 37b092a324da25d53fd63d780692b174

    would be great to make a bookmarklet out of that so that you can test for greyscale as you work.

  • User-avatar

    Hi JORDAN. Nice stuff. But it would be great if you may add a live demo.

  • 5757771770a152302b03f8e78c7b105a

    Can I make a Chrome extension with this?

  • Avatar

    @shvelo @dperrymorrow You can copy the shortened javascript code (with the javascript: protocol prefix) into an item on your bookmarks. Then just click on that :)

Add a comment