Resize text and make sure everything on the page works. Repeat until you get to 200% zoom. Seems simple? It is.

Essential abilities

If you know of a method that doesn’t require either of these abilities, please update this Quick Test.

Background

People with low vision may need to increase the size of text in order to use the page.

When someone resizes text, any of the following can break the page:

The importance is that relative length units (em, rem, %, vw) are used for text.

How to test

Testing is pretty straight forward.

  1. Initial test in multiple browsers
  2. Resize text
  3. Confirm relative font usage
  4. Choose a browser to do further testing in
  5. Resize text
  6. Check everything

Choosing a browser

Testing text-resize needs initial testing in multiple browsers to confirm that relative units are used correctly in order to conform with WCAG Resize Text (Success Criterion 1.4.4).

Testing text-resizing can fail in Chrome but pass in Firefox since text-zoom in Firefox resizes regardless of usage of relative units. Suggested setup is to use Chrome and Firefox in initial testing.

Firefox is an easy browser for testing further:

Safari and Chrome work, but not as well:

Edge won’t work:

Resizing text in Firefox

  1. Go to View > Zoom and select Zoom Text Only
  2. Zoom to 200%
    • Ctrl + +
    • Ctrl + Scroll Up

Resizing text in Chrome

  1. Copy chrome://settings/fonts to the address bar and then return on your keyboard
  2. Increase the font size to 32px (default is 16px)

Checking everything

After doubling the size of text, verify the following:

Thorough check

Some people might not need to zoom text up to 200%. And there might be a level of zoom below 200% where content doesn’t work.

To do a more thorough job, you should check the page at each of the zoom steps the browser makes to see if there are any odd breakpoints.

Exceptions

Can I zoom everything instead of resizing text only?

Without going too deep into the Success Criterion, it does not require you to use text-only zoom. But I think it’s still a good idea to make sure that pages work well with text-only zoom since some people may want only the text to be bigger.

Practically speaking, I don’t think many people know that text-only resizing is available. And that’s assuming they’re using a browser that supports it. I’d expect most folks that want larger text would use regular browser zooming more often than text-only zooming.

There is even a Success Technique (G142) that says you can pass the Success Criterion by zooming everything.

Edit on GitHub