WCAG 2.1, 1.4.11, AA

Kontrast von Nicht-Text-Inhalten

  • WCAG: 2.1
  • Stufe: AA
  • Thema: Kontrast und Sensorik

Bedienelemente (z.B. Textfelder, Radiobuttons, Checkboxen, Schalter, Tabs) und grafische Elemente (z.B. Linien eines Diagramms) müssen sich farblich durch genügend Kontrast vom Hintergrund abheben. Dies ermöglicht es Menschen mit Sehbeeinträchtigung, dieselben wahrnehmen zu können.

Verstehen

Menschen mit Sehschwäche und Fehlsichtigkeit sind darauf angewiesen, dass sich Elemente gut sichtbar vom Hintergrund abheben. Deshalb müssen Bedienelemente und grafische Elemente einen ausreichend hohen Kontrastwert zum Hintergrund aufweisen.

Jeder visuelle Hinweis, der für die Wahrnehmung und Bedienung erforderlich ist, insbesondere auch um den Zustand eines Elements zu interpretieren, muss einen Kontrastwert von mindestens 3:1 aufweisen. Das gilt z.B. für Formularfeldbegrenzungen, Ausklappindikatoren bei Dropdowns, Häkchen in einer Checkbox, etc. Wenn zudem die Farbe eines Bedienelements ändert (etwa bei Fokus oder Aktivierung), dann muss auch diese Farbe die Kontrastmindestanforderung erfüllen. Der Hover-Zustand eines Elements muss nicht unterscheidbar sein vom Standard-Zustand.

Für Schalter wird empfohlen, den klickbaren Bereich ebenfalls ausreichend kontraststark zu umranden. Solange allerdings aufgrund von Position, Schriftart, etc., ein Schalter klar als solcher wahrnehmbar ist, ist eine kontraststarke Beschriftung ausreichend. Bei Textfeldern mit kontraststarkem Platzhaltertext bestehen keine Kontrastanforderungen an die Feldbegrenzungslinien.

Ausreichende Kontraste in und von grafischen Elementen bedeuten, dass jeder visuelle Hinweis, der für die Wahrnehmung und die Bedienung erforderlich ist, einen Kontrastwert von mindestens 3:1 aufweisen muss. Gemeint sind damit z.B. Kurven und Linien eines Diagramms, darin enthaltene Symbole, Beschriftungen, etc.

Hinweis: Die Anforderungen an den Mindestkontrast gelten nur für sinntragende, informative grafische Elemente; rein dekorative Grafiken sind also nicht gemeint. Siehe diesbezüglich auch 1.4.3.

Ausnahme: Ausgenommen sind inaktive Bedienelemente (disabled-Attribut).

Tipp: Zerlegen Sie komplexe Grafiken in ihre kleinsten aussagekräftigen Teile. Prüfen Sie für jedes Teil dessen Kontrast zu den angrenzenden Farben.

Verantwortlichkeiten

  • Das Designteam definiert eine Palette von Vorder
  • und Hintergrundfarben, die in den benötigten Kombinationen genügend Kontrast aufweisen.
  • Das Entwicklungsteam setzt die vom Designteam definierten Vorgaben korrekt um.
  • Die Inhaltsverantwortlichen gestalten Inhalte so, dass diese genügend Kontrast aufweisen.
  • Auftraggebende sollten sich bewusst sein, dass kontraststarke Designs (auch über die Mindestanforderungen hinaus) ein Vorteil für alle Sehenden sind.

WCAG-Text

Die visuelle Darstellung der folgenden Elemente hat ein Kontrastverhältnis von mindestens 3:1 gegenüber der/den benachbarten Farbe(n):

- Komponenten der Benutzerschnittstelle: Visuelle Informationen, die erforderlich sind für die Identifizierung von Komponenten und Zuständen der Benutzerschnittstelle, ausser bei inaktiven Komponenten oder wenn das Aussehen der Komponente vom Benutzeragenten bestimmt und nicht vom Autor geändert wird;

- Grafische Objekte: Teile von Grafiken, die zum Verständnis des Inhalts erforderlich sind, es sei denn, eine bestimmte Darstellung von Grafiken ist für die zu vermittelnde Information unerlässlich.

Text-Beispiel

Siehe 1.4.3