Visual Design

Du gestaltest die visuelle Erscheinung des Produkts.

Strukturiere die Inhalte

Stelle sicher, dass die wichtigsten Informationen auf den ersten Blick erkannt werden. Nutze eine einfache Struktur, klare Hierarchien und beachte die Lesereihenfolge. Achte darauf, dass die Seite auch mit 200% Zoom vollständig verständlich bleibt.

Testen: Nutze die Zoomfunktion in deinem Browser oder auf deinem Mobile.

Referenz: https://www.w3.org/TR/WCAG21/#resize-text

Achte auf genügend Kontrast

Der Kontrast von Text zum Hintergrund muss mindestens 4.5:1 betragen. Für Interface und andere Nicht-Text Elemente welche wichtig für das Verständnis sind, gilt ein minimaler Kontrast von 3:1. Vorsicht besonders bei Hintergrundbildern, verzichte wenn immer möglich darauf.

Testen: Color Contrast Analyzer https://developer.paciellogroup.com/resources/contrastanalyser

Referenz 1: https://www.w3.org/TR/WCAG21/#contrast-minimum
Referenz 2: https://www.w3.org/TR/WCAG21/#non-text-contrast

Achte auf genügend Grösse

Achte darauf, dass alle Touch-Targets mindestens eine Grösse von 44 x 44 Pixeln aufweisen. Verwende zudem genügend grosse, gut lesbare Schriften ohne Serifen. Als Faustregel wird mindestens eine Grösse von 16 Pixel empfohlen.

Testen: Mit den jeweiligen Developer Tools ausmessen.

Referenz: https://www.w3.org/TR/WCAG21/#target-size

Mache den Fokus sichtbar

Gestalte den Tastaturfokus so, dass für die Nutzerinnen und Nutzer in jeder Situation ersichtlich ist, wo sie sich gerade befinden. Gehe als Beispiel auf sbb.ch und drücke mehrmals die Tab-Taste.

Testen: Lege die Maus weg oder schliesse eine externe Tastatur an dein Mobile an.

Referenz: https://www.w3.org/TR/WCAG21/#focus-visible