Designing for Low Vision Users

Low vision is not blindness. It is a spectrum of visual impairments that cannot be fully corrected with glasses, contacts, or surgery. The WHO estimates 2.2 billion people globally have near or distance vision impairment. Low-vision users may have blurred vision, restricted field of vision (tunnel vision), blind spots (scotomas), extreme light sensitivity, or difficulty distinguishing colors. Most low-vision users do not use screen readers — they use magnification, high contrast settings, and customized display preferences to read screens visually.

This distinction matters for UX design: optimizing only for screen readers misses the majority of visually impaired users.

How Low-Vision Users Interact with Screens

Screen Magnification

Most low-vision users magnify their screens to 200-800%. At high magnification, they see only a small portion of the page at any time and must pan across the viewport to read content and find controls.

Magnification tools:

• Browser zoom: Built into every browser. Scales the entire page.
• OS magnifiers: Windows Magnifier, macOS Zoom, iOS Zoom, Android Magnification.
• ZoomText (Freedom Scientific): Dedicated screen magnification software with reading guides, cursor enhancement, and screen reader integration.

High Contrast and Custom Colors

Low-vision users frequently use high-contrast modes or custom color schemes:

• Windows High Contrast Mode: Replaces all page colors with a user-defined palette (typically white-on-black or yellow-on-black).
• Custom CSS overrides: Users inject stylesheets or use browser extensions to change colors, fonts, and spacing.
• Dark mode: Reduces overall luminance for users with photosensitivity.

Large Cursor and Pointer

Users may enlarge the mouse cursor or use cursor enhancement tools that highlight the pointer location.

WCAG Requirements Supporting Low Vision

Criterion	Level	What It Does for Low Vision
1.4.3 Contrast (Minimum)	AA	Ensures text is readable for users with reduced contrast sensitivity
1.4.4 Resize Text	AA	Text must be resizable to 200% without content loss
1.4.10 Reflow	AA	At 400% zoom, content reflows to single column without horizontal scrolling
1.4.11 Non-text Contrast	AA	UI components and graphics have 3:1 contrast
1.4.12 Text Spacing	AA	Layout tolerates user-applied spacing overrides
1.4.13 Content on Hover	AA	Tooltips remain visible and dismissable
2.4.11 Focus Not Obscured	AA	Focused element not hidden by sticky elements

Design Strategies for Low Vision

Support Zoom Without Breaking Layout

At 400% browser zoom on a 1280px display, the viewport behaves as if it were 320px wide. Your responsive design must work at this width. Content should reflow into a single column with no horizontal scrolling for body text.

Test by zooming to 400% in your browser and verifying:

• No content is clipped or hidden.
• No horizontal scrolling is required for text content (horizontal scrolling for data tables and images is acceptable when presented in a scrollable container).
• All interactive elements remain reachable and usable.

Do Not Rely on Fixed Positioning at Scale

Sticky headers, fixed toolbars, and persistent footers consume proportionally more viewport space at high zoom. A 60px-tall sticky header at 400% zoom occupies a quarter of the visible area. Consider:

• Making sticky elements collapse or minimize at narrow viewports.
• Ensuring fixed elements do not obscure focused content (WCAG SC 2.4.11).

Support Custom Colors

Windows High Contrast Mode strips your CSS colors and applies system colors. Test your site in High Contrast Mode:

• Are interactive elements still visually distinguishable?
• Do focus indicators remain visible?
• Is text still readable?

Use the forced-colors media query to adjust styles specifically for High Contrast Mode:

@media (forced-colors: active) {
  .button {
    border: 2px solid ButtonText;
  }
}

Provide Scalable Text Controls

Beyond browser zoom, consider offering built-in text size controls. Some low-vision users prefer scaling text independently of images and layout. Use relative units (rem, em) exclusively for font sizes so that both browser zoom and OS font-size preferences take effect.

Cursor and Focus Enhancement

• Focus indicators must be large and high-contrast. The WCAG 2.2 focus appearance criteria (SC 2.4.13) specify a minimum size and 3:1 contrast ratio. See keyboard navigation for implementation.
• Hover states should use visible changes (underline, color shift, border) rather than subtle opacity adjustments that are invisible to low-vision users.
• Tooltips and popovers must remain visible while the user moves the mouse toward them (WCAG SC 1.4.13) and must be dismissible with Escape.

Minimize Reliance on Spatial Relationships

At high magnification, users cannot see the relationship between a label and its associated input if they are far apart. Keep labels adjacent to their fields — preferably above the field (not to the left), so label and input remain visible together when zoomed. Form design covers this in detail.

Color and Contrast

Ensure all color contrast ratios meet WCAG AA at minimum. For low-vision users, AAA ratios (7:1 for normal text) provide meaningful additional benefit. Avoid relying on color alone for meaning — pair with text, icons, or patterns.

Key Takeaways

• Most low-vision users use magnification and custom colors, not screen readers.
• Support 400% zoom with responsive reflow and no horizontal text scrolling.
• Test in Windows High Contrast Mode and with the forced-colors media query.
• Keep labels close to their associated controls — spatial separation breaks at high magnification.
• Fixed/sticky elements consume disproportionate viewport space at high zoom; minimize or collapse them.

Next Steps

• Verify color contrast meets AAA for maximum low-vision readability.
• Ensure responsive design handles the 400% zoom requirement.
• Apply typography best practices for readability across vision levels.

Sources

• WCAG 2.2 SC 1.4.10 Reflow — The 400% zoom reflow requirement critical for low-vision users.
• W3C WAI: How People with Disabilities Use the Web — Visual — Descriptions of low-vision user needs and tools.
• WebAIM: Visual Disabilities — Guide to designing for visual impairments.
• MDN Web Docs: forced-colors Media Query — Technical reference for High Contrast Mode support.

Low-vision prevalence data from the World Health Organization. WCAG requirements from Success Criteria 1.4.3, 1.4.4, 1.4.10-1.4.13, and 2.4.11. High Contrast Mode guidance from Microsoft and W3C WAI.