Was wird geprüft?
Alle Texte der App-Ansicht sollen ausreichende Helligkeitskontraste haben.
Warum wird das geprüft?
Wenn Vordergrund- und Hintergrundfarbe keinen ausreichenden Helligkeitsunterschied haben, haben Texte zu wenig Kontrast. Gute Kontraste sorgen dafür, dass Nutzende Texte leichter lesen können. Insbesondere Menschen, die aufgrund einer reduzierten Sehschärfe, einer Farbfehlsichtigkeit oder aufgrund des Alters eine verminderte Kontrastempfindlichkeit haben, profitieren von guten Kontrasten.
Wie wird geprüft?
1. Anwendbarkeit des Prüfschritts
Der Prüfschritt ist anwendbar, wenn die App-Ansicht Text enthält. Grafische Schriften sind ebenfalls Gegenstand des Prüfschritts.
2. Prüfung
Für die Bewertung zählt das Kontrastverhältnis (relative luminosity) nach einer in den WCAG 2.1 definierten Formel, die der Color Contrast Analyzer handhabbar macht.
2.1 Prüfung der Textkontraste der Standardversion
App mit zu prüfender Ansicht öffnen.
Screenshots erstellen (gegebenenfalls vorher die Zoomfunktion nutzen, um eine größere Fläche für die Kontrastmessung zur Verfügung zu haben.):
iOS/iPadOS: Screenshot mit der Tastenkombination Power- und Home-Taste erstellen. Bei Geräten ohne Home-Button nutzt man die Kombination von Power- und Lauter-Taste.
Android: Screenshot mit der Tastenkombination Power- und Leiser-Taste erstellen.
Screenshots an den PC übertragen:
iOS/iPadOS und Android: Gerät mittels USB-Kabel an den Rechner anschließen und im Datei-Explorer auswählen.
Sind die Schriftkontraste stark genug? Screenshots am PC öffnen und im Zweifel mit dem Contrast-Analyzer untersuchen:
Im Bereich Vordergrund mit der Pipette die Vordergrundfarbe auswählen, dann im Bereich Hintergrund die Hintergrundfarbe.
Für Schriftgrößen unter 24 px (beziehungsweise 18,7 px bei fetter Schrift) prüfen, ob das Kontrastverhältnis bei 4,5:1 oder größer liegt (zur Bestimmung der Schriftgröße siehe Abschnitt 3.2 Messungenauigkeiten).
Für große Schriften ist ein Mindestkontrastverhältnis von nur 3:1 gefordert (zur Bestimmung der Schriftgröße siehe wiederum Abschnitt 3.2 Messungenauigkeiten).
2.2. Prüfung der Textkontraste der alternativen kontrastreicheren Ansicht (Styleswitcher-Prüfung)
Wenn die Kontraste der Standardversion nicht die Sollwerte erfüllt und die Ansicht eine kontrastreichere Ansicht über einen Styleswitcher anbietet:
Screenshots erstellen und an den PC übertragen (vergleiche Prüfung der Textkontraste der Standardversion).
Textkontrast des Styleswitcher-Schaltelements prüfen. Das Kontrastverhältnis muss 4,5:1 oder besser sein und auch die anderen Anforderungen müssen erfüllt sein. Sonst abbrechen.
Alternative kontrastreichere Ansicht über den Styleswitcher aufrufen.
Screenshots erstellen und an den PC übertragen.
Textkontraste der alternativen Ansicht prüfen (entsprechend Prüfung der Textkontraste der Standardversion).
3. Hinweise
3.1 Allgemeine Hinweise
Elemente, die unterschiedliche Zustände haben können, sollten immer ausreichend kontrastieren. Das bedeutet, auch die farblich hervorgehobene, aktuell ausgewählte Menüoption oder Links, die in anderen Zuständen in einer anderen Farbe dargestellt werden.
Schwache Kontraste können zweckmäßig sein, sie können den Umgang mit einer App erleichtern. Ein Beispiel: Funktionen, die prinzipiell vorgesehen, aktuell aber nicht verfügbar sind, werden schwach kontrastierend dargestellt. Das ist akzeptabel, wenn das ausgeblendete Element für die Orientierung und Bedienung nicht erforderlich ist. Der Prüfschritt ist daher auf die Beschriftungen ausgeblendeter, deaktivierter Bedienelemente in der Regel nicht anwendbar.
Der Farbkontrast von Textvorbelegungen von Formularfeldern muss die Mindest-Anforderung von 4,5:1 erfüllen. Ausgenommen sind Textvorbelegungen, wenn eine redundante sichtbare Beschriftung die Kontrastanforderung erfüllt. Als Beschriftung zählt bei Suchfeldern auch ein konventionelles Icon, das die Anforderung für Grafikkontraste erfüllt (vergl. Prüfschritt 11.1.4.11 "Kontraste von Grafiken und Bedienelementen ausreichend" ). Wenn zusätzliche Informationen (etwa Datumsformat) im Platzhalter-Text stehen, gilt diese Ausnahme nicht, der Platzhalter-Text muss dann den Kontrast von 4,5:1 erfüllen.
3.2 Messungenauigkeiten
Screenshots geben die tatsächlichen Farben nicht immer richtig wieder (siehe Disskusionsfaden in Webaim Mailing List).
Bei Messungen mittels der Pipette des Color Contrast Analyzers kann es bei kleineren Schriften zu Fehlmessungen kommen: Der Randbereich der Schriften ist wegen des Anti-Aliasings oft näher am Kontrastwert des Hintergrundes. Der Wert scheint dann ungenügend, obwohl er normativ gegebenenfalls ausreicht. Bei App-Screenshots ist es nicht wie bei Web-Angeboten möglich, vor der Messung hineinzuzoomen, um bei einer besseren Schriftstärke eine zuverlässigere Messung vorzunehmen. Bei dynamischen Schriften kann die Erhöhung der Schriftgröße über die Einstellungen in den Bedienungshilfen, vor Erstellung der Screenshots, hilfreich sein. Liegen die gemessenen Werte im Grenzbereich der geforderten Kontrastwerte, sollten diese Unsicherheitsfaktoren berücksichtigt und gegebenenfalls benannt werden.
3.3 Berechnung der Schriftgröße auf Screenshots
Für große und kleine Schriften gelten unterschiedliche Richtwerte. Im Zweifelsfall kann die Schriftgröße annäherend auf folgendem Weg bestimmt werden:
Viewport-Größe (bzw. physische Auflösung und Device Pixel Ratio) des eingesetzten Geräts beispielsweise über die Dokumentation der Spezifikation ermitteln. Beispiel: Ein iPhone 11 hat eine Auflösung von 828 x 1792 pysischen Pixeln und eine Device Pixel Ratio von 2. Der physische Breiten-Wert von 828px wird also übersetzt in eine Viewport-Breite von 828 / 2 = 414 CSS Pixel.
Screenshot in einem Grafik-Programm laden, den Screenshot auf die errechnete CSS Viewport-Breite verkleinern (für das genannte Beispiel 414 CSS Pixel).
Mit Auswahlrechteck des Grafikprogramms die Schrift umschließen - ausschlaggebend sind am besten Großbuchstaben. Unterlängen von Kleinbuchstaben nicht berücksichtigen.
Auf geeignete Weise Höhe des Auswahlrechtecks bestimmen (in Photoshop etwa über Kopieren, dann Datei > Neu, Bearbeiten > Einfügen. Erneut Auswählen. Im Dialog "Bildgröße" (Bild > Bildgröße) wird die Größe des Auswahlrechtecks als Bildgröße vorgeschlagen, die Höhe steht im Feld "Höhe").
Die so ausgewiesene Höhe entspricht ungefähr dem Schriftgrad in Pixeln. Ist sie bei gefetteten Schriften über 18,7 px, muss die Schrift nur einen Kontrast von 3:1 oder besser haben. Bei nicht gefetteten Schriften liegt dieser Schwellenwert bei 24 px.
3.4 Prüfung von Ansichten mit Styleswitcher
Die Kontrastprüfung auf durch Styleswitcher aufgerufenen kontrastreicheren Ansicht erfolgt nur unter folgenden Bedingungen:
Das Style-Switcher-Element ist am Beginn der Ansicht platziert.
Das Schaltelement hat ein Kontrastverhältnis von mindestens 4.5:1 und erfüllt auch die anderen Anforderungen an Barrierefreiheit.
Die alternative kontrastreichere Ansicht muss dieselben Informationen und dieselbe Funktionalität aufweisen wie die Ausgangsansicht.
3.5 Dark Mode Ansichten
Die Prüfung erfolgt in der Standardeinstellung des Betriebssystems. Wenn auf Wunsch des Auftraggebers ein Dark Mode mitgetestet werden soll, ist das natürlich möglich, die Ergebnisse können zusätzlich vermerkt werden. Ausschlaggebend für die Konformität ist aber die Standardansicht. Eine Dark Mode Ansicht wird bei der Feststellung der Konformität nur berücksichtigt, wenn sie explizit als Kontrastversion in der App selbst auswählbar ist, das Bedienelement selbst alle Barrierefreiheitsanforderungen erfüllt, und die Dark Mode Ansicht nicht selbst Kontrastmängel aufweist.
3.6 Berücksichtigung betriebssystemseitiger Einstellungen
Die Ansicht wird ohne die Aktivierung von betriebssystemseitigen Einstellungen wie "Kontrast erhöhen" (iOS) oder "Text mit hohem Kontrast" (Android), also mit Standard-Einstellungen getestet. Solche zusätzlichen Einstellungen sind hilfreich, viele Nutzende wissen jedoch nicht, dass es sie gibt.
4. Bewertung
Erfüllt:
Das Kontrastverhältnis (contrast ratio) zwischen Vorder- und Hintergrundfarbe liegt für Texte unter 18 Punkt (beziehungsweise für fette Texte unter 14 Punkt) bei mindestens 4,5:1.
Das Kontrastverhältnis (contrast ratio) zwischen Vorder- und Hintergrundfarbe liegt bei Texten in großer Schriftgröße (18 Punkt und größer, 14 Punkt und größer bei fetter Schrift) bei mindestens 3:1.
Wenn die Anforderung nur über eine alternative Ansicht erfüllt wird, erfüllt der Styleswitcher selbst die Kontrastforderung von 4,5:1 und andere Anforderungen an Barrierefreiheit.