Check zoom and magnification for web accessibility

• Overview
• Font size
• Zooming
• Text spacing
• Get help

---

Overview

People with low vision may use any of several methods to enlarge content. They may use a screen magnifier such as Windows Magnifier or Mac Zoom, increase the default font size in their browser, zoom their browser, or change the default text spacing on a website. Different strategies for enlarging content behave differently, and you need to verify that important content is not lost if any of them are being used.

Three methods of enlarging content need to be checked because they can affect the website design: font size, zooming, and text spacing.

Font size

Most browsers have a way to change the default minimum font size. How font size changes will differ depending on the browser. Checking font size in more than one browser is recommended.

1. Change the font size:
   • Chrome: Open Settings or Preferences and change the font size to Very large or Very small.
   • Firefox: Open Preferences, select Content in the side menu, and then in the "Fonts & Colors" section, select Advanced. In the pop-up box, change the "Minimum font size" to at least 24 point. Select OK.
   • Safari: Open Preferences. In the pop-up box, select Advanced. Check Never use font sizes smaller than, and in the drop-down box, select 24 point.
   • Edge: Open Settings, and then select Appearance. Under "Fonts", change the font size to Very large.
2. Reload the page.
3. Look for any text that does not change size and any content that is obscured, lost, hidden, or otherwise problematic.
4. Check that all functionality is available. Can each control be reached and activated with a keyboard?
5. Change back to your preferred settings.

Zooming

Zooming changes the size of all content proportionally, including images. Depending on screen size, zooming may trigger the "mobile" or small screen view of the web page. Changing zoom in more than one browser is recommended.

1. Zoom the browser to at least 200%:
   • Mac: Command plus + to increase zoom
   • Windows: Ctrl plus + (or mouse wheel up) to increase zoom
2. Reload the page.
3. Look for any content that is obscured, lost, hidden, or otherwise problematic.
4. Check that all functionality is available. Can each control be reached and activated with a keyboard?
5. Set your browser width to 1280 px and zoom to 400%, and then repeat steps 2 and 3.
6. Reset the browser zoom to 100% or preferred settings:
   • Mac: Command plus 0 to reset to 100%, or Command plus - to reduce the zoom
   • Windows: Ctrl plus 0 to reset to 100%, or Ctrl plus - (or mouse wheel down) to reduce the zoom

View a one minute video demonstration on content resizing using browser zoom.

Text spacing

Text spacing includes line height, letter spacing, word spacing, and paragraph spacing.

The website should have no loss of content or functionality if changed to any of the following:

• Line height to at least 1.5 times the font size
• Spacing following paragraphs to at least 2 times the font size
• Letter spacing to at least 0.12 times the font size
• Word spacing to at least 0.16 times the font size

The easiest and quickest way to check text spacing is by using the text spacing bookmarklet in any browser:

1. Activate the bookmarklet.
2. Look for any text that does not adapt to the new settings and any content that is obscured, lost, hidden, or otherwise problematic.
3. Check that all functionality is available. Can each control be reached and activated with a keyboard?
4. Refresh the page to deactivate the bookmarklet.

Next step: Inspect website code for accessibility
Previous step: Check color contrast on a website
Return to index: Perform an accessibility review on your website

Get help