Show
Some fonts and typefaces are easier to understand than others. An accessible font is a font that will not exclude, nor slow down the reading speed of any website visitor, including those with blindness, vision loss, and reading disorders. Choosing the right font improves the legibility and readability of your site for everyone, helping your organization reach a wider audience online.
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 fontsNot 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:
Why are fonts important for web accessibilityMost 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 scoreCheck 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 accessibilityTo 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 fontsThe 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 avoidYou 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 accessibilityEven 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:
When it comes to font sizes, there are four different measurement units:
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 accessibilityColor: 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.
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. ConclusionEnsuring 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. |