Umsetzung

• 

  Ausreichend Kontrast von grafischen (Bedien-)Elementen ohne Text

  Grafiken, die wichtig für das Verständnis sind und grafische Bedienelemente (z. B. Formularfelder oder Icon-Buttons) brauchen einen Kontrast von 3:1 zum Hintergrund.

  WCAG-Technik(en) in Englisch:

  • G207: Sorge für einen Mindestkontrast von 3:1 für wichtige Icons

• 

  Ausreichend Kontrast von Bedienelementen mit Text

  Wenn ein Bedienelement einen Text hat und dieser Text kontrastreich genug ist (4,5:1), dann kann auf den visuellen Kontrast des grafischen Teils verzichtet werden.

  Beispiele:

  1. Button mit Text: Wenn der Textkontrast reicht, muss der Button selbst keinen Mindestkontrast von 3:1 zum Hintergrund haben.
  2. Inputfeld mit Placeholder: Wenn der Textkontrast vom Placeholder genügt, muss der Rahmen keinen Mindestkontrast von 3:1 zum Hintergrund haben.

  WCAG-Technik(en) in Englisch:

  • G18: Erreiche ein Kontrastverhältnis von mindestens 4,5:1 zwischen Text und Hintergrund

• 

  Ausreichend Kontrast von Fokusindikatoren

  Wenn ein Element per Tastatur angesteuert wird (z. B. per Tab-Taste), muss der sichtbare Fokusindikator gut erkennbar sein und einen Kontrast von mindestens 3:1 zum Hintergrund haben.

  Eventuell muss der native Browserfokus überschrieben werden, wenn der Kontrast davon geringer als 3:1 ist.

  Mehr dazu im Artikel von Sara über Fokusindikatoren (englisch).

  WCAG-Technik(en) in Englisch:

  • G195: Verwendung eines vom Autor bereitgestellten, sichtbaren Fokusindikators

• 

  Ausreichend Kontrast von angrenzenden Flächen

  Benachbarte Farbflächen, die für das Verständnis wichtig sind – etwa in Diagrammen oder Infografiken – brauchen einen Mindestkontrast von 3:1 zueinander.

  Ist der Kontrast geringer, kann zum Beispiel ein Rahmen mit einem Mindestkontrast von 3:1 zu jeder angrenzenden Farbe helfen.

  WCAG-Technik(en) in Englisch:

  • G209: Ausreichenden Kontrast an den Grenzen zwischen benachbarten Farben.

Anmerkungen

• 

  Ausnahme: Grafische Inhalte ohne Bedeutung

  Dekorative Grafiken ohne Informationsgehalt müssen keine Kontrastanforderungen erfüllen. Hierzu zählen auch Grafiken, die zusätzlich zum erklärenden Text verwendet werden.

  Beispiel: Brief-Icon neben dem Text „E-Mail schreiben“.

• 

  Ausnahme: Bedienelemente sind disabled

  Auch Bedienelemente im Zustand disabled sind ausgenommen.

  Beispiel: Ein ausgegrauter Button auf einer Formularseite, der erst aktiv wird, wenn alle Felder ausgefüllt sind. Dieser muss im ausgegrauten Zustand keine Mindestfarbkontraste erfüllen. Sobald er aber aktiv wird, gelten die normalen Kontrastanforderungen.

• 

  Hinweis: Logos

  Bei Logos kommt es auf die Verwendung an: Ist das Logo auch ein Bedienelement (Link zur Startseite), muss es auch einen Kontrast von mindestens 3:1 zum Hintergrund haben.

  Besteht ein Logo aus Bild und Text, gelten die Kontrastanforderungen nur für die Teile, die inhaltlich relevant sind, um es zu erkennen. Diese müssen dann einen Kontrast von mindestens 3:1 zum Hintergrund haben. Dekorative Elemente im Logo, die keine Bedeutung für Inhalt oder Funktion haben (z. B. abstrakte Formen, rein grafische Verzierungen), müssen diese Anforderungen nicht erfüllen.