Low Vision

Low vision refers to significant visual impairment that cannot be fully corrected with glasses or contacts, but is not total blindness. Users with low vision may rely on screen magnification, larger text sizes, high-contrast modes, or custom stylesheets. Content designed for low vision must remain usable when the visual presentation changes significantly.

Common failures for low vision users

• Low contrast between text and background (see the Color Contrast guide)
• Fixed-size text specified in pixels that cannot be resized by the browser
• Content that breaks or overflows when the browser is zoomed to 200%
• Text placed over busy or patterned backgrounds
• Layouts that prevent users from applying their own high-contrast stylesheets

Use relative font sizes

Specifying font sizes in px can prevent browser text size settings from working correctly. Use relative units instead:

/* Avoid: fixed px sizes that may not respect user settings */
body { font-size: 14px; }

/* Prefer: relative units that respect user preferences */
body  { font-size: 1rem; }
p     { font-size: 1.125rem; }
small { font-size: 0.875rem; }

Design for 200% zoom

WCAG requires that content remains accessible when zoomed to 400% (WCAG 1.4.10 Reflow), with no horizontal scrolling required on a 320px-wide viewport. At minimum, design for 200% zoom without content loss:

• Use flexible layouts (flexbox, grid) rather than fixed-width containers where possible
• Avoid horizontally scrolling content at normal sizes - it becomes unmanageable when zoomed
• Test by literally zooming your browser to 200% and scrolling through every page

Avoid text on busy backgrounds

Patterned, photographic, or gradient backgrounds make text significantly harder to read for low-vision users. Ensure text sits on a solid or near-solid background color:

/* Readable: solid background behind text */
.hero-text {
  background-color: rgba(0, 0, 0, 0.75);
  color: #ffffff;
  padding: 1rem;
}

Support high-contrast mode

Windows High Contrast Mode and macOS Increase Contrast override your site's colors with high-contrast system colors. Avoid CSS patterns that fight user style overrides:

• Don't use !important excessively on color properties
• Use the forced-colors media query to gracefully adapt when high contrast is active
• Don't rely solely on CSS background colors to convey meaning - if high contrast strips the color, the meaning should still be communicated another way

Why it matters

Low vision is among the most common disabilities affecting web users. Unlike blindness (which screen readers address), low vision often requires visual access - the user wants to see the content, just adapted to their needs. Flexible, scalable, high-contrast design is the answer.

WCAG criteria