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 Releases Design Tokens Komponenten Übersicht Basis Informationen Übersicht Basis Komponenten Sinn & Zweck Community Assets Anleitung Power-Apps Digitale Werbebanner SAP App Icons Image

Was macht die Komponente?

  • Bilder unterstützen das Verständnis von Texten.

Wann soll die Komponente eingesetzt werden?

  • Zur Unterstützung der textuellen Kommunikation können Bilder eingesetzt werden (visuelle Kommunikation).

Regeln

  • Die Aufbereitung von Bildern und Illustrationen ist durch die Vorgaben von KOM geregelt. Siehe Markenportal: Foto und Illustration.

  • Grundsätzlich soll mit Bildern sparsam umgegangen werden.

Varianten und Zustände

Bei Bildern werden folgende Stile unterschieden:

  • Fotografie
  • Illustration
  • Infografik

Barrierefreiheit

  • Text zu Hintergrund (z.B. Infografiken) muss einen minimalen Kontrast von 4.5:1 aufweisen.
  • Grafiken mit Informationsgehalt müssen mit einem Alternativtext versehen werden.
  • Es muss nicht das Bild selbst, sondern seine Aussage in Textform beschrieben werden.
  • Rein dekorative Grafiken (z.B. Mood Bilder) erhalten explizit keinen Alternativtext.
  • Komplexe visuelle Darstellungen (z.B. Infografiken) müssen zusätzlich in einer anderen Form (z.B. Tabellen) aufbereitet werden.
Kontakt

Haben Sie Fragen? Evtl. Hilft unser FAQ oder unsere Hilfe weiter, ansonten können Sie Ihre Frage gerne im entsprechenden Board auf Github platzieren.

Impressum Kontakt Datenschutz Cookie Einstellungen