NoCoffee, the vision impairment simulator you should be using

Chris Quinn
3 min readOct 9, 2017

--

It’s a few days till World Sight Day 2017 (12 October), when the International Agency for the Prevention of Blindness will update their Vision Atlas with new data from the Vision Loss Action Group.

From the open access paper, we learn that globally, of the 7.33 billion people alive in 2015:

  • an estimated 36 million were blind, an increase of 17.6% from 1990
  • circa 216 million people had moderate to severe impairments
  • circa 188 million had a mild impairment

Source: http://www.thelancet.com/journals/langlo/article/PIIS2214-109X(17)30293-0/fulltext

Population growth & ageing populations the primary cause of the increase in vision impairment.

As web developers in 2017, armed with this information, what should we do? How can we cater to visually impaired users? Or rather, how can we at least architect our sites so we’re not making our content impenetrable?

Sometimes, knowing what tools you have available makes the difference. One tool for developers I’d like to talk about here is NoCoffee, but do shout out in the comments if you’d like to showcase another.

NoCoffee

https://chrome.google.com/webstore/detail/nocoffee/jjeeggmbnhckmgdhmgdckeigabjfbddl

The number one reason for writing this article, NoCoffee is an awesome extension from Aaron Leventhal deserving of a much higher profile.

The Chrome extension allows you to layer simulations of visual impairments over any web page, as well as adjusting the intensity of different conditions.

BBC News with NoCoffee’s Protanopia filter

Being aware of how differently colour can be interpreted can drastically change your assumptions.

Imagine trying to use Trello (which I love using), which can heavily rely on colour-tagging different cards — or literally any web application using Bootstrap’s standard buttons.

Bootstrap’s standard button stylings
Bootstrap’s standard buttons with NoCoffee’s Protanopia filter
Bootstrap’s standard buttons with NoCoffee’s Achromatopsia filter

Being mindful of how users with visual impairments may be viewing sites could & should inform the way we architect our web projects.

NoCoffee has more options for simulating blur, contrast loss, cataracts and other conditions, beyond colour filters, but it’s important to note that these simulation layers are just that — simulations. They’re not medically or scientifically audited, by the author’s own admission; but NoCoffee is a fantastic first step towards widening awareness of the myriad visual impairments your website’s users may have.

--

--

Chris Quinn

Freelance Full Stack JS Developer. I talk about web apps & the awesome tech behind them.