Design checks for web accessibility

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 it’s background. The rules in WCAGWCAG WCAG is an acronym for Web Content Accessibility Guidelines. These guidelines are helping make sure the internet is accessible to all people no matter how they would need to access the internet (screen-reader, keyboard only, etc) https://www.w3.org/TR/WCAG21/. 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.

Note: Logos and logotype are frequently exceptions to accessibilityAccessibility Accessibility (commonly shortened to a11y) refers to the design of products, devices, services, or environments for people with disabilities. The concept of accessible design ensures both “direct access” (i.e. unassisted) and “indirect access” meaning compatibility with a person’s assistive technology (for example, computer screen readers). (https://en.wikipedia.org/wiki/Accessibility) guidelines, including color contrast rules. If you’re designing a new logo, however, it might be a good idea to consider them, anyway.

Top ↑

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.

Top ↑

Color blindness check tools:

Top ↑

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.

Top ↑

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

Top ↑

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.

Top ↑

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.

Top ↑

Resources

Top ↑

Last updated: