A presentation at WordPress Accessibility Meetup by Carie Fisher
Accessible Typography Essentials
Hello! Carie Fisher, MS, CPWA Sr. Accessibility Consultant & Trainer HCI Ph.D. Student at Iowa State University
Accessible Typography = Inclusion
01 Color & Contrast
Color & Contrast Takeaways 01 02 03 Small text (14 pt or smaller) must have a contrast ratio of 4.5:1 Large text (14 pt bold or 18pt) must have a contrast ratio of 3:1 Icons and essential images must have a contrast ratio of 3:1 04 05 06 Use solid color backgrounds to help with readability Do not rely on color alone to convey information Avoid certain color combinations like red + green and shades of gray
02 Typeface & Styling
Typeface & Styling Takeaways 01 02 03 Use common fonts like Arial or Open Sans whenever possible Avoid using speciality typefaces that target certain disabilities Pick a typeface that has unique characteristics 04 05 06 Font size for copy needs to be minimum of 14 pts (bonus points if larger) Limit the number of typeface variations to increase readability Avoid using only color, ALL CAPS, or italic styling to emphasize a word
03 Structure & Layout
Structure & Layout Takeaways 01 02 03 Use elements like headings to break up the page into sections Add visual elements like lists, numbers, and quotations Try not to exceed 80 characters per paragraph line 04 05 06 Line height needs to be 1.5X the typeface, and paragraph spacing is 2X Letter spacing should be 0.12X the typeface, and word spacing is 0.16X Avoid justified paragraph alignment which create “rivers of space”
Thanks! @cariefisher /in/cariefisher cariefisher.com
When you’re designing a page, it’s essential to think about who your audience is — and that your audience may not have the same abilities as you. Making your documents accessible is not just about adding alternative descriptions to images; it’s about thinking through all the ways you can make your design work for as many people as possible. Join me as I explain the choices you can/should consider in an accessible visual presentation using text, such as font, color, contrast, size, column width, spacing, kerning, and more.
The following resources were mentioned during the presentation or are useful additional information.
for free. You
can too.