WebAIM - Web Accessibility In Mind

Visual Disabilities
Low Vision

Types of Low Vision

The visual acuity of people with low vision varies widely, but, in general, low vision is defined as a condition in which a person's vision cannot be fully corrected by glasses, thus interfering with daily activities such as reading and driving. Low vision is more common among the elderly, but it can occur in individuals of any age as a result of such conditions as macular degeneration, glaucoma, diabetic retinopathy, or cataracts. Each of these conditions causes different types of effects in a person's vision, however, here are a few generalizations:

Important

The key principle of web accessibility for people with low vision is:

  1. Perceivable: because they cannot perceive (see) content that is small, does not enlarge well, or which does not have sufficient contrast

It helps to see through the eyes of someone who has low vision. Below are a few graphics simulating the experience of people with different types of low vision.

Macular degeneration

The macula is near the center of the retina, which is the area in the back of the eye. The aging process and the thinning of the tissues of the macula cause the most common form of macular degeneration,"dry" macular degeneration. The result is a gradual loss of vision. "Wet" macular degeneration occurs when abnormal blood vessels at the back of the eye begin to leak fluid or blood and blur central vision, often resulting in rapid loss of vision. In either case, the person's central area of sight is affected the most, making it difficult to see objects that the person is looking at directly. The images below are a simulation of the effect of macular degeneration. Text can appear broken and unclear.

An photograph of a boy, but the central area of vision is darkened and blurred, making it almost impossible to see the boy's face text can appear broken
Experience it for yourself

drawing of a woman covering her eyes To get a better idea of what macular degeneration is like, hold up your hand about 12 inches (about 30 cm) from your eyes, so that you can't see straight in front of you, but you can see around the edges of your hand. Now, without looking to the sides, try to read something in your peripheral vision. Remember to keep looking straight at your hand! This exercise shows how difficult it can be for individuals with advanced macular degeneration. The problem isn't so pronounced for people with lesser degrees of macular degeneration, but the basic idea is the same.

Glaucoma

Glaucoma is caused by an increase in pressure inside the eye, which causes damage to the optic nerve. The end result is often the opposite of the effect of macular degeneration: the loss of peripheral vision and a blurry central area of vision. It can be particularly difficult to read text because text seems faded as well as blurry. Some people have compared the effects of glaucoma to looking at everything through a straw.

photo of a boy that is blurred in the center and the edges are completely blacked out due to loss of peripheral vision text can be seen in the middle of this image, but it is blurry, and the sides are completely dark due to loss of peripheral vision

Diabetic retinopathy

One of the effects of long-term diabetes can be the leaking of retinal blood vessels, causing dark patches in the field of vision where the leaks occur. Text can appear blurred or distorted in these regions.

photograph of a boy with dark blotchy areas text that has dark blotchy areas that are somewhat distorted

Cataract

Individuals with cataract have areas of opacity in the lens of their eyes which results in a blurred or hazy effect, especially in bright light. Text can appear to fade into the background. High contrast is especially important for people with advanced cataract.

photograph of a boy that is blurred and very light, making it difficult to see details blurry and very light text against a light background, which is difficult to read

Screen Magnifiers

The most common technology that people with low vision use is the screen magnifier. This is a software program that zooms in on a small area of the screen, allowing people with low vision to see it more clearly. Common screen magnifiers include ZoomText and MAGic.

Some kinds of content are difficult to interpret when enlarged. For example, graphics that contain text can become blocky and pixilated, making the text difficult to understand. Take a look at the two images below. The one on the left is a screenshot of text that has been enlarged. The image on the right is a screenshot of text within a graphic that has been enlarged.

enlarged text with the word 'Helen' which is clear and easy to read enlarged graphic of the word 'Keller' which is very blocky and pixelated
Important

To make text more legible when enlarged, use true text as much as possible, rather than text in graphics.

High Contrast

Sites with low contrast can be difficult to read for people with low vision. Some poorly designed sites on the web have bad color combinations such as blue links on black backgrounds, red text on green backgrounds, or other combinations that are not easy on the eyes for anyone, but especially not for people with low vision. There's no hard rule as to how much contrast is enough, but use your best judgment. However, it's usually not too difficult to tell when color combinations do not contrast adequately.

Experience it for yourself

Here are some ideas for roughly simulating low contrast vision:

  • turn down the contrast on your monitor
  • look at your monitor through a tissue or a piece of tracing paper (this technique is more successful on laptop and flat LCD monitors than on full-size monitors)
Important

To the extent possible, maximize the contrast of your web pages, including graphics, fonts, and backgrounds.

Overriding Font and Background Colors

Some people with low vision will change the settings in their operating system and/or browser to not only enlarge the text, but to increase the contrast of the text in relation to the background. Some people like to have a black background with white or yellow text. Others prefer to have a white or yellow background with black text. These are the most common settings, but there other people prefer other high contrast settings. See the images below for examples of how these settings can appear:

black background with large, yellow text white background with large black text

Here's something to remember:

Important

To allow people to customize their contrast settings, it is better to put as much text as possible in true text format, rather than in graphics.

Horizontal Scrolling

This last point is not so much a matter of accessibility as it is usability. You have probably come across web sites that require you to use your horizontal scrollbar to see the content on the right of the screen, even though you had your browser window maximized. This can be a bit annoying to people with perfect vision, but it is even more so for people who use screen magnifiers and are forced to scroll even further to the left and right inside of the small enlarged space they are viewing.

Important

To the extent possible, use percentages, rather than absolute units (e.g. pixels), in your document layout.

The general rule when designing for low vision is to make everything configurable. If the text is real text, users can enlarge it, change its color, and change the background color. If the layout is in percentages, the screen can be widened or narrowed to meet the user's needs. Configurability is the key.

Key Concepts

Key Concepts for Low Vision
Challenges Solutions
Text in graphics does not enlarge without special software, and looks pixilated when enlarged Limit or eliminate text within graphics
Users may set their own font and background colors Allow them to do so by using as much real text as possible, rather than text within graphics.
Screen magnifiers reduce the usable window size To reduce that amount of horizontal scrolling, use relative rather than absolute units (e.g. use percentages for table widths instead of pixels)