Umsetzung

• 

  Bedienelemente ohne Text

  Sobald bei einem interaktiven Element visuelle Merkmale (z. B. Rahmen, Hintergrundfarbe, Icon) nötig sind, um ihn als Bedienelement zu erkennen, müssen diese einen Kontrast von 3:1 zum angrenzenden Hintergrund haben.

  WCAG-Technik(en) in Englisch:

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

• 

  Bedienelemente mit Text

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

  Beispiele:

  1. Button mit Text: Wenn ein Button einen Text hat, dessen Kontrast ausreicht, dann muss der Button an sich zum Hintergrund nicht den Kontrast von 3:1 haben. 
  2. Inputfeld mit Placeholder: Wenn der Rahmen eines Inputfelds nicht den Kontrast von 3:1 zum Hintergrund hat, aber dafür einen verständlichen Placeholder, der den Kontrast von 4,5:1 zum Hintergrund einhält, reicht der Placeholder als erkennbares Element aus. 
  3. Ein klickbares Element einer Liste: Der Rahmen von klickbaren Elementen in einer Liste muss auch keine Kontrastanforderungen erfüllen, solange die Texte es tun.

  Auch wenn das in der Theorie möglich ist, würden wir stark davon abraten!

  WCAG-Technik(en) in Englisch:

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

• 

  Fokusindikator bei Tastaturnutzung

  Wenn ein Element per Tastatur angesteuert wird (z. B. mit der Tab-Taste), muss der sichtbare Fokusindikator gut erkennbar sein und einen Kontrast von mindestens 3:1 zum Hintergrund haben. Das bedeutet auch, dass eventuell der native Browserfokus überschrieben werden muss, wenn der Kontrast davon geringer als 3:1 ist.

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

  WCAG-Technik(en) in Englisch:

  • Technik G195: Verwendung eines vom Autor bereitgestellten, sichtbaren Fokusindikators

• 

  Kontraste an Grenzen benachbarter Flächen

  Benachbarte Farbflächen, die wichtig für das Verständnis sind (beispielsweise bei Diagrammen oder Infografiken), brauchen einen ausreichenden Farbkontrast von mindestens 3:1 zueinander.

  Wenn der Kontrast zwischen zwei Farben geringer ist, kann zum Beispiel ein Rahmen helfen, der einen Kontrast von 3:1 zu jeder Farbe hat.

  WCAG-Technik(en) in Englisch:

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

Anmerkungen

• 

  Ausnahme: Inhalte ohne Bedeutung

  Dekorative Elemente oder Grafiken ohne Informationsgehalt sind nicht betroffen. Auch Symbole, die nur zusätzlich zum erklärenden Text verwendet werden, müssen den Kontrast nicht erfüllen, solange sie keine zusätzlichen, „wichtigen“ Informationen liefern.

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

• 

  Ausnahme: Bedienelemente sind disabled

  Bedienelemente, die den Zustand disabled haben, sind hier ausgenommen – sie sind zwar sichtbar, aber derzeit nicht bedienbar.

  Beispiel: Ein ausgegrauter Button auf einer Formularseite, der erst aktiv wird, wenn alle Felder ausgefüllt sind, braucht keinen Farbkontrast. Sobald er aber aktiv wird, gelten die normalen Anforderungen.

• 

  Hinweis: Logos

  Bei Logos kommt es auf die Verwendung an: Ist das Logo auch ein Bedienelement (wie ein Link zur Startseite), muss 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. 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. Hier reicht es aus, wenn nur der Text die Anforderungen erfüllt. 

  Bei rein dekorativen Logos gelten die Kontrastanforderungen ebenfalls nicht.