Farbkontrast und Barrierefreiheit nach WCAG: 4.5:1 und 3:1 erklärt

Die Farbkontrast-Grenzwerte der WCAG für Text

Kriterium 1.4.3 gilt für die visuelle Darstellung von Text und Textgrafiken. Der allgemeine Grenzwert liegt bei 4.5:1. Großer Text und Grafiken von großem Text haben einen niedrigeren Grenzwert von 3:1, weil größerer Text mit breiteren Strichen auch bei geringerem Kontrast leichter lesbar ist.

Die Werte sind als Schwellenwerte zu behandeln: Laut W3C sollte das berechnete Verhältnis nicht gerundet werden, 4.499:1 erreicht die Schwelle von 4.5:1 also nicht.

Die Zahlen sind begründet. Das W3C weist darauf hin, dass 3:1 das von ISO 9241-3 und ANSI/HFS 100-1988 empfohlene Minimum für Standardtext und normales Sehvermögen ist. 4.5:1 gleicht den Verlust an Kontrastempfindlichkeit aus, der mit einer Sehschärfe von etwa 20/40 einhergeht: 3 × 1,5 = 4,5. Nach derselben Logik erfordert eine Sehschärfe von 20/80 etwa 7:1 – das Verhältnis des AAA-Kriteriums 1.4.6.

• Normaler Text und Textgrafiken: mindestens 4.5:1 (Stufe AA).
• Großer Text und Grafiken von großem Text: mindestens 3:1 (Stufe AA).
• Stufe AAA (Kriterium 1.4.6): Verhältnis 7:1.
• Visuelle Informationen zum Erkennen von Bedienelementen und Zuständen sowie zum Verständnis nötige Grafikteile: mindestens 3:1 (Kriterium 1.4.11).

Was gilt in den WCAG als großer Text?

Die WCAG definieren großen Text als mindestens 18 Punkt, mindestens 14 Punkt fett oder eine entsprechende Größe bei chinesischen, japanischen und koreanischen Schriften. Gemeint sind CSS-Punkte: 1pt = 1,333px, also entsprechen 14pt und 18pt etwa 18,5px und 24px.

Bei vielen gängigen Fließtextschriften entsprechen 14 und 18 Punkt ungefähr 1,2 und 1,5 em bzw. 120 % und 150 % der Standardgröße des Fließtexts; laut W3C muss das aber für die tatsächlich verwendete Schrift geprüft werden. Bei der Prüfung ist die Punktgröße vom Browser abzufragen oder aus den Schriftmetriken so zu berechnen, wie der Browser es tut. Maßgeblich ist die Größe bei der Auslieferung, nicht eine Vergrößerung durch die Nutzenden.

Vorsicht bei sehr dünnen oder ungewöhnlichen Schriften: Sie sind besonders bei geringem Kontrast schwerer lesbar, und Kantenglättung (Anti-Aliasing) kann sie viel blasser darstellen als die in CSS definierte Farbe. Dann besteht der Text formal, ist aber in der Praxis schlecht lesbar; empfehlenswert sind eine Schrift mit kräftigeren Strichen oder Farben, die das Minimum übertreffen.

Ausnahmen: Logos, dekorativer Text und inaktive Bedienelemente

Kriterium 1.4.3 stellt in einigen genau umrissenen Fällen keine Kontrastanforderung. Die Ausnahmen sind eng: Das W3C betont, dass Text, dessen Kontrast wegen Corporate Identity oder Markenrichtlinien zu gering ist, über Logos hinaus nicht ausgenommen ist.

Selbst ein Logo verliert die Ausnahme, wenn der geringe Kontrast eine Entscheidung der Autorin oder des Autors ist und keine Markenvorgabe. Beispiel des W3C: Firmenlogos, die standardmäßig kontrastarm angezeigt werden, bis man mit der Maus darüberfährt, erfüllen das Kriterium nicht. Dient ein Logo als Link oder Bedienelement, wird empfohlen, eine ausreichend kontrastreiche Variante zu wählen, sofern die Markenrichtlinien das erlauben, oder ein gleichwertiges Element anzubieten, das die Anforderungen erfüllt.

• Logos: Text, der Teil eines Logos oder Markennamens ist.
• Reine Dekoration: Text ist nur dann rein dekorativ, wenn seine Wörter umgestellt oder ersetzt werden können, ohne ihren Zweck zu ändern – etwa zufällige, sehr helle Wörter im Hintergrund eines Wörterbuch-Umschlags.
• Inaktive Bedienelemente: zum Beispiel ein sichtbarer Absende-Button, der erst aktiviert werden kann, wenn alle Pflichtfelder ausgefüllt sind.
• Text, der für niemanden sichtbar ist, oder Text in einem Bild, das bedeutende andere visuelle Inhalte enthält, etwa ein Straßenschild, das zufällig auf einem Foto zu sehen ist.

Textkontrast und Kontrast von Bedienelementen (1.4.11)

Kriterium 1.4.11, ebenfalls Stufe AA, verlangt mindestens 3:1 gegenüber angrenzenden Farben für zwei Dinge: visuelle Informationen, die nötig sind, um Bedienelemente und ihre Zustände zu erkennen (außer bei inaktiven Elementen oder wenn das Aussehen vom Browser bestimmt und nicht verändert wurde), und Teile von Grafiken, die zum Verständnis des Inhalts nötig sind (außer wenn eine bestimmte Darstellung für die Information wesentlich ist).

Konkret müssen der Rahmen eines Eingabefelds, das Häkchen einer Checkbox oder der Pfeil eines Dropdowns 3:1 erreichen, wenn sie das Element oder seinen Zustand erkennbar machen. Das gilt auch für einen von der Website gestalteten Fokusindikator; der unveränderte Standard-Fokusstil des Browsers ist vom Verhältnis ausgenommen, muss aber sichtbar bleiben. Das W3C nennt Zahlen: Eine Checkbox mit grauem Rahmen #9D9D9D auf Weiß (2,7:1) scheitert, ein Feld mit Rahmen #767676 auf Weiß besteht. Ein selbst gestalteter Fokusindikator in #AAA mit 2,3:1 auf Weiß scheitert ebenfalls.

Das Kriterium verlangt keinen sichtbaren Rahmen um jeden Button: Enthält ein Bedienelement Text oder ein ausreichend kontrastreiches Icon, muss die klickbare Fläche nicht umrandet sein. Ein ausreichend kontrastreicher Fokusindikator ist trotzdem nötig. Selbst hinzugefügte Hover-Effekte müssen nicht 3:1 erreichen, solange dadurch weder das Element noch die Indikatoren anderer Zustände wie Fokus oder Auswahl ihren ausreichenden Kontrast verlieren.

Bei Grafiken muss jede Linie eines Diagramms oder jedes Tortenstück, das zum Verständnis nötig ist, 3:1 erreichen. Das entfällt, wenn Beschriftungen und Werte als Text dieselbe Information liefern, wenn die Information in anderer Form vorliegt, etwa als Tabelle, oder wenn die Darstellung wesentlich ist: Flaggen, Fotos, Screenshots, Heatmaps. Text in einer Grafik unterliegt weiterhin 1.4.3. Stark stilisierter Text oder Zeichen, die als Symbole dienen – etwa ein „X“ zum Schließen oder ein „>“ als Pfeil – fallen unter den Nicht-Text-Kontrast.

So messen Sie den Farbkontrast einer Seite

Das Verhältnis berechnet sich als (L1 + 0,05) / (L2 + 0,05), wobei L1 die relative Leuchtdichte der helleren und L2 die der dunkleren Farbe ist. Es reicht von 1:1 bis 21:1. Der Kontrast wird so berechnet, dass der Farbton kein entscheidender Faktor ist. Werkzeuge rechnen das automatisch aus; das W3C nennt mehrere, etwa Colour Contrast Analyser, nur zur Information und ohne Empfehlung.

Für ein verlässliches Ergebnis verwenden Sie die Farben aus dem Browser oder aus Markup und Stylesheets, nicht die Pixel auf dem Bildschirm, die durch Kantenglättung verfälscht sein können. Für 1.4.3 gilt: Ist keine Hintergrundfarbe angegeben, wird Weiß angenommen. Eine Textfarbe ohne Hintergrundfarbe festzulegen oder umgekehrt, ist jedoch selbst ein Fehler (F24), weil die Standardfarbe der Nutzenden unbekannt ist. Ein Hintergrundbild, das nicht ausreichend mit dem darüberliegenden Text kontrastiert, ist ein weiterer dokumentierter Fehler (F83).

• Prüfen Sie auch Platzhaltertext (Placeholder) und Text, der bei Hover oder Fokus erscheint: 1.4.3 deckt ihn ab.
• Ermitteln Sie für jedes Bedienelement (Link, Button, Feld) die visuellen Hinweise auf seine Existenz und seinen Zustand, und testen Sie sie beim Laden der Seite und dann in jedem Zustand.
• Prüfen Sie bei jeder informativen Grafik jedes grafische Objekt gegen seine angrenzenden Farben; hat es mehrere Farben oder einen Verlauf, testen Sie den kontrastärmsten Bereich, und liegt dieser unter 3:1, stellen Sie sich ihn unsichtbar vor: Ist das Objekt noch verständlich?
• Nehmen Sie bei einem Farbverlauf die Farbe in der Mitte des Bereichs, der für das Verständnis nötig ist, und fragen Sie, ob das Objekt ohne die unzureichende angrenzende Farbe erkennbar bleibt.

Häufige Fragen

Weiterlesen bei Conformly

• Unzureichenden Farbkontrast in HTML beheben
• RGAA-Kriterium 3.2 zum Textkontrast
• RGAA-Kriterium 3.3 zum Kontrast von Bedienelementen

Quellen

Dieser Artikel stützt sich auf die am Seitenende genannten offiziellen Quellen.

• W3C — Comprendre 1.4.3
• W3C — Comprendre 1.4.11