Just Creative

I’m Jacob Cass, the founder of JUST™ Creative. I’m a multi-disciplinary graphic designer, working with clients all around the world. My specialty is logo & brand identity design. JUST™ Get in touch.

Love


An Introduction to Font Accessibility

Posted on

Web Design Confession Booth (xvi)

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.

These include:

  • 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

Lady in Red

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.

Further Reading

If you want to go more in depth into the topic, make sure to bookmark and read the following articles:

In Conclusion

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.

*Jennifer Moline writes about freelancing, small business and design for the PsPrint Blog. PsPrint is an online printing solutions company, which you can follow on Twitter and Facebook.

SUBSCRIBE: RSS, Email, Twitter, Facebook



12 JUST™ Creative Comments

  • NO TRACKBACKS


Submit A Creative Comment

Your email address will not be published. Required fields are marked *
Please use your real name and do not use keywords. All comments are moderated by myself and I reserve the right to edit or not publish your comment. Thank you!

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

 


© Copyright JUST™ Creative 2007-2013. Designed by Jacob Cass. Powered by Wordpress using the Skeleton Framework. Fonts served by Typekit. Site hosted by (mt).