An Introduction to Font AccessibilityPosted on 26
This is a guest article from Jennifer Moline*.
Accessibility of images is emphasised during web design training, but an equally important issue that is much less discussed is font accessibility. While images require alt text tags to enable the visually impaired to know what is being displayed, well-done font accessibility will make your site more available for everyone.
Traits of Font Accessibility
There are several different traits of your website’s text that all qualify as parts of font accessibility.
- Font popularity
- Font color
- Background color
- Contrast between font and background
- Text size
- Text serifs (or lack thereof)
A Common Font Is an Ideal Font
The popularity of a font may sound like a strange reason to choose or not choose it, but if few people install that font onto their computer, few people are going to see the site displayed using the font you intended. If a site’s specified font isn’t found when people visit it, their computer substitutes a common font that they do have installed. In design, this can drastically change how your site comes across, so it’s better to include one or two backup options in your CSS that will load if the visitor doesn’t have the first one.
Colours and Contrast
Certain colors, particularly red and green, are the most likely to create accessibility problems for colorblind individuals. If a site comprises these colors, that leaves only contrast to keep the text and background from blending together. Low contrast and odd colors tend to look garish and be difficult to read even for those who are not colorblind, so it’s a good practice to ensure that text and backgrounds contrast strongly.
Text Size and Serifs
Text on your average website is 12 to 14 point in size, but you should consider your target audience before following this trend. If your site is targeted toward the elderly, larger text as the default size would be preferable, because elderly individuals tend to have more trouble reading small text. Similarly, using sans-serif fonts makes text easier on the eyes when viewing it on a monitor.
Put It to the Test
Even if you’ve taken care to address each of these accessibility concerns, it’s always a good idea to put your site to the test and ensure that you haven’t missed anything or done an inadequate job.
Here are some efficient and free tools to test your site’s accessibility:
- WAVE – Enter a site’s URL and get feedback on all aspects of accessibility using icons placed directly on the site itself.
- Accessibility Color Wheel – Select your site’s background and text colors with instant results showing accessibility-acceptable contrast. This tool emulates colorblindness to red, green and blue individually as well, and is downloadable for offline use.
- Accessibility Wizard – Breaks down accessibility responsibilities by work position for a development team.
If you want to go more in depth into the topic, make sure to bookmark and read the following articles:
- Font Accessibility: Despite being rather old, this guide is a great resource of various font accessibility tips: from choosing the font families to font sizes and colors.
- Dive Into Accessibility: Use relative font sizes as well as this Font style and size intro from the Queen’s University Web Standards and Accessibility Guide.
- Fonts and accessibility in web pages by Lois Wakeman.
Paying attention to font accessibility will ensure that your site reaches the widest target audience possible, and doing this in the design stage will save you the time and energy you would have spent adjusting things later. Your site will look sleeker for the extra attention to detail, and polish is always a plus.
- Free Hand-Picked Resources for Designers and Developers – September Edition (1)
- Top Responsive Design Tools + Win Templates! (19)
- Future of Web Design & Future of Web Apps Conferences (3)
- The Typographer’s Dream Bundle – 33 Pro Fonts for 99% Off (1)
- Tips for Crafting the Perfect Social Media Post (2)