Visual Design

You design the visual appearance of the product.

• Structure the content

  Ensure that the most important information can be identified at first glance. Use a simple structure, clear hierarchies and keep in mind the reading order. Ensure that the page remains comprehensible even when zoomed to 200%. Testing: Use the zoom function in your browser or on your phone.
  Reference: https://www.w3.org/TR/WCAG21/#resize-text

• Ensure sufficient contrast

  The contrast between text and background must be at least 4.5:1. For the interface and other non-text elements that are important to understanding, a minimum contrast of 3:1 applies. Take particular care with background images, avoid them whenever possible.
  Testing: Colour Contrast Analyser https://developer.paciellogroup.com/resources/contrastanalyser
  Reference 1: https://www.w3.org/TR/WCAG21/#contrast-minimum
  Reference 2: https://www.w3.org/TR/WCAG21/#non-text-contrast

• Ensure sufficient size

  Ensure that all touch targets have a size of at least 44 x 44 pixels. Also, use sufficiently sized and clearly legible fonts without serifs. As a rule of thumb, a size of at least 16 pixels is recommended.
  Testing: Measure using the relevant developer tools.
  Reference: https://www.w3.org/TR/WCAG21/#target-size

• Make the focus clear

  Structure the keyboard focus so that it is obvious where the user is in each situation. As an example, go to sbb.ch and press the Tab button several times.
  Testing: Take away the mouse or connect an external keyboard to your phone.
  Reference: https://www.w3.org/TR/WCAG21/#focus-visible