When web designers start thinking about accessibility, they often focus on design decisions that have an obvious impact on users with disabilities. However, it’s equally important to give users control over their own experiences — including the way that text is presented.
You should choose an accessible typeface for your website’s default presentation.
But it’s also important to allow your users to control the size of the typeface, if needed. The Web Content Accessibility Guidelines (WCAG) addresses this in Success Criterion (SC) 1.4.4., “Resize Text:”
Except for captions and images of text, text can be resized without assistive technology up to 200 percent without loss of content or functionality.
This doesn’t mean that you need to provide separate controls for adjusting font and font size. Your users already have technologies for making those changes: They can use their web browser to “zoom in" (magnify) your content.
Many users scale text to make it more readable
User agents (such as browsers) must allow users to scale text to satisfy the W3C’s User Agent Accessibility Guidelines (UAAG). This is an important feature for a wide range of users: People with low vision may scale text to 200% to make it readable. People who are using small screens might zoom in by 10% or so, just to make the text slightly more legible.
As a web designer, you have a responsibility to allow your users to make those adjustments. In other words: Do not override user preferences, either through CSS or other methods.
To make your text readable (and therefore accessible to most users), follow these tips:
1. Don’t use absolute font sizes.
Absolute values such as can restrict users' control over certain elements. Content may not display correctly across different platforms, especially when users magnify their screens.
Relative font sizes allow you to maintain the size of your typeface relative to other elements. In practice, this means using units like em over absolute values like in (inches) or pt (points of an inch).
Related: Text Spacing and Accessibility: Tips for Web Designers
2. Choose a font and font size that will work for a majority of users
WCAG doesn’t establish a minimum font size or recommend a specific typeface. However, for optimal readability, text should follow a few general best practices:
- Body text should be at least 12 points (pt), or around 16 pixels (px).
- No text should be smaller than 9pt (12 px).
- Wherever possible, use a widely available, sans serif typeface. Examples include Times New Roman, Verdana, Arial, Tahoma, Helvetica, and Calibri.
When you follow these best practices, your content will be readable on a wide variety of screens and devices. For additional help, read: Best Fonts To Use for Website Accessibility.
3. Make sure your text follows WCAG’s rules for color contrast.
All text (and images of text) must maintain appropriate contrast with its background. Even if users can scale the size of text, it may be unreadable due to contrast issues — users may have color vision deficiencies (CVD, also called color blindness), or they might access your website in bright natural light. Appropriate color contrast ensures that text remains readable for most users.
WCAG SC 1.4.3, “Contrast (Minimum),” requires a contrast ratio of at least 4.5:1 for normal text and at least 3:1 for large-scale text. Read more about the importance of color contrast.
When building your content, check color-pairs carefully. The Bureau of Internet Accessibility provides the free a11y® Color Contrast Accessibility Validator for testing content against WCAG standards.
4. Test your content by scaling it to 200%
One of the simplest ways to test your content for accessibility is to zoom your internet browser to 200%. For most browsers, you’ll simply need to hold the Ctrl key, then tap + until the window has scaled to 200%.
As you view your site, ask questions:
- Do I need to scroll in two directions to read all of the content?
- Does the text on each webpage scale relative to the other elements?
- Does any of the content overlap or disappear?
- Does everything appear in an order that makes sense?
This simple test can help you find a number of crucial accessibility barriers. For additional guidance, read: Give Yourself an Accessibility Test: Zoom Your Page to 200%.
To learn more ways to design web content for users with disabilities, download our free eBook, The Ultimate Guide to Web Accessibility. Or, if you’re ready to see how your content stacks up against WCAG, get started with a free automated accessibility analysis.
