Accessibility / Color / Grayscale
Toggle grayscale filter on the page. Applies a grayscale(1) CSS filter to the document body, rendering the entire page in shades of gray. Running again removes the filter and restores full color. Useful for testing color-independent design and simulating grayscale displays.
WCAG SC 1.4.1: Use of Color
Run Grayscale
Test run or drag to
bookmarklets bar to install
javascript:%21function()%7B%22use%20strict%22%3Btry%7Bfunction%20e(e)%7Bdocument.body.style.filter%3De%2Cdocument.body.style.webkitFilter%3De%7Dwindow.isGrayscale%3F(e(%22none%22)%2Cwindow.isGrayscale%3D%211)%3A(e(%22grayscale(1)%22)%2Cwindow.isGrayscale%3D%210)%7Dcatch(t)%7Balert(%22Bookmarklet%20Error%3A%20%22%2Bt.message)%7D%7D()%2Cconsole.log(%22%5CnSource%3A%20https%3A%2F%2Fgithub.com%2Fpattespatte%2Fpublic-bookmarklets%2F%5CnBookmarklet%20name%3A%20Grayscale%5Cn%22)%3B
← Back to all bookmarklets