Introduction
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 1. Each person with low vision has a slightly different set of visual challenges.
Conditions that can cause low vision
As of 2023, the World Health Organization estimated that the following conditions most frequently caused low vision 2:
- Cataracts (94 million)
- Refractive errors including nearsightedness (myopia), farsightedness (hyperopia), and presbyopia (88.4 million)
- Age-Related Macular Degeneration (AMD) (8 million)
- Glaucoma (7.7 million)
- Diabetic Retinopathy (3.9 million)
Other causes include:
- albinism
- brain injuries
- eye injuries
- eye cancer
- hemianopia
- retinal detachment
- Retinitis Pigmentosa
- various infections
Design Considerations
Low vision users are also often screen reader users so keep the design considerations for blindness in mind as well.
Do
- Use good contrasts and a readable font size 3. Ensure that your software passes WCAG 1.4.3 Contrast (Minimum) – Level AA 4.
- If you are designing for Android native apps, visit Material.io/color to confirm that your color, typography, and visuals are legible 5.
- Publish all information on web pages (HTML), not PDFs or other inflexible formats 3.
- Use a combination of color, shapes, and text 3.
- Follow a linear, logical layout 3 and ensure text flows and is visible when text is magnified to 200%.
- Put buttons and notifications in context 3.
- Provide a visible focus state. Ensure that your software passes WCAG 2.4.7 Focus Visible – Level AA 4.
- Use Dynamic Type for native mobile apps, so that the text size the user chooses in the operating system displays in your app 5.
- Implement dark mode for your apps because light text on a dark background is generally easier for low vision people to read 5.
- Put alerts, pop-ups and error messages near the center of visual focus to ensure that people using magnifying software can see them 4. Otherwise, the user may not know that the information is displaying because it is scrolled off their screen 4.
- Provide a clear visual distinction between content and controls so that users can easily find controls 4.
Don’t
- Don’t use low color contrasts and small font sizes 3.
- Don’t bury information in downloads 3.
- Don’t only use color to convey meaning 3.
- Don’t spread content all over a page or force a user to scroll horizontally when text is magnified to 200% 3.
- Don’t separate actions from their context 3.
- Don’t forget that people with low contrast vision (and others) may change the color palette of your page or app at the browser or operating system level to ensure they can use the information 4.
- Don’t disable pinch-to-zoom 4.
Tools
Magnifiers
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 4.
ZoomText examples
Color contrast checkers
- WebAIM’s Color Contrast Checker – will tell you if two colors you enter pass accessibility guidelines. This is important for people with low vision who may also have low color vision.
Additional resources
- Low Vision by the National Eye Institute[↩]
- Blindness and Vision Impairment by the World Health Organization, dated 10 August 2023[↩]
- Dos and don’ts on designing for accessibility by Karwai Pun at Gov.UK[↩][↩][↩][↩][↩][↩][↩][↩][↩][↩]
- Accessibility Fundamentals – Disabilities, Guidelines, and Laws at Deque University[↩][↩][↩][↩][↩][↩][↩][↩]
- How to design mobile app experiences for the visually impaired by Ayesha Zafar on Invision[↩][↩][↩]