Color, Text, and Animation - trussworks/accessibility GitHub Wiki

Color, typography, and animation are often applied similarly across the application, perhaps in a shared design system. Ensure that accessibility is taken into consideration early to make it easier to use good patterns.

Color

Color should not replace essential information

Color is not the only means of conveying information such as error or success states. There should be another indicator (such as icons and text) so that people who cannot easily distinguish colors will be able to understand the content. For example, a common mistake is relying solely on the user of “red” to visually communicate errors in form fields. Use multiple cues like color, icons, bold font weight, heavy border or outline, and helpful text to make sure users don’t overlook this critical information.

Make sure the foreground and background color of all text, icons, and focus indicators meet the proper contrast ratio

  • Assess your application color palette. The contrast ratio between texts and background should be at least 4.5:1 according to the WCAG.
  • Be sure to check your link and hover text colors as well.
  • If your font size is at least 24px or 19px bold, the minimum decreases to 3:1.

Don’t use overly saturated or high contrast colors

  • Oversaturated colors, high contrast colors, or even just the shade of the color can be unsettling for users.
  • It’s best to avoid high concentrations of these types of colors.

Text

Typography should be easy to read and scalable

  • Font sizes should be responsive and the design should allow for users to zoom without causing readability issues.
  • The font itself should be easy to read. Decorative fonts, small font sizes, italicized text, and all uppercase text are harder to read.
  • Larger text, shorter line lengths, taller line heights and increased letter spacing improves readability.

Content should be concise, clear, and well organized

  • Content should be written using plain and simple language
  • Paragraphs should be focused on a single idea
  • Ideal line length should between 45 and 75 characters
  • Breaking up content with headings, lists, or images give mental breaks to readers
  • Use headings to logically group and summarize information
  • Be consistent with placement and labeling
  • Interactive components should have meaningful labels (e.g. buttons, menus, links)

Animation and effects

Understand why you are using animation and effects and how to design them safely

  • Check that any elements that flash on screen, including sidebars that might open and close quickly, do so at a rate of less than 3 Hz. Fast flashing effects (defined as flashing more than three times a second) or high-intensity effects and patterns can cause seizures, known as photosensitive epilepsy.
  • Avoid parallax or motion effects, can cause some users to feel dizzy or experience vertigo due to vestibular sensitivity.
  • Keep in mind that constant animations or motion can also be distracting to users, especially to users who have difficulty concentrating.
  • Provide controls or options to stop, pause, hide, or change the frequency of any animations or effects.
  • Provide timeouts for feature interaction animations. If you must, then give the option to extend the time.
  • Ensure that the application still makes sense with CSS turned off (particularly if you are heavily using CSS to position and move elements)