Other / Visual / Glasses
The Glasses bookmarklet blurs the page to simulate viewing without corrective lenses, helping test readability for users with vision impairments. Creates a floating panel with "Toggle Blur" and "X" close buttons, applies a 2px CSS blur filter to all page content except the control panel, allows toggling the blur effect on/off, and visually indicates blur state with button color change (green=normal, red=blurred). Useful for understanding the experience of users with uncorrected vision problems. Run again or click X to remove.
Run Glasses
Test run or drag to
bookmarklets bar to install
javascript:%21function()%7Bfunction%20t()%7Br%3D%21r%2Cl.textContent%3Dr%3F%60body%20%3E%20*%3Anot(%23%24%7Be%7D)%20%7B%20filter%3A%20blur(2px)%3B%20%7D%5Cn%5Ct%5Ct%5Ct%20%23%24%7Be%7D%20%7B%20filter%3A%20none%20%21important%3B%20%7D%60%3A%22%22%2Cd.style.backgroundColor%3Dr%3F%22%23f44336%22%3A%22%234CAF50%22%7Dconst%20e%3D%22blur-toggle-snippet%22%3Blet%20n%3Ddocument.getElementById(e)%3Bif(n)return%20void%20n.parentNode.removeChild(n)%3Bconst%20o%3Ddocument.createElement(%22div%22)%3Bo.id%3De%2Co.style.cssText%3D%22%5Cn%5Ct%5Ctposition%3A%20fixed%3B%5Cn%5Ct%5Cttop%3A%2010px%3B%5Cn%5Ct%5Ctright%3A%2010px%3B%5Cn%5Ct%5Ctz-index%3A%209999%3B%5Cn%5Ct%5Ctdisplay%3A%20flex%3B%5Cn%5Ct%5Ctgap%3A%2010px%3B%5Cn%5Ct%22%3Bconst%20d%3Ddocument.createElement(%22button%22)%3Bd.textContent%3D%22Toggle%20Blur%22%2Cd.style.cssText%3D%22%5Cn%5Ct%5Ctpadding%3A%205px%2010px%3B%5Cn%5Ct%5Ctbackground-color%3A%20%234CAF50%3B%5Cn%5Ct%5Ctcolor%3A%20white%3B%5Cn%5Ct%5Ctborder%3A%20none%3B%5Cn%5Ct%5Ctcursor%3A%20pointer%3B%5Cn%5Ct%22%3Bconst%20c%3Ddocument.createElement(%22button%22)%3Bc.textContent%3D%22X%22%2Cc.style.cssText%3D%22%5Cn%5Ct%5Ctpadding%3A%205px%2010px%3B%5Cn%5Ct%5Ctbackground-color%3A%20%23f44336%3B%5Cn%5Ct%5Ctcolor%3A%20white%3B%5Cn%5Ct%5Ctborder%3A%20none%3B%5Cn%5Ct%5Ctcursor%3A%20pointer%3B%5Cn%5Ct%22%2Co.appendChild(d)%2Co.appendChild(c)%2Cdocument.body.appendChild(o)%3Bconst%20l%3Ddocument.createElement(%22style%22)%3Bl.id%3D%22blur-style%22%2Cdocument.head.appendChild(l)%3Blet%20r%3D%211%3Bd.addEventListener(%22click%22%2Ct)%2Cc.addEventListener(%22click%22%2Cfunction()%7Bo.parentNode.removeChild(o)%2Cl.parentNode.removeChild(l)%7D)%2Ct()%7D()%2Cconsole.log(%22%5CnSource%3A%20https%3A%2F%2Fgist.github.com%2FExplosion-Scratch%2Fc853c40e4c4c0b7ad74f7d8644c238ba%23glasses%5CnBookmarklet%20name%3A%20Glasses%20(blur%20a%20page)%5Cn%22)%3B
← Back to all bookmarklets