Many people experience reduced vision at some point in their lives. This might be temporary, gradual, or permanent. It can affect how clearly someone sees text, images, and user interface elements on screens.
Reduced vision covers a wide range of conditions, including:
- Lens disorders such as cataracts
- Retinal disorders such as diabetic retinopathy
- Optic nerve disorders such as glaucoma
- Corneal disorders such as keratoconus
- Refractive and developmental disorders such as astigmatism
Each condition affects sight in different ways. Some may reduce clarity or sharpness, others may affect focus, contrast, colour perception, depth, or peripheral vision. These differences shape how a person customises their device.
There is no single way that people with low vision use technology. Instead, people may use a combination of:
- System settings, like display scaling or bold text
- Browser controls, like page zoom or text-only zoom
- Third-party tools, like magnification software or colour filters
- Reading environments, like Reader Mode
Understanding these options is essential for anyone building digital products.
Six categories to consider
The sections below outline six common categories of settings and tools that people with reduced vision might use, and how these can affect their experience.
They are not universal or exhaustive, and people rarely experience all of these effects. They are patterns I have observed over many years of user testing that show what can happen when interfaces don’t adapt.
1. System-level magnification
Examples:
- Windows Magnifier
- macOS Zoom
- GNOME or KDE screen magnifiers (Linux)
Possible environments:
- Operating system interface
- Native apps
- Websites and web-based apps
Possible effects:
Only a portion of the screen is visible at a time. This is the primary effect of system magnification, shaping how people navigate interfaces. This can mean:
- Horizontal and vertical panning become part of normal navigation.
- Buttons, icons, and links with small hit areas become difficult to target.
- Multi-column layouts and fixed headers take up disproportionate space.
- Hover interactions may be harder to trigger or notice if the pointer is not directly over an element.
- Information placed on the far right side of the screen may sit outside the visible area due to left-to-right tracking of magnification tools.
- Pop-ups, dialogs, and error messages may appear off-screen and require hunting to locate.
- Notifications or toast messages may display outside the magnified region and go unnoticed.
- Auto-focus jumps (e.g. cursor forced into a field) can disorient the view and cause loss of context.
2. System-level font and display scaling
Examples:
- Windows: Display Scaling; Text Size controls.
- macOS: Display Scaling; app-specific text settings.
- Linux: GNOME / KDE desktop scaling; font size controls.
- iOS: Dynamic Type scaling; Display Zoom.
- Android: Font size and Display size; Bold text and High contrast text.
Possible environments:
- Operating system interface
- Native apps (mobile and desktop)
- Minimal or inconsistent effect on websites and web apps, depending on browser and platform
Possible effects:
Text, UI controls, and some images scale up across the system. This is the primary effect of system-level scaling. This can lead to:
- Interfaces that rely on fixed pixel measurements may clip, overlap, or truncate.
- Icons and bitmapped images may become blurry or distorted if they are not available in multiple resolutions.
- Some apps or custom UI frameworks fail to respect scaling and appear too small or unusable.
- Layouts with rigid spacing collapse when text grows beyond design assumptions.
- On mobile, text may wrap or push essential elements off-screen if spacing is inflexible.
- Non-responsive modal dialogs may scale beyond the viewport and hide close buttons or controls.
- Tooltip or help icon text may become clipped or unreadable when containers do not resize.
- Placeholder text may truncate, becoming illegible or changing meaning.
3. Browser page zoom
Examples:
- Zoom settings (Ctrl or Command + “+”) in Chrome, Firefox, Safari, Edge
- Browser settings panel zoom controls
Possible environments:
- Websites
- Web-based applications
- Browser chrome (menus, toolbars) usually unaffected
Possible effects:
The whole page zooms, including text, images, and layout containers. This changes how the interface fits within the viewport, which can lead to:
- Fixed-width layouts or pixel-perfect designs can cause horizontal scrolling.
- Breakpoints may shift or behave differently than intended at different zoom levels.
- Raster images and icons may appear fuzzy if not provided in multiple sizes.
- Dialogs and overlays may open partially or fully off-screen when positioned with fixed coordinates.
- Sticky headers, footers, or fixed nav bars may cover essential page content at high zoom levels.
- Touch targets may appear smaller relative to content, making activation unpredictable.
4. Browser text-only zoom
Examples:
- Firefox: Zoom text only
- Safari: Minimum font size settings
- Chrome or Edge: Extensions for text resizing
Possible environments:
- Websites
- Web-based applications
Possible effects:
Only text increases in size, leaving layout containers unchanged. This can result in:
- Text may overlap other elements if spacing is not flexible.
- Text expansion may push buttons below the fold, hiding primary actions until scrolled.
- Navigation menus can wrap or overflow unexpectedly.
- Form labels may wrap in ways that reduce clarity or hide controls.
- Required field indicators (e.g. asterisk) may move away from labels or detach from form fields.
5. Third-party screen magnifiers
Examples:
- ZoomText Magnifier
- SuperNova Magnifier
- Virtual Magnifying Glass
Possible environments:
- Operating system interface
- Native apps
- Websites and web-based apps
Possible effects:
Only a portion of the screen is visible at a time. Third-party magnifiers behave similarly to system magnification but often add more advanced controls. This can lead to:
- Right-aligned labels, icons, or calls to action may sit outside the visible area due to left-weighted scanning behaviour.
- Horizontal and vertical panning become part of normal navigation.
- Hover interactions may be harder to trigger or notice if the pointer is not directly over an element.
- Information placed on the far right side of the screen may sit outside the visible area due to left-to-right tracking of magnification tools.
- Pop-ups, dialogs, and error messages may appear off-screen and require hunting to locate.
- Notifications or toast messages may display outside the magnified region and go unnoticed.
- Auto-focus jumps (e.g. cursor forced into a field) can disorient the view and cause loss of context.
6. System and browser colour and contrast settings
Examples:
- Windows High Contrast Mode and Contrast Themes
- macOS Increase Contrast, Reduce Transparency
- iOS and Android: Colour filters, Smart Invert
- Browsers using forced colours mode or reader contrast options
Possible environments:
- Operating system interface
- Native apps
- Websites and web-based apps
Possible effects:
- Background images used for legibility may disappear.
- Icons and text with low contrast become invisible.
- Colour-based meaning can be lost (e.g. green for success, red for error).
- Interfaces that rely on subtle borders or shadows may lose structure.
- Soft or low-contrast focus indicators disappear, making keyboard navigation feel non-functional.
Design considerations
Designers should keep in mind that people may view digital products with increased magnification, larger fonts, zoomed layouts, different contrast settings, or any combination of these.
These adjustments are not unusual or edge cases. They are everyday ways that people with reduced vision interact with technology.
Products work best when they continue to function even if:
- text is larger than expected
- layouts reflow or wrap
- magnification reduces the visible area
- colours and backgrounds are replaced
- buttons and labels take up more space than planned
This means designing interfaces that:
- scale without clipping or overlapping
- keep related information close together
- avoid relying on right alignment for essential actions
- use real text instead of images of text
- allow layouts to grow and breathe when content increases
Conclusion
Designing for these adjustments is not about catering to edge cases. It is about building products that continue to work when people change zoom, text size, or colour settings, so fewer people experience barriers.