Zur Navigation Zum Inhalt Kontakt Menu Prinzipien Grundlagen Barrierefreiheit Design System Guidelines Deutsch Français Italiano English Unsere Gestaltungsprinzipien Nutzerzentriert Wiedererkennbar Inklusiv Reduziert Ganzheitlich Selbsterklärend Aufgabenorientiert Passend SBB Markenportal Logo Digitale Uhr Nutzungsrechte Basis-Farben Funktionale Farben Off-Brand Farben Icons Fahrplan-Icons Piktogramme Über Barrierefreiheit Über diesen Guide Kontakt Weitere Informationen Product Owner User Research Interaction Design Visual Design Development Content Design Testing Was ist ein Design System?​ Designing Coding FAQ Hilfe Prozess Contribution Kontakt Übersicht Basis Komponenten Übersicht Basis Komponenten Übersicht Basis Komponenten Übersicht Releases Design Tokens Komponenten Übersicht Basis Informationen Sinn & Zweck Community Assets Anleitung Power-Apps Digitale Werbebanner SAP App Icons 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

Impressum Kontakt Cookie Einstellungen