How to choose a font for accessibility

To be clear; using accessible fonts is not optional. If you use an inaccessible font on your website, you run the risk of legal action. Using accessible fonts that conform to the Web Content Accessibility Guidelines (WCAG) is essential for compliance with key web accessibility laws in the US.

What are accessible fonts  

Not all fonts have been designed with web accessibility in mind. Size, color, and contrast are the three key factors that determine whether a font is accessible.

To meet the principles of inclusive design, it’s important to pick a font that is simple, unembellished, and clear. One of the easiest ways to narrow down your options is by knowing what features to avoid in a font. Inaccessible fonts tend to have one or more of the following characteristics:

• Make content more difficult to read
• Make it difficult to distinguish between the shapes of different letters and characters
• Slow the reader down
• Make it hard to separate one letter from another with overlapping characters or letters
• Are decorative or include unnecessary adornments
• Are specialty display fonts, such as hand-writing style, custom, or cursive

Why are fonts important for web accessibility  

Most of the web’s information – and the value your business offers – is communicated with text. With more than 32 million Americans experiencing vision loss, you risk endangering your reputation and commercial success by ignoring this group’s website needs. This figure includes Americans who experience trouble seeing even when wearing corrective lenses or contacts. And that number will continue to swell as the American population grows older and experiences more age and disease-related issues with their vision.

It’s not just people with visual disabilities who struggle to read certain fonts. People with learning difficulties like dyslexia can also be sensitive to certain typefaces. Your choice of font type can greatly impact their level of readability too. It’s worth noting that dyslexia affects up to 20% of the US population.

By ensuring your website fonts are accessible, you can better reach this significant section of the population and safeguard your brand reputation as an organization that takes inclusivity seriously.

Besides being the right thing to do, using accessible fonts on your website is the only way you can avoid violating accessibility standards set out in US law. Using an inaccessible font can result in severe legal and financial penalties such as fines, lawsuits, and other enforcement actions.

Check your page accessibility score

Check if your page is accessible with our free website accessibility checker:

On what type of content should I use accessible fonts?  

When selecting an accessible font, remember that accessibility and digital inclusion don’t start and end on your web pages. Consider all the ways that you use written communications to connect with your target audiences, such as emails, landing pages, PDFs, videos, and images.

All these content formats should be written using the same font throughout. If that’s not possible, as few font types as possible should be used.

It’s a good idea to specify your accessible font choice in your brand guidelines and ensure all website stakeholders are aware of the varying web accessibility levels of different fonts.

Best fonts for web accessibility  

To achieve web accessibility and minimize confusion for your website visitors, you should use as few fonts as possible across your website. But that rule doesn’t help with picking the best font for web accessibility. It’s not always obvious which fonts are accessible. Neither Section 508 of the Rehabilitation Act nor the Americans with Disabilities Act (ADA) specify requirements for choosing an accessible website font.

Fortunately, accessibility standards like WCAG help shine a light on which fonts provide the most inclusive website experience for all users.

Top accessible fonts

The good news is that you don’t need to invest in a specialist, custom font to make your website’s content accessible. Many standard and widely available fonts score highly for web accessibility. The most accessible fonts are Tahoma, Calibri, Helvetica, Arial, Verdana, and Times New Roman.

Slab serif fonts including Arvo, Museo Slab, and Rockwell are also considered to be accessible. These font types are mostly used in headings rather than the body text.

You may have heard that sans serif fonts are more accessible for screen reading. However, as the research is not conclusive either way as to whether serif or sans serif typefaces are more readable, the decision is up to you. For the best outcome, it’s recommended to pick common fonts or font families that have strong and unique characters.

Fonts to avoid 

You should opt for more common fonts over less popular ones, to increase the likelihood of your website visitor’s device being able to correctly display it.

Avoid fonts featuring “imposter letter shapes” that are designed to be very similar to other letter shapes as part of their visual style, such uppercase Is, the number 1, and lowercase Ls.

What is the best font size for web accessibility  

Even if you’ve chosen an inclusive font, your website text might still be inaccessible. Some of your website visitors will need larger or smaller font sizes for optimal reading. Using the wrong sized font can also result in your content being non-compliant with web accessibility standards.

Avoid this by:

• Enabling your website visitors to increase or decrease text size without zooming in on everything else on a page.
• Ensuring your text size allows your content to be displayed properly on a full range of devices, including mobile, tablets, and screen readers.

When it comes to font sizes, there are four different measurement units:

1. Ems (em). Defines a font size relative to the size of the parent element in an HTML page.
2. Rems (root ems). Relative to the font size of the root element in HTML.
3. Pixels (px). Aren’t measured against a base element. They are an absolute unit of measurement.
4. Points (pt). Another absolute unit of measurement.

 It’s recommended to define font sizes in relative units such as percentages, rem, or em, instead of absolute units of measurement like pixels or points. In some browsers, it’s not possible to zoom in on text set in pixels separately from the rest of a web page. Using relative font on the other hand, allows text to be resized appropriately across multiple devices and platforms.

But when it comes to sizing, accessibility legislation like the ADA and standards like WCAG do not specify an official minimum font size for web text. That doesn’t mean that any font size is accessible – if text is too large or small, it can be too challenging to read. So, it’s best to enable your website visitors to choose their optimal font size themselves via zooming-in.

WCAG compliance standards stipulate the following zooming-in requirement for text accessibility: “Except for captions and images of text, text can be resized without assistive technology up to 200 percent without loss of content or functionality.”

Font color and color contrast for web accessibility  

Color: When it comes to website design, color is often used to impart meaning. Such design choices can actually make your content inaccessible.

To make it easier for everyone to accurately see and perceive your content, WCAG recommends that font color should not be used as the only visual means of conveying information. That includes using color differences to prompt a user response or to interpret a visual element on your web page, such as colored but not underlined hyperlinks in a sentence or items in a list where some are presented in colored text to show a difference.

If you must use font color to communicate information, be sure to include alternate visual indicators to help people with low color perception to accurately interpret it. This might include actions like underlining, bolding, italicizing, or using other discernable cues that don’t require full color vision to make it visually distinct from the surrounding text.

Contrast: It’s helpful to note that accessibility laws and guidelines don’t expressly prohibit the use of any specific colors or color combinations for web text. Instead, color contrast is the measure used to measure accessibility compliance.

Color contrast refers to the color contrast between the text and the background it’s displayed on. Using sufficient color contrast for your text makes it easier for everyone – and especially people with low vision – to see your web text clearly. Too much (or too little) contrast can both cause problems. Think about trying to read colored text with a low contrast – like grey text on a white background – on a sunny day outdoors.

Black text on a white background is the default for web content, but many websites deviate from this for branding and stylistic reasons – and not all these combinations will be accessible. Helpfully, WCAG guidelines clearly state the contrast levels required for text to be deemed accessible:

• Headings: Contrast ratio for large-scale text should be a minimum of 3:1.
• Main Text: For text other than headings, a contrast ratio of at least 4.5:1 should be maintained.
• Logotype: Text which is a part of a logo or brand has no contrast requirement.
• Incidental Text: Text which is part of an inactive user interface, pure decoration, invisible, or part of a picture, and does not convey meaningful information, has no contrast requirement.

If you’re not an expert in web accessibility, using a professional color contrast checker tool, like Siteimprove’s Color Contrast Checker, is the easiest and most reliable way to check the accessibility of your web text’s color contrast ratios.

Conclusion  

Ensuring your website only uses accessible fonts makes your content easier for everyone to read and enjoy and helps you stay compliant with landmark accessibility laws, like the ADA and Section 508.