Design checks for web accessibility

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

Read the detailed documentation accessible design in Design and user experience in the section Standard and best practice of this documentation.

Listed below are the major issues to address.

Color contrast

Check the color contrast ratio between text and its background. The guideline in WCAG 2.2 AA guidelines is:

  • the 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.

Text in logos and logotypes are excluded from this guideline.

Non-text elements that have meaning should have a color contrast of 3.1 or more against its background. For example: icons used functionally or informationally, borders of input fields, checkboxes or radio buttons. Also check for different states (light/dark mode, checked, not checked, etc.). All states must have a color contrast of 3.1 or more.

Documentation about color contrast: Color contrast of text against its background in Standards and best practice: Design and user experience.

Not by color alone

Functionality must also be understandable for people who cannot see colors.

  • 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, so keep them underlined.
  • Use clear hover and focus states, not depending on color alone.
  • Don’t indicate errors in forms only using text color, borders, or backgrounds. Include clear text messages as well.

Related documentation:

Color-blindness checks and tools:

  • Look at your design by removing all colors, viewed only in grayscale. Can you still understand it?
  • Sim Daltonism, a macOS app tool for color-blindness check.
  • Coblis, color-blindness simulator by Colblindor.

Readability

Please note: these are recommendations and not WCAG 2.2 AA requirements:

  • Break text into hierarchical headings (H1, H2, H3).
  • Avoid all uppercase for headings or paragraphs of text.
  • Use a readable font for the main or important text. Handwritten fonts are harder to read.
  • Use a minimum font size of 16 pixels.
  • Align text to the left or right, avoiding full or center justified text.
  • Avoid large blocks of text. Use short paragraphs, headings, and lists to divide the information.

Related documentation:

Note: The Web Content Accessibility Guidelines at level AA don’t address readability. Decent readability is considered a recommendation. However, WCAG 2.2 Level AAA has four success criteria for readability: 3.1.3 Unusual Words, 3.1.4 Abbreviations, 3.1.5 Reading level, 3.1.6 Pronunciation.

Proximity

Keep together what belongs together: place related links or controls near each other. For example, place “Save” and “Cancel” buttons next to each other, rather than on opposite sides of the interface.

Make the order of content logical when read from the top down. For example, do not put required check boxes below the Submit button in a form.

Animation

  • 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.

Related documentation:

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