NoCoffee vision simulator
Vision problems are more pervasive than most of us realize. Upwards of 285 million people worldwide are visually impaired. Many more have low or moderate visual difficulties. The number in the U.S. is expected to double by 2020, due to the aging of the baby boomer generation. NoCoffee can be helpful for understanding the problems faced by people with slight to extreme vision problems, such as: * Low Acuity: Some web pages use very small text or click targets. While it’s true that users use built-in browser zoom or screen magnifiers like ZoomText (http://www.aisquared.com/zoomtext/), many non-technical users do not know how. * Low Contrast Sensitivity: Many designers use text with very low contrast, e.g. light gray text on white. Incidentally, here are some great tools for analyzing contrast on the web, and my favorite is the Snook Colour Contrast Check at http://snook.ca/technical/colour_contrast/colour.html. * Colorblindness: Although color use in design is definitely a good thing, it’s important to remember the maxim “do not rely on color alone”, as 7-10% of males have some form of colorblindness. Chris Campbell has a great article describing color-related design problems and solutions. See http://www.particletree.com/features/interfaces-and-color-blindness/. * Visual snow, glare, ghosting and cataracts. * Nystagmus (rapid, involuntary, oscillatory movement of the eyes). * Obstructed visual field: floaters, obstruction to one side (retinal detachment or hemanopia), obstructed central vision (glaucoma), spotty vision (diabetic retinopathy) or obstructed peripheral vision (retinitis pigmentosa or macular degeneration). Note: the simulations of partial visual fields cannot follow your eye gaze as they would in the real world. As always, feedback appreciated!
- (2019-07-16) Marlon Bishop: Please fix Snow, when you get a chance. Also, it would be helpful to have presets for contrast WCAG3.1
- (2019-02-01) Sarah Bohannon: I develop data visualization for my company, and having a quick way to check if a report or graphic is colorblind-friendly is paramount. Great, easy to use extension for anyone who shows charts and graphics to a wide audience.
- (2019-01-24) T Fink: This is very useful as a developer! Trying to learn WCAG standards is a big task, this extension helps simulate many of the concerns we should keep in mind when building and designing websites. I was using funkify, but as they are no longer free this is the next best option I have found!
- (2018-04-25) Alistair McNaught: Really easy to use and powerful tool to help developers see their own pages in a new light (literally!)
- (2018-03-06) Esteban Diaz: It doesn't work on my chrome!
- (2017-11-30) Emily Young: Really great and useful for something free. Snow doesn't work, and I think Glare might have a glitch. But really convenient in general.
- (2017-10-05) Manuel D: It doesn't work at all !
- (2017-09-08) Iain Ballard: A really great tool. Some of the simulations don't work perfectly -- but this is a great free tool to cover basic accessibility concerns.
- (2017-05-19) Cristina Stoll: This is a great tool! I recommend it to all my dev and design friends.
- (2017-04-21) Liva Chan: 很有用，谢谢。
- (2016-05-13) Joshua Hori: Great plugin for simulating different types of, and combinations of, visual disabilities.
- (2016-02-11) Matthew Kirschner: Useful, despite a few technical issues. Have to refresh the page when the extension is initialized. Was throwing a weird error in the console, even when not in use. Disabling the plugin, of course, removed the error.
- (2015-06-11) Absolon: Thank you for this. I finally got my surroundings to understand how I see. Great with the diseases for med-students that get a feel for the different conditions. Now we only need a solution of coloring links (have to see them, but lack to see if I pressed them and have to search through the text again. Like Wikipedia that have links going everywhere). Aaron, kudos for this! Think there could be a solutions for the links? That seems like the largest problem in Chrome. FF has excellent solutions for this. (Roughly 120 million "Caucasians" having some color deficiency, mostly reg/green)
- (2015-04-24) Marc Zablatsky: I use this all the time to show people what their website looks like to individuals with low vision. For many it is an Ah Ha moment and they get why web accessibility is so important.
- (2015-03-19) Nick Ronnei: Really awesome tool. I make web maps and this is really going to be helpful with accessibility.
- (2015-02-22) George Weilenmann: Wonderful plugin great for exploration of CD/CB issues as well as visual acuity issues.
- (2014-07-07) Aaron Krauss: This plugin is amazing for developers. It has all the major settings for all types of color blindness, so you can test everything. It also maintains your settings when you change pages. There are a lot of settings to test everything, but I mostly use the combo box with different presets for each type of color blindness. Wonderful plugin! Accessibility needs to be a thing that front-end devs and designers are consistently testing.
- (2014-06-06) Michelle Michael: Way cool and educational! Most people are not aware of the wide range of vision impairments there are.
- (2013-05-16) F1LT3R: Very useful for developing websites for low-vision users. The feature set seems to cover a wide range of visual issues. I was surprised that you can even simulate floaters and cataracts. The plugin can make page a little slow with the blur on, but for testing a site's readability in QA, this is a great tool.
- (2013-03-08) Dean Brusnighan: Very helpful to get a sense of how users with vision limitations experience a web page.
- (2019-11-08, v:0.4.9) suhail ahmed: Extension is not wroking on Chrome Browser
Where i have installed in mac book air is chrome browser to experience the plugin unfortunately it is not working
- (2019-07-23, v:0.4.9) Ann Schoew: Not functioning
This tool is amazing but I just added the 0.4.9 version and it doesn't work. I'm on a maxOS 10.14.5. Are any updates coming?
- (2019-06-26, v:0.4.9) Flutter Remains after Reset
Hello, I have found on Version 75.0.3770.100 (Official Build) (64-bit) of Chrome on Ubuntu that when flutter is set to a value other than 0 and then reset, flutter remains on some tabs that were open at the time of setting the property.
- (2019-05-26, v:0.4.9) Dan Buda: Console error
The extension is causing a console error (Chrome v74): Unchecked runtime.lastError: The message port closed before response was received.
- (2019-03-23, v:0.4.9) Snow problem_Render in small size, stretching problem ?
The Snow effect does not stretch on chrome (but it displays), just so you know I'm on Windows 10, Chrome Version 72.0.3626.121... (official Build, 64 bits) Thank you for NoCoffee =)
- (2018-04-11, v:0.4.9) Erin Hickman: Flutter persists
If I use the flutter setting, it continues across all tabs in the browser even when I have reset all or closed the window.
- (2018-03-14, v:0.4.9) Benjamin Walsh: Not working in Chrome 65
None of the plugin controls work in Chrome Version 65.0.3325.146 (Official Build) (64-bit) on Windows 10. the move and toggle but don't change the look of the website in the browser.
- (2017-05-18, v:0.4.9) app popup window won't load
apple macbook. Just started happening
- (2017-03-08, v:0.4.9) George W Langham: Won't load the app popup window
This seems to have only just started happening.
- (2016-12-14, v:0.4.9) George W Langham: Flutter (nystagmus) setting issue
Great extension, just found a bug for me. Flutter, when set then reset down to 0, continues as if I hadn't reset it, until I refresh the page. Apart from that, it's a pretty damn brilliant app.
- (2016-09-08, v:0.4.9) Peter W: background color unaffected?
Hi, this extension is fantastic - one of the best I've found to help developers literally see through the eyes of those with an impairment (well, almost). That said, it seems the body background color is unaffected - it stays the same color as it was. Is that a known issue for others or just me? To test, go to this page and turn the contrast slider all the way up. The divs or paragraphs will lose contrast but the background color remains white: https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-without-color.html