Designing for Low Vision: Beyond Color Blindness
How to create inclusive designs for the 2.2 billion people with vision impairments worldwide.
people have vision impairment globally
adults over 40 have some form of vision loss
of vision impairment is preventable or treatable
Low Vision vs Color Blindness
While color blindness affects how users perceive specific colors, low vision impacts overall visual clarity. Users with low vision may have difficulty with contrast, detail, brightness, or field of view regardless of color perception. Many accessibility discussions focus on color blindness while overlooking the larger population with low vision.
Types of Low Vision
Low vision encompasses various conditions that affect sight differently. Understanding these helps you design for the full spectrum of visual abilities.
Reduced Acuity
Difficulty seeing fine details and small text
Who: Affects 217 million people globally
Design: Larger text, clear fonts, generous spacing
Reduced Contrast Sensitivity
Difficulty distinguishing between similar shades
Who: Common in cataracts and glaucoma
Design: High contrast ratios, bold color differences
Reduced Field of Vision
Limited peripheral or central vision
Who: Affects people with macular degeneration, glaucoma
Design: Central content placement, avoid far edges
Light Sensitivity
Discomfort or pain from bright light
Who: Common with migraines, albinism, eye conditions
Design: Dark mode options, reduced brightness, muted colors
Contrast Requirements for Low Vision
WCAG provides minimum contrast requirements, but users with low vision benefit significantly from exceeding these minimums. Here is what each level means:
Large text is defined as 18pt (24px) or 14pt bold (19px bold) and above.
Color and Design Techniques
1. Maximize Text Contrast
For body text, aim for the highest possible contrast. While 4.5:1 is the minimum, users with low vision read more comfortably at 10:1 or higher.
This gray text on light gray is hard to read for many users.
Near-black text on white provides excellent readability.
2. Support User Preferences
Respect system settings for reduced motion, increased contrast, and dark mode preferences.
CSS Media Queries to Support
- prefers-contrast: more
- prefers-color-scheme: dark
- prefers-reduced-motion
- forced-colors: active
Implementation Tips
- Increase contrast in high-contrast mode
- Provide a true dark mode, not just inverted colors
- Remove animations that could cause discomfort
- Test with Windows High Contrast mode
3. Do Not Rely on Color Alone
Color should reinforce meaning, not be the only indicator. Always provide additional visual cues.
Required field
Color is the only indicator
* Required field (required)
Asterisk + color + text label
4. Size and Spacing
Generous sizing and spacing improve readability for users with reduced acuity.
- Minimum body text size: 16px (1rem)
- Line height: at least 1.5 for body text
- Paragraph spacing: at least 1.5x the font size
- Touch targets: minimum 44x44 pixels
- Allow text resizing up to 200% without breaking layout
5. Focus Indicators
Clear focus indicators help users track their position when navigating with keyboards or assistive technology.
- Focus outline should be at least 2px thick
- Contrast ratio of 3:1 against adjacent colors
- Never remove focus outlines without providing alternatives
- Consider adding a visible focus state beyond the default browser outline
Testing for Low Vision Accessibility
- 1
Zoom to 200%
Test your design at 200% browser zoom. All content and functionality should remain accessible without horizontal scrolling.
- 2
Test with contrast checker
Use tools like our contrast testing guide to verify all text meets at least AA standards, preferably AAA.
- 3
Enable high contrast mode
Test with Windows High Contrast mode or macOS Increase Contrast setting to see how your design adapts.
- 4
Blur test
Apply a 2px Gaussian blur to your design. Key elements should still be distinguishable and the hierarchy should remain clear.
- 5
Test with real users
Include users with low vision in your testing process. Their feedback provides insights that automated tools cannot capture.
Create Accessible Color Palettes
Generate color palettes optimized for accessibility, including high-contrast options suitable for users with low vision.
Generate Accessible Palette