Skip to content

Many people with low vision read the web enlarged. They use a screen magnifier, the browser's zoom, bigger text settings, or high contrast colors. They see part of the page at a time, so anything that breaks when it grows, or happens outside that part, gets missed.

Roll a sheet of paper into a tube and read this page through it. That's close to using a screen magnifier at high power. You see a small window of the page and move it around to read, and you lose the big picture.

Others zoom the whole page in the browser, set their phone to large text, or switch on high contrast colors so text stands out from the background. Many combine them, and some pair a magnifier with a screen reader to rest their eyes on long passages.

Building for zoom helps a lot of other people too, like anyone reading a phone in bright sun or without their glasses.

Common tools

ZoomText and Fusion
Windows. Paid magnifiers; Fusion adds the JAWS screen reader.
Magnifier
Built into Windows.
Zoom
Built into Mac, iPhone, and iPad.
Magnification
Built into Android.
Browser zoom
Every desktop browser, with Control or Command and plus. Phones use pinch zoom or a text size setting.
Contrast themes
Built into Windows. Replaces a site's colors with high contrast ones.

Most of these are small changes in the code. Where WCAG covers one, we link the success criteria it falls under.

  1. Layouts that break when zoomed

    At 200% or 400% zoom, text overlaps, gets cut off inside fixed-height boxes, or runs off the side so every line needs a scroll left and right. Some mobile sites block pinch zoom entirely.

    The fix

    Build layouts that reflow into one column instead of overflowing. Content should work at 320 CSS pixels wide, what 400% zoom leaves in a 1280-pixel-wide window, without scrolling sideways. Size text in rem, avoid fixed heights on anything that holds text, and never turn off zoom in the viewport tag.

    Before
    <meta name="viewport" content="width=device-width,
  initial-scale=1, maximum-scale=1, user-scalable=no">
    After
    <meta name="viewport"
  content="width=device-width, initial-scale=1">

  2. Text and controls that fade into the background

    Light gray text on white, thin fonts, and pale placeholder text are hard to read with typical vision. With low vision, they disappear. So do field borders and icons that are barely darker than the page.

    Try WebAIM's contrast checker

    The fix

    Text needs a contrast ratio of at least 4.5 to 1 against its background. Large text, about 24px or 19px bold, needs 3 to 1. Field borders that show where a field is, icons that carry meaning, and focus indicators need 3 to 1. A contrast checker will tell you in seconds.

  3. Messages that appear out of view

    Someone zoomed in on a Submit button presses it. The error appears at the top of the form, or a confirmation slides in at the corner of the screen. It's outside their window, so as far as they can tell, nothing happened.

    The fix

    Put feedback next to whatever caused it, like each error right under its field. For bigger messages, move keyboard focus to them. Most magnifiers can follow focus, so the message comes into view.

    WCAG doesn't name this one, but it stops real people all the same.

  4. Tooltips and menus that vanish or get in the way

    A menu opens on hover. When the magnified view pans to read it, the pointer slips off the trigger and the menu closes. Other pop-ups cover what someone was reading, and the only way to dismiss them is to move away.

    The fix

    Keep hover content open while the pointer is over it, let Escape close it without moving the mouse, and show it on keyboard focus too. Menus that open on click are easier for most people.

  5. Text baked into images

    Banners, buttons, and infographics with words in the image itself turn blurry and blocky when magnified. They don't change with larger text settings or high contrast colors either.

    The fix

    Use real text, styled with CSS, and layer it over an image when you need the look. Logos and brand names are the exception.

  6. High contrast mode that wipes out controls

    Windows contrast themes swap a site's colors for a small set of high contrast ones. Buttons styled only with a background color lose their edges, icons drawn as background images keep their old colors and can vanish against the new background, and focus styles built with box-shadow disappear.

    The fix

    Give buttons and inputs a border, even a transparent one, since contrast themes make it visible. Draw icons as inline SVG using currentColor and use outline for focus styles. Then turn on a contrast theme, or emulate one in Chrome or Edge DevTools, and fix anything left with the forced-colors media query.

    Example
    .button {
  /* Shows up in contrast themes */
  border: 2px solid transparent;
}
:focus-visible {
  /* box-shadow is removed; outline isn't */
  outline: 2px solid;
}

    WCAG doesn't name this one, but it stops real people all the same.

No special software needed. Your browser, your operating system, and a free contrast checker cover all of it.

  • Zoom

    Set your browser window about 1280 pixels wide. Press Control or Command and the plus key until it reads 200%, then 400%. Use Chrome, Edge, or Firefox for this, since Safari stops at 300%. Does everything still fit, with no sideways scrolling? Do menus, forms, and pop-ups still work?

  • Magnify

    On a Mac, go to System Settings, then Accessibility, then Zoom. Turn on keyboard shortcuts and press Option, Command, and 8. On Windows, press the Windows key and plus to start Magnifier. Fill out a form and watch for each error.

  • High contrast

    On Windows, choose a contrast theme in Settings, under Accessibility, or press left Alt, left Shift, and Print Screen. On a Mac, emulate forced colors in Chrome or Edge DevTools, under Rendering. Can you still see every button, field, icon, and focus outline?

  • Contrast

    Run your text and button colors through a contrast checker. Light gray text is the usual suspect.

We're collecting stories from people who use assistive tech every day. Yours can help the people who build websites and apps see what gets in the way.

Share your story

To know the road ahead, ask those coming back. We test with the same tools your users do.

No prep, no formal brief. A few sentences is plenty. Let us know what you're building and we'll take it from there. We typically respond within one business day.