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 arent 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 youll 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.

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

Color Contrast

Not by color alone

  • Dont depend on color for meaning its fine to use color, as long as that isnt the only identifying characteristic
  • Links in text must stand out as links, make them underlined
  • Error messages in forms: dont 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 dont have an overview of everything thats on a page, like people with glaucoma. Dont make them search for a submit button thats 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 about accessible design

  • First published: October 10, 2025
  • Last updated: April 24, 2026
  • Edit article: Improve it on GitHub
  • Contributors: Joe Dolson, Rian Rietveld.

Other pages in: Checklists

  • Overall

    Find content, design, and frontend code checklists about accessibility.

  • Content checks

    Find an overview of content checks for accessibility.

  • Frontend code checks

    Learn how to perform frontend code checks for web accessibility.

Back to: Checklists

Quick links and main topics

Quick links

Content

Disclaimer: This documentation is intended to help the WordPress community understand and implement accessible practices. It is not a replacement for the official Web Content Accessibility Guidelines. Please read the full disclaimer.

Back to top