Skip to content

1.4.4

Jump to bottom
Anika Henke edited this page Jun 16, 2022 · 9 revisions

1.4.4 Resize text

WCAG says:

Except for captions and images of text, text can be resized without assistive technology up to 200 percent without loss of content or functionality.

When this is applicable

When there is text.

Check zooming in and resizing text

Use browser zoom:

  • resize the window to 1280x1024 by using the Web Developer extension and go to 'Resize > 1280x1024' (use 'Edit Resize Dimensions' to set it up the first time)
  • zoom in to 200%
  • reload the page

Check:

  • all text is bigger (it does not need to be exactly 200%)
  • text inside form fields is bigger - write text into any empty fields
  • all text is still visible and readable without overlapping or cutting off - if something is cut off or overlapping by a few pixels but is still readable, it's fine
  • there is no loss of content - that does not just mean the content is gone, it can also mean the text is very difficult or impossible to read, for example when white text on a dark background is overlapping onto a white background
  • there is no loss of functionality - if the functionality looks different or behaves differently that's fine as long as the same things can be achieved

If any of those checks fail with browser zoom, check again with text resizing:

  • ensure that the page is zoomed to 100%
  • increase the font size to 200% (having set 'Zoom Text only' in Firefox)
  • reload the page

If neither browser zoom nor text resizing passes these checks, but the website has a resizing widget, use the widget to increase the text to 200% and run the checks again. Also check that text size can be decreased again to its initial size. If it works, it passes as a conforming alternate version.

Exceptions

  • captions
  • images of text - for resizing the text, it's still a fail if the image gets cut off

Other ways to check

Change default text size in Chrome (go to 'Settings > Appearance > Font size') and check text increases and everything is still readable.

Check with OS settings set to big text.

Best practice

  • if a resizing widget is offered by the website, it should be clearly visible at the top
  • the page should still retain its aesthetic appearance when zoomed in or text is resized
  • when text gets bigger, other content should get bigger too, for example, icons

Clone this wiki locally