Success Criterion 1.4.4 (Level AA)
Can users resize text up to 200% without the use of assistive technology and not affect content and functionality?
Why is this important
Users with visual impairments who do not use assistive technology may need to resize text in order to read it. Users should be able to increase the text size up to 200% of the original size and have the page maintain its readability and functionality.
Whom does it benefit?
As a older adult with declining vision,
I want to increase text size to 150%
so that I can read without straining my eyes.
As a person with low vision,
I want to zoom in with my browser and have the text automatically adjust to fit the window,
so that I can read text without having to scroll horizontally.
As a person using a small screen device
I want content to resize correctly
so that I can access the information without loss of quality or functionality.
What should you do?
- The level of browser zoom supported must be a minimum of 200% or higher depending on your product style guidelines.
- Ensure that content reflows and functionality is maintained when browser zoom is used in accordance with style guide requirements.
Note: This requirement does not apply to captions and images of text (avoid using images of text whenever possible - refer to Success Criterion 1.4.5)
How do you do it?
- Modern browsers have built-in zoom tools for enlarging text. Create content using proper HTML and CCS code to ensure content is compatible with browser zoom.
- Use relative font sizes, such as, em units or percentages (%) to delineate size, instead of absolute font sizes, such as pixels (px), points (pt), or centimeters (cm). Relative measures allow the text on the page to resize and scale as the user changes the font size within the browser zoom tool.
- Use responsive design techniques (e.g. add viewport to metadata; use media queries, etc.)
- If the product does not respond to browser zoom or similar functionality because of specific requirements, provide controls that allow users to incrementally change the size of all text on the page up to 200% or higher.
Need technical guidance?
Additional Resources to help you:
Font Resizing Guidance
Understanding WCAG 2.0: 1.4.4
Magnification of Web Pages
CSS Web Safe Font Combinations
1.4.4 – Resize Text (Level AA)