Design checks for web accessibility

This page gives an overview of practical approaches and best practices for your design workflow.

The most common design elements to check for are color contrast between text / background and the meaning of color to give information. But there are more things you can take into consideration to improve your design.

Here we give the most basic issues to address, at the end of this page you’ll find links to good resources with more examples and solutions.

Color contrast 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: Text in a (company) logo doesn’t have to comply to color contrast rules, but don’t make users guess who’s website they are on.

Top ↑

Not by color alone Not by color alone

  • Don’t only use color for meaning” – it’s fine to use color, as long as that isn’t the only identifier
  • Menu items; make them stand out not by color alone
  • Links in text must stand out as links, make them underlined
  • Error messages forms:  don’t indicate an error only by (for example) a red border, provide room for clear text messages

Color blindness check tools:

Top ↑

Not by icon alone 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 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 For users with limited vision

Keep together what belongs together (proximity of controls).

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 checkboxes below the submit button in a form.

Top ↑

For users with an attention disorder For users with an attention disorder

  • Movement must be stoppable by the users, or auto stop after 3 seconds
  • Avoid using too many elements that distract the user from reading the text or using the navigation.

Top ↑

Resources Resources

Top ↑

Last updated: