Creating accessible design with color and type

Contrast and color use are essential components of accessible design. All users, including individuals with disabilities, must be able to perceive content, including typography and informational graphics. Universal Design aims to provide accessible solutions that offer the same means of use for all users: identical whenever possible and equivalent when not (Cook & Hussey, 2002; The Center for Universal Design, University of North Carolina, 1997).

The PDF document below visually demonstrates good text contrast as defined by the Web Content Accessibility Guidelines (WCAG) 2.1. The WSU color branding combinations shown in the table below provide sufficient contrast between text and background, helping ensure readability for individuals with moderately low vision. These contrast requirements also help ensure adequate differentiation between text and background for individuals with color vision deficiencies.For further inquiries or additional information regarding accessibility in design, please contact us at medcom@med.wayne.edu or visit medcom.med.wayne.edu.

Download PDF to read more about WSU color and accessible design

• Reading text on hand-held pages should be a minimum of 8 point font.
• Any posters that are meant to be read at a minimum distance, the following sizes are suggested:
  • Title: 80 pt bolded
  • Authors and affiliations: 54 - 60 pt
  • Headings: 36 pt
  • Body text: 24 - 32 pt
  • Captions: 18 pt
• For readability, the following sizes are suggested for the body text:
  • To be legible at 6 feet use 30 point.
  • To be legible at 10 feet use 48 point.
  • To be legible at 12 feet use 60 point.
  • To be legible at 14 feet use 72 point.
• Text and figures should be readable from around 5-7 feet away
• Use a sans serif typeface (e.g., Lato, Arial, Open Sans, Helvetica, etc.). Our poster templates use the sans serif font Lato, which can be downloaded from the link provided on our FAQ page.
• To maximize readability, use a 1.4 or 1.5 line height (line height of 140%/150%, equal to 1.4/1.5 times the font size)
• Avoid using color as the sole means of conveying information or indicating an error. Instead, supplement color with text, an icon, or another visual indicator.