Design checks for web accessibility

TODO: Starter content. This content should be reviewed and restructured. The links need to be checked and updated. Some info/resources can be moved to the topics (and linked to) Standards and best practice.

The most common design elements to check for are color contrast between text / background and the meaning of color to give information. But these aren’t the only things to take into consideration to improve your design.

Here are a few major issues to address. At the end of the page you’ll find links to good resources with more examples and solutions.

Color contrast

Check the color contrast ratio between text and its background. The rules in WCAG 2 AA guidelines are: Color contrast ratio between text and background must be 4.5 or more for normal text and 3.1 or more for text of at least 24 pixels or 19 pixels bold.

There are many tools to calculate this easily, see Color contrast checkers.

Logos and logotype are frequently exceptions to accessibility guidelines, including color contrast rules. If you’re designing a new logo, however, it might be a good idea to consider them, anyway.

Color Contrast

Not by color alone

  • Don’t depend on color for meaning – it’s fine to use color, as long as that isn’t the only identifying characteristic
  • Links in text must stand out as links, make them underlined
  • Error messages in forms: don’t indicate errors only using text color, borders, or backgrounds; include clear text messages or icons, as well.

Color blindness check tools:

  • Look at your design only in grey scale colors, remove all color. Can you still understand it?
  • Sim Daltonism tool for color blindness check.
  • Coblis – Color Blindness Simulator

Not by icon alone

Add text with icons, if they are an essential part of the functionality. Make sure interactive elements such as navigation menus are labelled correctly. Not every user understands the icons (hamburgers) that are obvious to you.

For users with dyslexia

  • No large blocks of text, e.g. use short paragraphs, headings and lists to divide the information
  • Uppercase font is harder to read
  • Handwritten font is harder to read
  • A font size of 16 pixels minimum, is best for most devices
  • Make the line height not too small

For users with limited vision

Keep together what belongs together: place related links or controls near each other.

Some people don’t have an overview of everything that’s on a page, like people with glaucoma. Don’t make them search for a submit button that’s on the bottom right, while the input fields is on the top left, for example.

Make the order of things logical, most users read from top to bottom. For example, do not put required check boxes below the submit button in a form.

For users with an attention disorder

  • Users must be able to pause animations, or the animations must automatically stop after 3 seconds
  • Avoid using too many elements that distract the user from reading the text or using the navigation.

Resources

View this page on GitHub