WCAG - 1.4.4 Resize Text (Level AA)

1.4.4 Resize Text (AA): Except for captions and images of text, text can be resized without assistive technology up to 200 percent without loss of content or functionality. (Level AA)

Requirements

When the whole page, or its text content only, is enlarged, all information and functionality should remain available.
Ensure that the content and layout of the page responds to users changing the Operating System’s or Web Browser’s default font size.
Ensure that pinch to “zoom” is supported on web pages.

Why is it important?

This ensures that partially sighted people can comfortably read content and see the interface well. Some Operating Systems allow users to zoom on a portion of the screen. But using that alone offers a very poor user experience, and modern website and apps are expected to support text resizing and dynamic layout.

Benefitted Disability Types

All users benefit when they can adapt the size of content to see and read it. This may be a constant or temporary adaption due, for example, to screen size, screen glare, or vision impairment. About a third of iOS users change the default text size.
People with reduced vision rely on font and layout resizing to use websites and apps.

Summary

Make sure it is possible to complete all tasks when text is resized up to 200%.
It must be possible to increase the size of text to 200%, without losing access to any content or functionality.

Common Mistakes

When resizing visually rendered text up to 200 percent causes the text, image or controls to be clipped, truncated or obscured
When text-based form controls do not resize when visually rendered text is resized up to 200%
Setting an element’s size in px, rather than using relative size units.

Design Guide

Resize Text Example for IOS

Since iOS 11, the system provides an easy way to obtain a scaled font:

// Obtaining a font for the current scale from the system
let bodyFont = UIFont(name: "YourFontName", size: 17) // The default font you'd use for your UI's body content
let scaledBodyFont = UIFontMetrics.default.scaledFont(for: bodyFont)

// Setting the font on a label that will automatically scale and reflow the layout
label.adjustsFontForContentSizeCategory = true
label.numberOfLines = 0
label.font = scaledBodyFont

Note: UIFontMetrics will scale custom and system fonts for you.

Note: UIFontMetrics can also be created with a text style for more nuanced font scaling:

// Scaling a header font from a `.headline` UIFontMetrics instance indicates to the system it doesn't need to scale it as much as it would for `.body` fonts.
UIFontMetrics(forTextStyle: .headline).scaledFont(for: headerFont)

If necessary, you can also observe changes to the user’s system setting and reflow your layout:

override func traitCollectionDidChange(_ previousTraitCollection: UITraitCollection?) {
    super.traitCollectionDidChange(previousTraitCollection)
    if traitCollection.preferredContentSizeCategory >= .accessibilityLarge {
        stackView.axis = .vertical
    } else {
        stackView.axis = .horiztonal
    }
}

Resize Text Example for Android

To ensure that the system will scale your font when the user changes configuration make sure that your font size is defined in sp (scale-independent pixel).

Alternatively you can respond to configuration changes by overriding onConfigurationChanged to get the new font scale

override fun onConfigurationChanged(newConfig: Configuration) {
    super.onConfigurationChanged(newConfig)
    newConfig.fontScale // Update text size based on fontScale
}

If you require some texts to have a fixed size, you can use dp instead.
Use with caution and under very special circumstances, as this will prevent the user from scaling the text with their font configuration.

Resize Text Example for Flutter

Text scaling is supported with every version of Flutter and text will scale based on the devices settings.

Additional things to consider when designing your app is to account for any height or width changes that might happen due to increase of size.

Make sure that your screen/widget is scrollable.

You can use widgets like SingleChildScrollView() to wrap your ui to make it scrollable. Widgets like ListView.builder are scrollable by default.

SingleChildScrollView(
      child: // the rest of your ui here
)

Scrolling direction is also locked to a default direction but can have this toggled.

scrollDirection: Axis.enum, // defaults to Axis.vertical

Make sure text containers can increase in size when text gets bigger

Do not set a fixed height and width for a widget containing text.

// DO
SingleChildScrollView(
    child: // wrap your screen ui with this
    );

// DON'T
Container(
    height: 40,
    width: 40,
    child: Text('Some long text here')
)

Resize Text Example for Web

Using relative size units to support font resizing

Support font resizing by using relative size units (such as rem and em, rather than px).
Use relatize size units to size elements on the page to ensure that the page content and layout gracefully adjust to users’ changing the Operating System or Web Browser’s default font size. Content and functionality shoudn’t become unavailable or cut-off.

Ensuring the viewport meta tag is set to permit “pinch-to-zoom” scaling on touch screens

Example

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

Failure example

<!-- Don't do this -->
<meta name="viewport" content="user-scalable=no" />

<!-- Don't do this -->
<meta
  name="viewport"
  content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=1;"
/>

HolisticA11Y

WCAG – 1.4.4 Resize Text (Level AA)