Der Prüfschritt ist anwendbar, wenn informationstragende grafische Bedienelemente oder informationstragende Grafiken vorhanden sind.

Wie wird geprüft

Ist ein Mindestkontrast von 3:1 für informationstragende Grafiken oder grafische Bedienelemente, in allen verfügbaren Interaktionszuständen (Aktivierung, Fokussierung), zu den angrenzenden Farben vorhanden?

Alle Elemente der Benutzeroberfläche prüfen. Wenn Grafiken Informationen vermitteln, müssen diese ebenfalls die Anforderung erfüllen.

Die Anforderung gilt nicht für

  • Bedienelemente, die aktuell nicht zur Verfügung stehen und „ausgegraut“ dargestellt sind
  • Symbole, die mit ausreichendem Kontrast beschriftet sind
  • Symbole, bei denen eine bestimmte Farbgestaltung wesentlich ist, z.B. für Logos und Bilder
  • native grafische Bedienelemente, die nicht durch Software gestaltet wurden, bspw. native HTML-Checkboxen

Testvorgehen

  • Die Anwendung mit dem Standard-Farbschema verwenden.
  • Sichtprüfung: haben alle Symbole der Anwendung einen ausreichenden Helligkeitskontrast? Wird gesättigtes Rot in Kombination mit Schwarz vermieden?
  • Mit einem Prüftool, bspw. „Colour Contrast Analyser“ (siehe Werkzeugliste), überprüfen, ob der Mindestkontrast erfüllt wird.
  • Ist der Kontrast bei allen Formularfeldern ausreichend, bspw. Checkbox-Haken zu Checkbox-Hintergrund,
    Rahmen bei Eingabefeldern zum Hintergrund (sofern kein Platzhalter/Vorbelegung mit gutem Kontrast vorhanden ist).
  • Bei mehrfarbigen Icons relevante Farbübergänge gegen den Hintergrund als Vordergrund auswählen.
  • Falls der Helligkeitskontrast nicht ausreicht, prüfen, ob in der Dokumentation ein alternatives Farbschema oder die Übernahme eines Windows-Farbschemas beschrieben wird. Falls ja, wie oben beschrieben überprüfen, ob das alternative Farbschema einen ausreichenden Helligkeitskontrast hat.
    Falls das alternative Farbschema über einen Schalter erreichbar ist, sollte dieser im Standardfarbschema mindestens einen Kontrast von 3:1 aufweisen.
    Das Farbschema sollte mit dem gewählten Farbeschema aus Prüfschritt 1.4.3 „Kontraste von Texten“ übereinstimmen.

Beispiele

  • Schaltflächen oder Eingabefelder sind durch einen Rahmen identifizierbar, der deutlich sichtbar ist.
  • Bedienelemente besitzen einen ausreichenden Kontrast zum Hintergrund oder einen deutlichen Rahmen.
  • Weitere Beispiele finden Sie auch bei W3C: Understanding Success Criterion 1.4.11: Non-text Contrast

Anforderung (Beschreibung)

Die visuelle Darstellung der folgenden Elemente hat ein Kontrastverhältnis von mindestens 3:1 zu benachbarten Farben:

  • Komponenten der Benutzeroberfläche
    Visuelle Informationen, die erforderlich sind, um Komponenten und Zustände der Benutzeroberfläche zu identifizieren, mit Ausnahme inaktiver Komponenten oder wenn das Erscheinungsbild der Komponente vom Benutzeragenten bestimmt und vom Autor nicht geändert wird.
  • Grafische Objekte
    Teile von Grafiken sind erforderlich, um den Inhalt zu verstehen, es sei denn, eine bestimmte Präsentation von Grafiken ist für die übermittelten Informationen wesentlich.

Warum wird das geprüft

Nutzer mit einer Sehbehinderung benötigen ausreichende Kontraste, um grafische Bedienelemente oder deren Zustände wahrnehmen zu können.

Einordnung (Abgrenzung)

Der Kontrast von Texten ist Bestandteil von Prüfschritt 1.4.3.

Verweise (Referenzen)

  • EN 301549 v3.2.1 Kap. 11.1.4.11 Non-text contrast
  • WCAG v2.1 Kap. 1.4.11 Non-text contrast