WCAG Erfolgskriterien
WCAG 2.1 AA

Erfolgskriterium 1.4.11
Nicht-textueller Kontrast
[Materialsammlung]

Grafische Elemente benötigen als Komponenten der Benutzeroberfläche, von Diagrammen und Ähnlichem in der Regel einen Mindestkontrast zu benachbarten Flächen.

WCAG Kontext

Konformitätsstufe AA

Prinzip 1. Wahrnehmbar Perceivable

Informationen und Steuerelemente müssen in einer technisch darstellbaren Weise wahrnehmbar sein.

Richtlinie 1.4 Unterscheidbar

Mach es einfacher, Inhalt zu sehen und zu hören, die Trennung von Vordergrund und Hintergrund eingeschlossen.

Erläuterungen zum Kontext

Die Richtlinien 1.4.3 und 1.4.6 legen den Minimalkontrast in unterschiedlichen Konformitätsstufen für Text fest. In diesem Erfolgskriterium wird seit WCAG 2.1 der Mindestkontrast auch explizit für Icons und Grafiken verlangt.

Strukturierende Übersetzung des Erfolgskriteriums

Folgende Elemente weisen in ihrer visuellen Präsentation ein Kontrastverhältnis von mindestens 3∶1 zu benachbarten Farben auf:

Komponenten der Benutzeroberfläche
Visuelle Informationen, die erforderlich sind, um Komponenten der Benutzeroberfläche oder Zustände zu erkennen.
    Ausnahmen:
  1. Inaktive Komponenten.
  2. Das Erscheinungsbild der Komponente wird durch Browser bestimmt und wird darüber hinaus nicht verändert.
Grafische Objekte
Teile von Grafiken, die zum Verständnis des Inhalts erforderlich sind.
Ausnahme:
Eine spezielle Präsentation auf der Grafik ist für den dargestellten Inhalt essentiell.
Englischsprachiger Originaltext des Erfolgskriteriums

The visual presentation of the following have a contrast ratio of at least 3:1 against adjacent color(s):

User Interface Components
Visual information required to identify user interface components and states, except for inactive components or where the appearance of the component is determined by the user agent and not modified by the author;
Graphical Objects
Parts of graphics required to understand the content, except when a particular presentation of graphics is essential to the information being conveyed.

Anmerkungen zur Übersetzung

Die Ausnahmen wurden explizit formuliert.

Zum raschen Verständnis

Die benachbarte Farbe eines Schalters ist nach außen hin der Hintergrund des Bereichs. Der Schalter muss daher zum Hintergrund einen entsprechenden Kontrast aufweisen. Dies kann bei Problemen durch eine Umrandung des Schalters gelöst werden.

Emojis, ASCII-Art und ähnliche Elemente fallen als nicht-textueller Inhalt unter dieses Erfolgskriterium.

Zielgruppen

Das Erfolgskriterium dient Menschen mit Sehbeeinträchtigungen.

Tipps zum Prüfverfahren

Maschinelle Prüfung

Maschinelle Tools zur Prüfung der Barrierefreiheit können für Grafiken oder Hintergrundbilder relevante Farbwerte für Inhalt und Hintergrund noch nicht automatisiert identifizieren.

Manuelle Prüfung

Zum Ermitteln von Kontrastverhältnissen ist es nötig den technischen Farbwert zu ermitteln. Teilweise ist daher eine pixelgenaue Identifizierung von technischen Farbwerten mit eigenen Analysewerkzeugen erforderlich. Diese erfolgt durch Bewegen der Maus auf dem Bildschirm.

Firefox Farbpipette

Zur Ermittlung des Farbwerts eines Pixel steht in Firefox die Farbpipette zur Verfügung. Ist diese aktiviert, können Farbwerte im aktuellen Firefox-Fenster eruiert werden.

Gehe folgendermaßen vor: (MF Version 89):

  1. Scrolle im Firefox-Fenster zum Bereich, den du prüfen möchtest.
  2. Wähle im Menü Extras den Befehl Browser-Werkzeuge.
  3. Aktiviere die Farbpipette durch einen Klick auf den Menübefehl. Am Bildschirm erscheint nun ein Kreis mit einem Raster, den du mit der Maus bewegen kannst
  4. Führe die Maus exakt auf den Bereich, den du prüfen möchtest.
    Unter dem Kreis erscheint der Farbwert beginnend mit einem # (z.B. #ffffff für Weiß, …).

Die entsprechende Abfolge bei der Tastaturbedienung lautet:

Alt, X, B , F

Der ermittelte Wert muss nun mit relevanten benachbarten Werten auf Kontrast hin geprüft werden. Dies kann effizient mit dem Tool Color Ratio erfolgen.

Prüfung durch betroffene Menschen (Peer Evaluation)

Für blinde Menschen sind Tools zur Ermittlung der Farbwerte nur mit persönlicher Assistenz bedienbar. Die Prüfung dieses Erfolgskriteriums setzt also ein entsprechendes Sehpotential voraus. Mit einer Vergrößerungssoftware können jedoch auch sehbehinderte Fachkräfte die Tools verwenden.


Baustellenschild

Seite in Aufbau

Sie werden bemerken, dass diese Seite noch nicht fertig ist. Inhalte und Funktionalitäten sind noch nicht gänzlich verfügbar. Sie können aber gerne um die Baustelle herumgehen und den Fortschritt beobachten. Das Betreten der Baustelle ist erlaubt und völlig ungefährlich!