1.4.4 – Resize Text (Level AA)

posted in Intermediate (Level AA) on by

Text can be resized to 200% without loss of content or function

Some of your users with visual impairments will need to resize text in order to understand it fully. You should allow for up to a 200% resize of text without dropping any content or functions.

What to do

As all modern browsers allow for resizing text, a website based on good HTML and CSS should comply.

If your website doesn’t resize correctly to at least 200% in a browser, add a feature that enables users to resize text (by CSS) based on three or four predetermined options, including 200%.

Tips

  • Resizing text is different to zooming (which enlarges text, images and layout without preserving formatting).
  • Check your website by resizing to 200% in a variety of browsers.
  • Make sure your resized text doesn’t require the user to scroll horizontally and you fulfil part of Guideline 1.4.8.

Exceptions

  • Images of text (but don’t use images of text, because they don’t resize well).
  • Captions.

See also

Free Developer Resources

Join over 2,000 accessibility fans and get free developer resources like WCAG 2.0 Checklists and a sample from my book.

Powered by ConvertKit

Over 250 people just like you have learned more about WCAG 2.0 with my guidebook.

Learn more >

  • There are three main potential issues to avoid when doing this:

    1) Resized text overlapping other text making it difficult to read
    2) Resized text being partly or completely obscured by borders/boxes that don’t expand with the text
    3) Resized text straying outside its intended area – the resulting combination of text/background colour may not have sufficient contrast.