Font Magnification

Font magnification checks if users can enlarge or zoom in on the text, ensuring it resizes according to the user’s selected font size, up to 200% while maintaining content visibility and functionality. It emphasizes text scalability for readability, particularly for users with visual impairments. Loss of content is assessed separately in text truncation checks.

Success criteria

The rule checks for the following potential violations:

• Text scalability
  Ensure all text can be resized up to 200% without loss of content or functionality.

• Font units
  Ensure the use of relative units for sizing text.
  For example: px (pixels) is used instead of sp (scale-independent pixels), which do not scale with user preferences.

How to fix?

To prevent font magnification violations, ensure the following:

• Ensure that all text containers can resize along with the magnified text. This can be achieved by using relative units for sizing and avoiding fixed dimensions.
• Use the recommended font unit for all text sizes within your app:
  • Android: Use scale-independent pixels (sp).
  • iOS: Use Dynamic Type and custom fonts that support it. This ensures that the font size scales according to the user’s accessibility preferences.
• Implement zoom functionality that allows users to magnify up to 200% without any loss of content or functionality.

Example

The following image provides an example of a violation of the font magnification guideline. In both instances (#11 and #12), the fontUnit is set to “px” (pixels). Pixels are fixed units, meaning they do not scale with the user’s text size preferences. This violation prevents users from adjusting the font size to their needs, potentially making the text illegible or difficult to read for those with visual impairments.

sp is the recommended unit for font sizes on Android as it adjusts to the user’s preferred text size settings, improving accessibility. For iOS, use Dynamic Type and custom fonts that support it to ensure proper text scaling and accessibility. This further emphasizes that using “px” as fontUnit is a deviation from the recommended practice and a guideline violation.

Reference

• Learn more about Resize Text WCAG: 2.1 - 1.4.4 (Level AA) guideline
• Learn more about Resize Text WCAG: 2.2 - 1.4.4 (Level AA) guideline