If you want to optimize your website’s font size, you need to find out, “What is baseline text size for WCAG compliance?”
Optimizing your website’s font size for accessibility involves a couple of steps. Firstly, you need to ensure that the chosen font size meets the international Web accessibility standards. Secondly, you must do your best to craft an overall user experience.
If your website has the right font size, it significantly enhances the user experience for all users, especially those with visual impairments and cognitive disabilities.
This is where you can refer to the Web Content Accessibility Guidelines (WCAG) to make your optimization process easier.
These web accessibility standards pave the way for developers, designers, and website owners to optimize their online stores, blogs, and service pages to increase their accessibility scores.
Along with other aspects, such as design elements, content types, visuals, etc., WCAG also provides a set of rules to optimize font size for accessibility.
In this post, we shall discuss the importance of font size and how one can achieve WCAG compliance by following these guidelines.
Font Size and User Experience
Can you guess the pain of reading a book with a pair of ill-fitting glasses? It’s simply unbearable.
Similarly, a website with too large or too small text can test your patience, causing strain. This, in turn, will result in a bad user experience.
A text that’s relatively larger or smaller than the standard size impacts readability, regardless of the quality of information.
Consider users who may be experiencing conditions like hyperopia, astigmatism, or myopia. A text too large or small can make it difficult for them to absorb the information on your website or navigate your site.
This often results in:
- Poor overall user experience
- Bad SEO performance
- Increased bounce rates
- Reduced conversions
Now, let’s go deeper into the problem by including mobile devices in our discussion. We all are aware that mobile screen sizes vary.
So, considering that websites receive more than 50% of the online traffic from mobile devices, the question. “What is baseline text size for WCAG?” becomes even more critical to address.
For a website to ensure multi-device accessibility, it must offer a responsive design and scalable font size, ensuring every user, including those with disabilities, can access your content using their respective devices.
What is the Baseline Text Size for WCAG?
In reality, it’s quite difficult to set a standard font size — and WCAG doesn’t set a clear standard for it.
Primarily, the ideal font size of websites varies by purpose. Your decision to determine an ideal font size should be based on the way users interact with your content.
But why is it difficult? Online users use websites in different ways. For example, a webpage with visuals, videos, and text may be used differently by users landing on it with different intentions.
A product page, for instance, can be used in the following ways:
- Product purchase
- Getting to know the price or discounts
- See the product and its features
- Learning more about the product via descriptions
- Reading reviews and testimonials
Multiple purposes make defining a universally perfect font size almost impossible. That said, designers typically go with the following baseline sizes:
- 12pt (or 16 pixels): This is the baseline font size for regular body text.
- 18pt (or 24 pixels): This is the minimum size for large texts, such as product titles and page headlines.
Again, these are mere values, not hard-n-fast rules to follow. Your website may require different font sizes or have room for a wider range of font sizes based on the following factors:
- Specific typefaces
- Context of use
- Audience requirements
Therefore, you must always test font size accessibility with different types and sizes of fonts according to your diverse base. For this purpose, you can use tools like Accessibility Spark to assess your website based on WCAG, AIDA, and other recognized international standards.
Remember, every design decision of yours must focus on creating an accessible, inclusive, and intuitive user experience.
The main objective of the font’s usability and accessibility testing is not just about meeting WCAG compliance. It’s more about communicating your content effectively across the entire user base, including people with disabilities.
The Ideal Font Size According to WCAG
WCAG recommends incorporating ‘scalable’ text. In simple words, WCAG suggests website owners should use fonts that users can resize up to 200% with the help of standard browser features. In doing so, users won’t lose any website content or its functionality.
WCAG leaves the decision to set the font size to the website owners, allowing them to set it according to their website preferences.
Website owners, on their part, must test different versions and font sizes, ensuring that the content on the webpage is clear enough for both normal and visually impaired users.
While there is no specific font size, WCAG did mention font sizes in relation to contrast. The contrast ratio for normal and large text is given below:
| Orientation | Size | Contrast |
| Large-scale Text | 18pt (24 pixels) | 3:1 |
| Large-scale Text | 14pt (18.66 pixels) and bold | 3:1 |
| Normal text | Not specific | 4.5:1 |
If you don’t know whether your website meets the WCAG’s contrast standards, you can leverage Accessibility Spark’s contrast checker to get a better idea.
Defining Font Sizes Using CSS
When defining font sizes using CSS, the best practice would be to use relative units instead of absolute units. By leveraging relative units, you can make the text size on your website adaptable to different devices and user settings.
Some of the common relative units include named font sizes, ‘em’, ‘rem’, and percentages. They are more practical because they ensure your website’s text remains readable across multiple devices and browsers.
Named Font Sizes
Named font sizes are predefined font sizes set by the browser. Examples include ‘small’, ‘medium’, ‘large’, etc. These font sizes are flexible and can be adjusted according to user preferences.
Here’s an example using named font sizes in your content:
strong {font-size: larger}
…
<h1>Letting the <strong>user</strong> control text size</h1>
<p>Since only the user can know what size text works for him,
it is <strong>very</strong> important to let him configure the text size.
…
EM Units
An ’em’ unit is the unit of measurement relative to the font size of the element to which it is applied. In simple words, it refers to the base font size of the document or the browser’s default setting in case the element’s font size isn’t specifically defined.
Here’s an example
strong {font-size: 1.6em}
…
<h1>Letting the <strong>user</strong> control text size</h1>
<p>Since only the user can know what size text works for him,
it is <strong>very</strong> important to let him configure the text size. </p>
…
Rem Units
‘rem’ refers to the root em. It is the unit of measurement of the root element’s font size. In simple words, 1rem is equal to the font size of the html element.
According to W3C, “‘rem’ is equal to the computed value of the em unit on the root element.”
For most browsers, the font size for the root element is 16 pixels. This value remains the same regardless of the font size set for a specific (parent) element and remains consistent across the whole document.
Percentages
The Percentages text sizes are applied to the parent element and automatically adapt to their base text size. The purpose of defining text size in percentages is to enable the text to respond dynamically to the base font size.
Here’s how it is applied.
strong {font-size: 120%}
…
<h1>Letting the <strong>user</strong> control text size</h1>
<p>Since only the user can know what size text works for him,
it is <strong>very</strong> important to let him configure the text size.
…
After applying scalable fonts, you must test their scalability across multiple devices. For this purpose, you can also use Accessibility Spark to get automated results within minutes.
Tips to Optimize Website Font Size
You can follow these best practices to create an accessible website that meets WCAG compliance:
Using Text Instead of Images of Text
Whenever possible, use text over images of text so that users with visual impairments can access your content through screen readers. But, if there is a need for inserting images of text (such as logos), add alt text to keep your website accessibility intact.
Maintain Color Contrast Between Text and Background
Smooth and eye-catching color contrast is essential for the inclusivity of your website. Here are the web accessibility standards for color contrast:
- 4.5:1 — for normal text of up to 24 pixels
- 3:1 — for bold text of at least 19 pixels
- 3:1 — for regular text of at least 24 pixels
Use online tools like the Accessibility Spark to evaluate your website’s contrast ratios.
Readable Typefaces
Users often get confused between a capital “I” and a lowercase “L”. Avoid character ambiguity and provide a more straightforward typecase for easier readability.
Don’t Overuse Font Styles
Stick to 2-3 fonts (for H2, H3, normal text, and alt texts) and be consistent with fonts across the whole website. This improves readability and reduces cognitive load.
Letter and Word Spacing
Maintain spacing between two consecutive letters and words so that users can understand the content easily. Use the following CSS properties to ensure clarity:
- ‘Letter-spacing’
- ‘word-spacing’
Final Thought
Ensuring a readable font size across your website is critical to meeting WCAG compliance as it enables everyone, including people with disabilities, to have an inclusive experience.
With that being said, there are a number of other elements that are equally important in upholding the accessibility of your website. These include design, color pallet, text-to-background contrast, labels, and other accessibility elements that may impact your accessibility score.
To get a clearer picture of your website’s accessibility, you may use Accessibility Spark, which offers a comprehensive report across multiple web accessibility standards. You can check your website accessibility for free and, later, choose the most appropriate pricing model for 24/7 monitoring.