Simulating low visual acuity

UPDATE: I’ve created a Chrome extension called NoCoffee that implements simulations for a number of vision problems.

I’ve been searching for something to simulate surfing with blurry vision. While blur is not a scientific representation of most visual disabilities, it does help us get an idea. Simulating vision loss while designing pages is highly useful — the number of people with visual disabilities is already high and expected to double by year 2020 (U.S. statistics).

We do have the Chrometric browser, which does a very good job simulating color perception issues. Unfortunately, Chrometric has some downsides. For one, the blur effect it provides is not enough to simulate anything except very minor difficulty seeing. Another problem is that it requires a lot of steps to download and get installed, and finally you are left with a separate browser app. It would be better to just use bookmarklets or a browser extension.

Today I found CSS filter. By setting the filter style to ‘blur([value]px)’ on document.body we can cause blurriness in a webpage. Counterintuitively, setting blur to 0px still causes some blur, so you have to remove the style in order to go back to pure clarity. Note: for now we have to use -webkit-filter, and this is only supported in WebKit-based browsers.

In any case, I’ve used CSS filter to create a bookmarklet that lets your blur a web page.

Or, just create a bookmark with the following text for the URL:

javascript:(function()%7Bwindow.checkBlurKey%3Dfunction(evt)%7Bwindow.blurLevel%3D(window.blurLevel%7C%7C0)%3Bwindow.blurLevel-%3D((evt.charCode%3D%3D91%26%26window.blurLevel%3E0)%3F1:0)%3Bwindow.blurLevel%2B%3D((evt.charCode%3D%3D93)%3F1:0)%3Bwindow.updateBlur()%3B%7D%3Bwindow.updateBlur%3Dfunction()%7Bvar%20currZoom%3Dwindow.outerWidth/window.innerWidth%3Bvar%20adjustedBlur%3Dwindow.blurLevel/currZoom%3Bdocument.body.style.webkitFilter%3DadjustedBlur%3F%27blur(%27%2BadjustedBlur/2%2B%27px)%27:%27%27%3B%7D%3Bif(window.blurLevel%3D%3D%3Dundefined)%7Bwindow.addEventListener(%27keypress%27,checkBlurKey)%3BsetInterval(updateBlur,500)%3B%7Dwindow.blurLevel%3DparseInt(prompt(%27Blur%20amount%20(0-20)%3F%20%5Cn%27%2B%27(Press%20%5B%20and%20%5D%20in%20page%20to%20change)%27,window.blurLevel))%3Bwindow.updateBlur()%3B%7D)()%3B

When you open it in a WebKit-based browser (Chrome, Safari, etc.), you can set the level of blur for the current page to 0-20. Pressing [ or ] changes the zoom level. The blur level is also divided by the current zoom level — this is so that zooming up makes the content clearer, just as it would for a person with blurry vision.

Improvements I’d like to see:

• More browser support: For now, this works only in WebKit-based browsers. I would welcome a version that fixes that.
• More simulations: It should be able to simulate a wide variety of vision issues, such as various kinds of colorblindness, floaters, blocked central vision or blocked peripheral vision. To learn more about different types of visual disabilities, see VisionSimulations.com. I suspect that all these can be simulated via CSS filter, but I haven’t investigated.

Here is the code I used to generate the bookmarklet. It divides the blur level by two — changes smaller than 0.5 don’t seem to do anything).

window.checkBlurKey = function(evt) {
 window.blurLevel = (window.blurLevel || 0);
 window.blurLevel -= ((evt.charCode == 91/*[*/ && window.blurLevel > 0) ? 1: 0);
 window.blurLevel += ((evt.charCode == 93/*]*/) ? 1: 0);
 window.updateBlur();
};
window.updateBlur = function() {
 var currZoom = window.outerWidth / window.innerWidth;
 var adjustedBlur = window.blurLevel / currZoom;
 document.body.style.webkitFilter=
  adjustedBlur? 'blur(' +adjustedBlur / 2 +'px)':'';
};
if (window.blurLevel === undefined) {
 window.addEventListener('keypress', checkBlurKey);
 setInterval(updateBlur, 500); // In case zoom changes
}
window.blurLevel = parseInt(prompt('Blur amount (0-20)? \n' +
 '(Press [ and ] in page to change)', window.blurLevel));
window.updateBlur();

P.S. I could imagine this property could be useful on April 1.

Enjoy!

Advertisement