Mike Slinn

Connoisseur of Technology

UI Considerations for the Visually Impaired

2017-04-04 / All Blog posts

If you look at a computer screen all day, and the screen has a lot of glare, the resulting eyestrain can temporarily degrade your vision to the same degree as a visually impaired person.

Background

According to the Farlex Free Medical Dictionary, visual impairment, or low vision, is a severe reduction in vision that cannot be corrected with standard glasses or contact lenses and reduces a person's ability to function at certain or all tasks. The World Health Organisation estimates that 285 million people are visually impaired worldwide, of which 246 million have low vision and 39 million are blind. People's vision generally deteriorates with age.

In the US, cataracts are the most common form of visual impairment, according to the National Eye Institute. The NEI estimates that more than 24 million Americans over the age of 40 have cataracts. “The risk of cataracts increases with each decade of life starting around age 40. By age 75, half of white Americans have cataracts. By age 80, 70 percent of whites have cataracts, compared with 53 percent of blacks and 61 percent of Hispanic Americans.” Males are twice as likely as females to get cataracts.

Cataracts start slowly. If you wear glasses, at first you think you can't quite clean them properly. Then you notice your sunglasses are also always dirty. Then you notice that white screens with black text are hard to read because of the glare from the white areas.

The medical treatment is to replace the cloudy and stiff lens in the eye that has the cataract with a plastic lens. In many European countries, cataract surgery is the most common operation performed in that country. Usually people delay the surgery until their quality of life and independence his diminished markedly.

Coping With Visual Impairement

Saturated Color and White Backgrounds

Dark screens with a minimum of saturated color helps. Increasing font size helps, and san-serif fonts, which have fewer spindly features, are easier to read.

Some OSes offer a dark theme. You can enable the Windows 10 dark theme from Settings / Personalization / Colors. Scroll down and select “Dark” under “Choose your app mode”. The Universal Windows Platform applications will immediately darken. However, if a developer did not make the effort to support the dark theme, their program will continue with their original color theme. Unfortunately, Windows File Explorer is one of those applications.

Some software offers a nice dark theme that does not require any fussing, for example IntelliJ IDEA's Darkula, Adobe Premiere Pro and Adobe Audition.

The Firefox web browser's Dark Background and Light Text plugin is very helpful. By default, the plugin overrides the CSS styles for all web pages, so the background is black, and text is white. The plugin can be trained to leave certain pages untouched, for those pages that become unusable with the modified default stylesheet, for example, Google Calendar. Other sites already offer a nice dark theme, so they do not need the modified theme thrust upon them, for example tweetdeck.twitter.com.

Some software offers a dark theme which requires further modification before a good result is a achieved. For example, the Thunderbird email client with the TT DeepDark addon gets you partway there, then Tools / Options / Display / Fonts & Colors / Colors shows the following dialog, where you can set the colors as shown:

As another example, Adobe Reader has a dark theme, which can be enabled via Edit / Preferences / Accessibility; enable Replace Document Colors and click on Custom Color; change the Page Background to black and Document Text to light grey. Disable Only change the color of black text or line art, and ensure that Change the color of line art as well as text is enabled.

Small Text and Low Contrast Colors

Users who know CSS can enforce a custom stylesheet on a per-site or a per-page basis for hard-to-read web pages. The My Style plugin for the Chrome browser activates with Ctrl-M, and users can enter CSS to suit. As any web developer knows, Ctrl-Shift-C starts HTML inspection, so the HTML in question can be viewed, and the CSS experimented with before immortalizing the changes with My Style.

Design Considerations

If your web page has images in it, try to use transparency instead of a white background. It would help visually impaired readers to only inflict strong primary colors, or a white background, when necessary. For example, this entry in a stylesheet would only show a light grey background when the user mouses over the image, otherwise, the background would remain transparent:

img:hover { background-color: #666; }

Contact Mike Slinn

Unless you are a recruiter, in which case you should not try to make contact!

  • Email
  • Direct: 514-418-0156
  • Mobile: 650-678-2285

Disclaimer

The content on this web site is provided for general information purposes only and does not constitute legal or other professional advice or an opinion of any kind. Users of this web site are advised to seek specific legal advice by contacting their own legal counsel regarding any specific legal issues. Michael Slinn does not warrant or guarantee the quality, accuracy or completeness of any information on this web site. The articles published on this web site are current as of their original date of publication, but should not be relied upon as accurate, timely or fit for any particular purpose.

Accessing or using this web site does not create a client relationship. Although your use of the web site may facilitate access to or communications with Michael Slinn via e-mail or otherwise via the web site, receipt of any such communications or transmissions does not create a client relationship. Michael Slinn does not guarantee the security or confidentiality of any communications made by e-mail or otherwise through this web site.

This web site may contain links to third party web sites. Monitoring the vast information disseminated and accessible through those links is beyond Michael Slinn's resources and he does not attempt to do so. Links are provided for convenience only and Michael Slinn does not endorse the information contained in linked web sites nor guarantee its accuracy, timeliness or fitness for a particular purpose.


comments powered by Disqus

© 1976-2020, Michael Slinn. All rights reserved.