How to Choose An Accessible Font for Your Website

Back to blog

ADA Compliant Fonts and Why They Matter for Your Site

Posted July 15, 2022

AudioEye

Posted July 15, 2022

A collection of words that describe different font attributes, like spacing, contrast and font size.
A collection of words that describe different font attributes, like spacing, contrast and font size.

Ready to see AudioEye in action?

Watch Demo

Using accessible fonts is critical to comply with accessibility rules and make your website readable for all users. Learn how to make your site more accessible..

Design, page layout, and navigation all play a part in creating an accessible web design. However, the smaller details — like font — are just as important. In fact, it’s these smaller details that can make your site a target for accessibility lawsuits.

To avoid lawsuits — and improve the functionality and legibility of your site — you need to choose a font that’s compliant with the Americans with Disabilities Act (ADA). This ensures the millions of people with visual impairments and cognitive disabilities can easily read text.

Below, we’ll review how to choose fonts that meet the accessibility standards included in the ADA and which are the best fonts for readability.

What Makes a Font Accessible?

There isn’t a one-size-fits-all formula for accessible fonts, but specific elements like size and color play a role. Additionally, the Web Content Accessibility Guidelines (WCAG) include recommendations on what makes a font accessible for individuals with visual or cognitive disabilities.

For example, a study by the Association for Computing Machinery found that typography has a direct impact on reading speed and comprehension. It was discovered that EB Garamond had a faster reading speed among older participants than Avant Garde and Open Sans which slowed reading speed. Additionally, the study found the fonts Noto Sans, Times New Roman, and Calibri were easier for participants to comprehend.

The fonts mentioned above are considered to be more accessible and meet ADA compliance standards. Some additional elements that add to font accessibility include:

  • Size: While there are no minimum size requirements for font size, it’s recommended font sizes start at 1 rem (15 pixels).
  • Color: Avoid using color alone to portray information; for example, avoid using color to encourage users to take a specific action or to convey meaning.
  • Spacing: Fonts should have equal word spacing for easy distinction. 
  • Weight: A thinner weight on smaller font size and narrow-width fonts are not deemed accessible. 
  • Contrast: When using different font colors, ensure they have the right color contrast between text elements. A minimum ratio of 4.5:1 is considered accessible for body text.
  • Lowercase usage: Users should be able to easily distinguish between uppercase and lowercase letters.

What Makes a Font Inaccessible?

As we mentioned above, there is no one-size-fits-all for accessible fonts. However, just as there are certain elements that make a font more accessible, there are elements that make fonts inaccessible. These include:

  • Decorative fonts, like those resembling shapes 
  • Cursive fonts that don’t separate characters
  • Fonts that make it difficult to understand content
  • Fonts that slow reading speed or comprehension

Cursive or highly decorative fonts are not only inaccessible in terms of readability and legibility, but also slow down navigation and comprehension.

Chart showing that 32 million adults in the United States have visual impairments.

Why Choose an Accessible Font?

Approximately 32 million adults in the United States have visual impairments, including low vision, color blindness, and cataracts. This number does not include those with visual processing difficulties or other learning disabilities (which affect more than 65.6 million Americans), such as dyslexia or ADHD. If your website isn’t accessible, it’s likely many users won’t be able to understand your content or access the resources and products you offer.

There can also be search engine optimization (SEO) benefits to complying with font accessibility guidelines. For example, easier navigation and more readable text can improve key website metrics like bounce rate (the number of users who leave your website without visiting another page) and time on site — both of which are known to boost search engine rankings. Using accessible fonts also ensure that your content is easier to read and is compatible with assistive technology.

In addition to providing a good user experience, accessible fonts help you comply with ADA guidelines. For example, WCAG recommends body text having a text size of at least 12 points (pt) or 15 pixels (px). They also recommend text not be smaller than 9pt (12 px). The guidelines also recommend including a variety of fonts that are widely available and accessible, including Times New Roman, Verdana, Arial, Helvetica, and others.

By following accessible font guidelines, you increase ADA compliance on your site. This helps to decrease the chance of accessibility lawsuits being filed against your company, which can be expensive and damaging to your reputation. Not to mention the subsequent loss of customers and trustworthiness.

Web Content Accessibility Guidelines for Fonts

The ADA was designed to protect people with disabilities from discrimination, including in “places of public accommodation”. ADA compliance means that any business open to the public is required to make its online content and services accessible to people who rely on assistive technologies to navigate the internet. 

While the ADA does not include technical specifications around digital accessibility, it does enforce the basic guidelines set by WCAG. Following these recommendations helps you to comply with the ADA as well as create a more inclusive, accessible site.

Below are a few of the WCAG guidelines around fonts that help you comply with ADA requirements.

1. Spacing

Spacing is an important part of WCAG conformance. The spacing of your letters and lines should provide enough room to avoid any overlap, making each word more readable.

WCAG’s recommendations also cover text modification. People with certain disabilities (or who rely on assistive technology) may adjust the text on their page, increasing the spacing to make it easier for them to read. Words should not disappear or overlap when users modify page text from their browsers.

For technical specifications, check out WCAG Success Criterion 1.4.12 Text Spacing.

2. Color Contrast

While you might think black text on a white background is easily readable, this isn’t always the case. Just like too little contrast will make text fade into the background, too much contrast can also cause visual fatigue.

WCAG outlines various recommendations for color accessibility, including guidance for color contrast ratios, luminance, background colors, and color spacing in order to make a site more accessible to those with any type of vision deficiency. For example, WCAG recommends a minimum contrast ratio of 4.5:1 for normal text and 3:1 for large text.

To learn more about accessible text colors, check out AudioEye’s Color Contrast Checker.

3. Size

Font size is one of the most important parts of readability. WCAG has no minimum font size, but recommends that users should be able to resize text up to 200% without any content or functionality loss. WCAG’s 1.4.4 success criterion has more information.

4. Text with Graphics

Some web designers will use text within images instead of standard blocks of text, but this presents an accessibility challenge.

Standard text can be adjusted for size, spacing, and color without changing the overall readability of the website. Text within images, however, is much less adaptable. It can become pixelated and difficult to read when enlarged, making it an obstacle for users with visual disabilities.

According to WCAG, if the same presentation can be made using text alone, you should avoid using an image to present that text. WCAG’s 1.4.5 success criterion has more information.

How to Choose an Accessible Font

If you want to make your typeface more readable, here are some best practices for accessibility:

  • Use simple, familiar, and readable typefaces.
  • Avoid complex characters, like cursive or handwriting fonts.
  • Avoid character ambiguity, where two or more letters can be easily confused.
  • Use a limited number of font variations (one, two, or three at most).
  • Consider spacing to ensure there’s plenty of white space and no overlapping text.
  • Make sure text and background colors have sufficient contrast.
  • Avoid small font sizes or large blocks of crowded text.

10 Typefaces Commonly Used for Accessibility

Plenty of popular fonts are already available that will help you site pass ADA accessibility requirements. Here are 10 of the most accessible fonts that provide an inclusive reading experience:

  1. Times New Roman: One of the most widely used fonts, Times New Roman features a simple design which makes it easy to read and comprehend.
  2. Tahoma: Similar to Times New Roman, Tahoma has a simplistic design that makes it quick and easy to read. Additionally, the font has good spacing between characters and other elements for easy distinction 
  3. Calibri: The rounded appearance of Calibri provides more clarity for online reading than other fonts. Additionally, the text can easily be resized based on users’ preferences, making it a great choice for accessibility.
  4. Helvetica: With bold outlines, increased character spacing, and a large x-height, Helvetica is a strong choice for accessibility. It’s easier for individuals with visual impairments to read and is compatible with assistive technologies.
  5. Arial: Arial features wide letter spacing, clear distinction between similar letters, and a high x-height, all of which make the font more accessible. It’s also compatible with assistive technologies and screen magnifiers.
  6. Verdana: Similar to Arial, Verdana includes a large x-height, bold outlines, clear distinction between similar-looking characters, and wide character spacing. Together, these elements make text easier to read for both human users and assistive technologies.
  7. OpenDyslexic: OpenDyslexic is a font specifically designed for individuals with dyslexia. The font includes bold lowercase letters and wider letter spacing, both of which make it easier for individuals to read and interpret.
  8. Arvo: Arvo is considered to be a slab serif web typeface, which is highly readable in various contexts. 
  9. Rockwell: Also a slab serif font, Rockwell has a very geometric and minimalist design. The straight, defined endings and strong spacing improve readability and legibility for users.
  10. Museo: The large counters and good x-height of Museo make it a good choice for an accessible font. Museo is also clearly legible in various font sizes, which means users can resize the text based on their preferences without losing functionality.

Best Practices for Utilizing Accessible Fonts

With an understanding of what makes a font accessible and which typefaces are best for accessibility, let’s dive into best practices for using accessible fonts across your site.

First, avoid fonts that lack separate characters, are decorative, and resemble shapes. These elements decrease legibility and readability for users with visual impairments or learning disabilities, making it difficult, if not impossible, for individuals to read.

Second, check how fonts look on various devices to ensure accessibility across smartphones, desktops, and tablets. We also recommend looking at how text looks on different assistive technologies to ensure accessibility.

Finally, use bolding or underlining instead of color to designate important information. This is especially beneficial for individuals with visual disabilities or impairments as they can better distinguish these elements over color.

Design for Accessibility with AudioEye

Whether you’re designing infographics, videos, slideshows, or blog posts, it’s critical to choose the right font. Doing so ensures you’re creating digital content that’s accessible and readable to as many users as possible. Not only does this help you comply with ADA accessibility requirements, but also helps you create a more accessible website.

With AudioEye, designing for accessibility is simple. Take our Color Contrast Checker for example. The free tool analyzes how different fonts work against different color backgrounds and other web elements, helping you choose both an accessible font and color combination. Along with our Color Contrast Checker, AudioEye’s Website Accessibility Checker and suite of Dev Tools help you enhance accessibility across all your digital content.

Ready to increase the accessibility of your site? Get started with a free accessibility scan from AudioEye.

Frequently asked questions

Ready to see AudioEye in action?

Watch Demo

Ready to test your website for accessibility?

Scan your website now.

Share post

Topics:

Keep Reading