Skip to main content

Design

TL:DR​

When validating designs ask yourself the following questions:

  • Is text readable and clear?
  • Is color contrast sufficient?
  • Are icons supported with text?
  • Are actions clearly described?
  • Is enough context provided?

Validating designs as a developer​

Use this checklist to ensure that designs are accessible and WCAG compliant before starting implementation. Always collaborate with designers to resolve any potential issues early in the process.

Color​

  • Does the interface remain functional and understandable if all color is removed?
  • Is the contrast ratio sufficient for all text elements and interactive components?

Text​

  • Is the text legible without zooming? Ensure body text is at least 16 pixels.
  • Is there sufficient breathing room between lines? Aim for a line-height between 1.4 and 1.6.
  • Is the line length optimized for readability? Ideally, aim for approximately 20 to 25 words per line.
  • Is the information hierarchy clear and easy to follow at a glance?

Content clarity​

  • Can users understand how to interact with the interface without needing additional instructions?
  • Does every action clearly describe its expected outcome?
  • Do error messages clearly explain both the problem and the recommended solution?
  • Is the terminology for actions consistent across the entire interface?
  • Can the interface be understood without relying on specific prior knowledge or context?

Icons​

When evaluating icons for implementation, consider the following:

  • Can the meaning be understood without the icon? If yes, the icon is decorative. Use aria-hidden="true".
  • Is the icon the only way to understand the action? If yes, the icon is functional. Provide a clear label using aria-label or visible text.
  • Is the icon interactive? If yes, it must be wrapped in a semantic button or link element rather than being a standalone SVG.
  • Is the icon only supporting adjacent text? If yes, it is decorative and does not require an additional label.
  • Does the icon rely on user recognition of its symbol? If yes, consider adding text to ensure the meaning is explicit.