How To: No Coffee

14 June 2019

This is an old post, so may include broken links and/or out-of-date information

Here’s the bind: websites are coded by developers on the latest machines, using the fastest connections. They’re designed by graphic designers with good eyesight and colour sense. And they are updated by their owners on large desktop machines, when most users are on a phone. In other words, they’re built by outliers for the majority.

  • 71% of people in the UK wear glasses or contact lenses.
  • The most common vision impairment is presbyopia, which affects 99% of people by age 51.
  • More than 2 million people in the UK live with sight loss and 1 in 5 people will start to live with sight loss in their lifetime RNIB.

These facts are why there are carefully worked out rules about how we design and code for the web. Because we want everybody to be able to use our website. This is why we:

  • Use type at size 16px or above for most text.
  • Always make sure there is a contrast ratio of at least 4.5:1 for normal-size text
  • Make text resizable

One way we can get some insight into how other people are seeing and experiencing our website is with NoCoffee

What is No Coffee?

No Coffee is a free Chrome extension that simulates different vision impairments. It puts a filter over your web page that shows how a user with diabetic retinopathy, or low contrast sensitivity, or a number of other vision problems, might see it. It’s not a scientific instrument; it’s just to give you a rough idea!

How to install

Go to the Chrome Web Store, in Chrome, and click install.

How to run

  • Find the icon in your toolbar
  • Click to open the options:
Screenshot of No Coffee options
  • Choose a setting and browse your website!
The Supercool homepage with No Coffee Chrome extension turned on. No Coffee adds a dark circle to the page, making the middle difficult to see

Pro tips

Choose a small Blur and then move the Contrast loss slider up and down. All the most common eye conditions, including simple aging, affect contrast acuity, so this slider is the most useful for testing.

1 in 12 men are colour blind (and 1 in 200 women). The most common form of colour blindness is Deuteranomaly. Choose it from the dropdown.

Related Posts