Low Vision Design

Supporting users with reduced sight through scalable text, contrast, and flexible layouts.

stellae.design

Accessibility

Low vision design addresses the needs of people with visual acuity between 20/70 and 20/200 (or limited visual field), who have usable but significantly impaired sight. Low vision is far more common than total blindness. Users may employ screen magnification (ZoomText, built-in OS zoom), browser zoom, custom stylesheets, high-contrast modes, or large font settings. WCAG 2.1 SC 1.4.4 (Resize Text, Level AA) requires text to be resizable to 200%, SC 1.4.10 (Reflow, Level AA) requires content to work at 400% zoom without horizontal scrolling, and SC 1.4.3/1.4.6 (Contrast) require minimum contrast ratios of 4.5:1 (AA) or 7:1 (AAA).

Why It Matters

Low vision affects over 250 million people globally and encompasses a wide spectrum — from moderate visual impairment to near-total vision loss — that standard eyeglasses or contacts cannot fully correct. Users with low vision often rely on screen magnification, high-contrast settings, and customizable text sizes, meaning rigid layouts and fixed typography actively exclude them. Designing for low vision overlaps heavily with designing for aging populations, making it one of the highest-impact accessibility investments a team can make.

Real-World Examples

iOS Dynamic Type System

Apple's Dynamic Type allows users to set their preferred text size system-wide, and apps that adopt the system automatically scale all typography to match. Developers use predefined text styles that respond to user preferences, ensuring consistent readability without per-app configuration. This system-level approach means low-vision users configure their preference once and benefit across every compliant app.

BBC's Accessibility Settings Panel

The BBC website provides an accessibility panel allowing users to adjust text size, line spacing, and color contrast directly on the site. These controls persist across sessions and pages, giving low-vision users a customized reading experience without requiring browser extensions. The implementation respects user autonomy by making adjustment controls discoverable and non-intrusive.

Counter-example

Fixed-Width Layout That Breaks at 200% Zoom

A government services portal uses fixed pixel widths and absolute positioning throughout its layout, causing content to overlap and disappear when users zoom to 200%. Critical form fields become inaccessible and important instructions scroll off-screen horizontally with no way to view them. Low-vision users who rely on magnification are effectively locked out of essential public services.

Role-Specific Guidance

Common Mistakes

• The most prevalent mistake is confusing low vision with blindness and assuming screen readers handle everything — most low-vision users rely on magnification and visual customization, not screen readers. Teams frequently hard-code font sizes in pixels and test only at 100% zoom, missing the breakage that occurs at the 200% zoom level required by WCAG. Another common error is using low-contrast placeholder text in form fields and light gray text for secondary content, both of which become invisible to users with reduced contrast sensitivity.