Design Accessibly

Accessibility requirements relevant to visual design generally cluster around issues of legibility, color perception and device independence.

Key Concepts

Accessible design is, at its heart, just "good" design: effective, highly usable visuals and interfaces to communicate with an audience. What is added is an awareness of certain limitations or needs of specific audience members.

Common design considerations for people with disabilities interacting with digital applications include:

  • Users with low vision may struggle to read small text or discern differences between similar colors.
  • Users with with distortions or artifacts in their visual field may struggle with designs which rely on distant spatial connections, such as form designs with a column of labels to the left of a column of fields.
  • Users using magnification software will zoom in on individual pieces of the page. Alerts placed far from a cursor may appear off their screen, and scrollable in-page elements may prevent them from scrolling the page without zooming back out.
  • Users with colorblindness and devices with "digital wellbeing" features that turn sepia/grayscale in the evening may not be able to differentiate color differences.
  • Users with reading and attention disorders may struggle to read content if distractions pull their focus from the content or font choices increases their cognitive load.

Designer's Guide

Legibility

Font and layout choices should make it easy for users to recognize characters and track lines. This is especially critical for users with low vision and cognitive disabilities relevant to reading or focus.

  • Sans-serif fonts with line heights (leading) close to 1.5 and line lengths of less than 80 characters. are usually easiest to read.
  • Left aligned text is highly recommended, as it maintains consistent character and word spacing. Inconsistently spaced words in justified text can make it difficult to read for some users, and the inconsistent alignment of centered text is often mistaken for meaningful tab indentations.
  • Very light weights (<300) of some fonts exhibit dramatically reduced contrast, blurriness and color shifts on some screens. Be sure to test light font weights on low and high PPI screens, on both Windows and Apple devices.
  • Distractions should be minimized: page content should be surrounded with ample white space to assist focus, and animations should be minimized or easily paused.

Color Choices

  • Color contrast for text against its background should meet WCAG standards: 4.5:1 for small text, 3:1 for large text. Note that logos and disabled buttons are not held to these standards.
  • Meaningful graphical elements (icons, focus indicators) should also maintain a 3:1 contrast against their background.
  • Avoid using pure black (#000) against pure white (#FFF). Extreme contrast at a single pixel distance reduces legibility and increases eyestrain for many users, especially users with dyslexia and light sensitivity.
  • When using more than one thematic color, try to use palettes which remain distinct for users with colorblindness.
  • Avoid communicating concepts with color alone. Secondary indications such as icons, underlines or contrast changes may be needed to differentiate elements.

Suggested color selection and testing tools:

Flexibility

  • Designs should be adaptable for many screen sizes:
    • On small screens, elements should not become too small to see or overflow the screen horizontally.
    • On large screens elements should not become blurry due to over-enlargement.
    • The design should not require a particular orientation (vertical or horizontal).
  • Designs should be adaptable for low and high pixel densities:
    • Low PPI screens may need heavier weight fonts or simplified graphical elements.
    • High PPI screens will need vector or high resolution images and logos.

Intuitive Interactions & Wayfinding

  • Text for links, buttons and menu items should clearly explain their purpose or destination.
  • Visual indications of interactivity should be clearly distinct from the surrounding text. Color changes often are not enough with significant contrast changes or secondary indications (underlines, outlines, background colors).
  • Reserve visual styles used to indicate interactivity for interactive elements. Users should not have to run their mouse or finger around the page to figure out which blue or underlined text can and cannot be clicked.
  • Minimize accidental clicks and difficult mousing with amply sized touch targets, space between interactive elements, and simple mouse trails (e.g., wide vertical dropdowns are much easier to track than narrow horizontal flyouts).
  • Maximize visual proximity for related elements and instructions; labels and help text should touch their fields.
  • Navigational elements should appear in the same place and in the same order on each page, and indicate which page or section is active.
  • A site search or a similar fallback navigation method should be available.

Online Classes, Books & Articles