Did a “Text Too Small” warning appear in an Accessibility Checker audit of one of your WordPress posts or pages? Read on below for an explanation of this error, how it impacts your website’s accessibility, and how to fix it.
About the Text Too Small Warning
What qualifies as text that is too small?
There is no official minimum font size in the WCAG guidelines, however, it is important that your font size be large enough for most people to read comfortably. Variations in font types and styles can impact the readability of fonts at a variety of sizes, but most guidelines tend to site 16px as a good starting point for body font sizing with headings typically at a larger size and/or heavier weight.
For the purposes of this warning, we consider “small text” to be any text that is 10 pixels or smaller, however you may find that with some fonts even 12 or 14px seems to small and hard to read.
What does the Text Too Small warning mean?
This warning occurs when there is text on your website that is less than 10px in size. The warning will flag as an indication that you may want to rethink the font size and make it larger so that it can be more easily read without a user needing zoom in on their browser.
How does Accessibility Checker test for text size?
While auditing your page or post content, Accessibility Checker will look for font-size styles within style tags (<style></style>), within your CSS files, and in-lined in your page or post HTML. If a font style is present that is 10px or smaller a Text Too Small warning will be flagged
Impact on Accessibility
Why is text size important?
It goes without saying that if the font size is too small your text will be hard to read, and if text is hard to read it can cause your website to lose visitors or for them to miss out on important information due to its size.
It can be tempting to make footer text small or “fine print” text small and hidden; it’s not necessarily bad to make this text smaller than your regular body font size, however, it’s important not make it so small that it cannot be read by a person with average eye-sight.
Besides being good for user experience, in certain instances, there are legally required minimum font sizes that businesses and organizations need to be aware of when it comes to disclaimer text. Failing to meet these minimum font-size requirements, while not a WCAG or Americans with Disabilities Act (ADA) violation, can still land your organization in legal trouble.
For example, in the United States, there are minimum font size requirements for political advertisement disclaimers (PDF), minimum font sizes for disclaimers on food products, and the Federal Trade Commission (FTC) states that all disclaimers and disclosures on advertisements for a variety of businesses must be “clear and conspicuous”. The FTC states a disclosure is clear and conspicuous if “consumers notice it, read it, and understand it.” The agency intentionally does not provide a minimum font size, but we consider it safe to say that 8px, 9px, or even 10px on the web is definitely not clear and conspicuous.
If your business, nonprofit, or government agency needs to provide disclaimers, disclosures, or any sort of safety information that is overseen by a government agency we highly recommend consulting with that agency or your attorney to make sure you’re meeting your legal requirements for font size.
Text must be scalable to 200%
Regardless of what font sizes you choose to use on your website, there is a WCAG success criterion related to scalability. Many people with low vision, including the elderly frequently use the zoom feature built into their browser to view websites magnified 150%, 200%, or possibly more. It is important to make sure that the text on your website can be resized up to 200% of it’s original size and still be readable and without any loss of functionality.
Relevant WCAG 2.1 Success Criteria
1. Perceivable
Information and user interface components must be presentable to users in ways they can perceive.
1.4.4 Resize text – Level 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.
1.4.8 Visual Presentation – Level AAA
For the visual presentation of blocks of text, a mechanism is available to achieve the following: […] text can be resized without assistive technology up to 200 percent in a way that does not require the user to scroll horizontally to read a line of text on a full-screen window.
How to Resolve a Text Too Small Warning
What to do (in short)
To fix text that is too small, you will need to ensure that all text elements on your website are at least 10 points. It may be larger, but keep in mind that text that is 20 points or bigger, or 16 points or bigger and bold and/or italicized may be flagged as a possible heading.
How to make “the fine print” accessible
First, install the free Accessibility Checker WordPress plugin.
For products and services that require disclaimers, warnings, and other legal terminology, consider creating a separate webpage that features the required language compete with accessible-compliant and SEO friendly headings and text that is 10 points or larger. The new page can then be linked to via the website’s navigation structure, individual pages, and will appear on the site map.
How to make academic citations accessible
For academic and research-focused websites, pages, and articles, proper citations, references, footnotes, endnotes, and bibliographies are essential and important to visitors. While printed versions of research articles frequently use text that is two points smaller than body text for citations, when publishing online, ensuring that all text is of an accessible size makes for a better user experience. Citations of all kinds can be linked to a master list using anchor links that are placed at the end of the article or document.
How to make image captions accessible
Using a smaller font size for captions that correspond with a photograph, image, chart, graph, or illustration, is another outdated style convention once used in printed materials. To make the page as accessible and user-friendly, keep all captions the same size as the body text, and no smaller than 10 points. Captions should be brief and accurately describe the visual element they are associated with.
