Low Vision

Low vision describes any number of situations where a person has lost a significant amount of their vision, but not enough to be considered blind. It can be caused by any of a number of factors, each of which presents as a slightly different set of visual challenges. These include:

• albinism
• brain injuries
• cataracts
• diabetic retinopathy
• eye injuries
• eye cancer
• glaucoma
• hemianopia
• macular degeneration
• retinitis pigmentosa
• retinal detachments
• various infections

Design Considerations

People with low vision may rely on the browser's zoom features, or they may use screen magnification software such as ZoomText or MAGic, which show a small portion of the screen at a time. Low vision users are also often screen reader users so keep those requirements in mind as well.

When designing for users with low vision, we need to:

• Use good contrasts and a readable font size. Ensure that your software passes WCAG Guideline 1.4.3 Contrast (Minimum)
• Publish all information on web pages (HTML), not PDFs or other inflexible formats
• Use a combination of color, shapes, and text
• Follow a linear, logical layout and ensure text flows and is visible when text is magnified to 200%
• Put buttons and notifications in context.
• Provide a visible focus state. Ensure that your software passes WCAG Guideline 2.4.7 Focus Visible
• Provide a clear visual distinction between content (text, images) and controls (buttons, links, etc.)

We need to avoid:

• Disabling pinch-to-zoom
• Using low color contrasts and small font sizes
• Burying information in downloads
• Only using color to convey meaning
• Spreading content all over a page and forcing a user to scroll horizontally when text is magnified to 200%
• Separating actions from their context

How to design mobile app experiences for the visually impaired by Ayesha Zafar on Invision discusses steps specific to mobile interactions.

Tools

• Macular Degeneration simulator and video
• Glaucoma simulator
• Simulator for Macular Degeneration, Diabetic Retinopathy, Cataracts, and Glaucoma
• WebAIM's Color Contrast Checker - will tell you if two colors you enter pass accessibility guidelines

Additional resources

• Responding to Color (PDF) by the Cooperative Extension Service of the University of Kentucky.
• Dos and Don'ts on designing for accessibility and the accompanying poster on designing for users with low vision (PNG) by Karwai Pun at the UK Accessibility in Government Blog