Navigation

Service-Menü

Sprachversionen

Suche



Inhalt

Infothek

WCAG 2.0
Teil 3: Kontraste von Schrift

22.05.2008

Welche Unterschiede gibt es in Sachen Kontrastanforderungen zwischen den WCAG 2.0 und dem aktuellen BITV-Test? Was ist von den neuen Anforderungen zu halten? Und was können Webdesigner heute schon tun, um die Kontrastprüfschritte auch in Zukunft zu erfüllen?

Auf dieser Seite:

Die Anforderungen nach WCAG 1.0 und BITV-Test

In den WCAG 1.0 wurde verlangt, dass die Kontraste von Texten, Grafiken und Bildern ausreichend sein müssen, es war aber nicht definiert, was eigentlich "ausreichend" ist. Es gab zwar seitens des W3C einen Vorschlag für einen Algorithmus zur Bestimmung des Kontrasts, dieser war allerdings nicht Teil der verabschiedeten WCAG 1.0.

Nach diesem vorgeschlagenen Algorithmus konnten für die Helligkeits- und die Farbtondifferenz zwischen Vorder- und Hintergrundfarbe Zahlenwerte ermittelt werden. Es wurden Mindestwerte festgelegt, die Helligkeitsdifferenz musste einen Wert von mindestens 125 erreichen, die Farbtondifferenz mindestens 500.

In der Praxis haben sich diese Vorgaben für Kontraste nicht durchgesetzt, denn die Erfüllung beider Mindestwerte schränkt die Farbwahl erheblich ein. Auch ist die Farbtondifferenz für die Wahrnehmbarkeit und Lesbarkeit von Schrift nicht entscheidend, viel wichtiger ist (auch für die meisten farbfehlsichtigen Nutzer) ein ausreichend großer Unterschied in der Helligkeit zwischen Vorder- und Hintergrundfarbe. Im Prüfschritt 2.3.1 des BITV-Tests wird daher nur die Helligkeitsdifferenz geprüft, die Formel für die Farbtondifferenz wurde nicht berücksichtigt.

Ob Text gut kontrastiert, hängt von einer Vielzahl von weiteren Bedingungen ab, etwa von der Größe der Schrift, dem eingesetzten Bildschirm oder der Kantenglättung. Da diese Bedingungen variabel sind, werden sie im BITV-Test nicht berücksichtigt. Unterschieden wird allerdings zwischen Fließtext und anderen Textelementen. Beim Fließtext ist die gute Lesbarkeit besonders wichtig, daher wird hier eine Differenz von mindestens 125 verlangt. Andere Textelemente (zum Beispiel Überschriften oder die Navigation) dürfen nach dem BITV-Test eine etwas geringere Helligkeitsdifferenz haben, den Wert von 110 aber nicht unterschreiten.


Die Anforderungen nach WCAG 2.0

Die WCAG 2.0 definieren im Unterschied zu den WCAG 1.0 klar, wie stark die Vorder- und Hintergrundfarben von Schrift kontrastieren müssen und liefern dazu einen neuen Algorithmus, der die "Contrast Ratio" misst. Dieser lässt bei der Auswahl von Farben deutlich mehr Spielraum als der alte W3C-Algorithmus mit Prüfung der Helligkeits- und Farbdifferenz. Leider entspricht das Ergebnis nicht immer dem Ergebnis des im BITV-Test bislang eingesetzten "alten" Algorithmus zur Ermittlung des Helligkeitskontrastes. Bei einigen Farbkombinationen ist der neue Algorithmus strenger, bei anderen toleranter.

Farbbeispiele

Farbmuster: Lilabraune Schrift (Hexadezimalwert #996666) auf gelbem Hintergrund (Hexadezimalwert #FFCC33)

Farben Vordergrund #996666 / Hintergrund #FFCC33
Helligkeitsdifferenz 84
Contrast Ratio 3,13 : 1
BITV-Test nicht erlaubt
WCAG 2.0 AA für große Schrift erlaubt

Rote Schrift (Hexadezimalwert #CC0000) auf gelbem Hintergrund (Hexadezimalwert #FFCC33)

Farben Vordergrund #CC0000 / Hintergrund #FFCC33
Helligkeitsdifferenz 140
Contrast Ratio 3,91 : 1
BITV-Test für alle Texte erlaubt
WCAG 2.0 AA nur für große Schrift erlaubt

Farbmuster: Türkisfarbene Schrift (Hexadezimalwert #00CCCC) auf dunkelblauem Hintergrund (Hexadezimalwert #003366)

Farben Vordergrund #00CCCC / Hintergrund #003366
Helligkeitsdifferenz 101
Contrast Ratio 6.31 : 1
BITV-Test nicht erlaubt
WCAG 2.0 AA für alle Texte erlaubt

Farbmuster: Pinkfarbene Schrift (Hexadezimalwert #FF99CC) auf rotem Hintergrund (Hexadezimalwert #CC0000)

Farben Vordergrund #FF99CC / Hintergrund #CC0000
Helligkeitsdifferenz 128
Contrast Ratio 2,99 : 1
BITV-Test für alle Texte erlaubt
WCAG 2.0 AA nicht erlaubt

Es gibt einen weiteren Unterschied zum BITV-Test: Zwar legen auch die WCAG 2.0 keinen einheitlichen Mindestwert für alle Teile einer Webseite fest. Allerdings differenzieren sie nicht wie im BITV-Test zwischen Fließtext und Nebenbereichen, sondern machen den Mindestkontrast von der Schriftgröße abhängig. Um Level AA zu erreichen, müssen Texte und Textgrafiken normalerweise eine "Contrast Ratio" von mindestens 5:1 erreichen. Eine Ausnahme gibt es für große Schrift von mindestens 18 Punkt Größe (beziehungsweise 14 Punkt bei gefetteter Schrift): sie darf mit mindestens 3:1 einen niedrigeren Kontrast haben.

Und schließlich wird im Unterschied zum BITV-Test eine über Kontrastregler oder Styleswitcher einstellbare Alternativansicht als Ersatz für ein ausreichend kontrastierendes Default-Layout akzeptiert - vorausgesetzt, das entsprechende Bedienelement selbst ist ausreichend kontrastierend und auch sonst entsprechend den WCAG-Anforderungen barrierefrei umgesetzt.

Tabellarische Darstellung der Unterschiede

  Aktueller BITV-Test WCAG 2.0
Nach welcher Formel wird geprüft? Prüfung der Helligkeitsdifferenz (Formel) Prüfung der Contrast Ratio (Formel)
Welcher Mindestkontrast muss erreicht werden? Fließtext: Helligkeitsdifferenz von mindestens 125 Andere Bereiche: Helligkeitsdifferenz von mindestens 110 Schrift : Contrast Ratio von mindestens 5:1 Ausnahme für große Schrift (ab 18 Pt oder 14 Pt + gefettet): Contrast Ratio von mindestens 3:1
Welche Rolle spielen Kontrastregler auf der Webseite? Default-Layout muss in jedem Fall die Kontrast-Anforderungen erfüllen, auch wenn es einen Kontrastregler oder einen Styleswitcher gibt, mit dem der Benutzer stärkere Kontraste einstellen kann. Default-Layout muss die Kontrastanforderungen nicht erfüllen, wenn es einen (selbst ausreichend kontrastreichen und zugänglichen) Kontrastregler gibt, mit dem ein ausreichend kontrastierendes Layout eingestellt werden kann.

Bewertung

Positiv ist, dass auch weiterhin Mindestanforderungen an die Farbkontraste von Texten gestellt werden und dass die Priorität dieser Anforderungen erhöht worden sind. Denn der Benutzer kann zwar eigene Farben festlegen, wenn er mit den von der Website gewählten Farben nicht zurecht kommt. Aber dies ist nur ein Notbehelf, wenn möglich sollten auch Benutzer mit Sehbehinderung mit der "normalen" Ansicht klarkommen.

Positiv ist auch die rechnerische Ermittlung der Farbkontraste und die Vorgabe von Mindestwerten. Denn die rechnerisch ermittelten Kontraste sind aussagekräftig und eine praktikable Alternative gibt es nicht.

Fragwürdig ist, dass die Kontrastvorgaben auch über Styleswitcher erfüllt werden können. Denn wie bei der baulichen Barrierefreiheit gilt auch für das Web: Sonderlösungen für Nutzer mit Behinderungen sind schlecht. Sie werden oft nicht gefunden, nicht ordentlich gepflegt, funktionieren nicht immer zuverlässig, verhindern die gemeinsame Nutzung. Daher haben wir der WCAG-2-Arbeitsgruppe eine Änderung vorgeschlagen. Im neuen "Candidate Recommendation" Entwurf vom 30. April ist die Lösung per Styleswitcher glücklicherweise kein direkter Teil des Erfolgskriteriums mehr, sondern sie wurde in die Techniques ausgelagert.

Was wird sich im BITV-Test ändern?

Derzeit ist noch nicht endgültig entschieden, welche Contrast Ratio in den WCAG 2.0 zur Anwendung kommen soll. Zunächst ist wie bereits gesagt für Level AA mindestens 5:1 vorgesehen. In der laufenden Testphase soll jedoch geprüft werden, ob diese Vorgabe in der Praxis erfüllbar ist. Stellt sie sich als zu restriktiv heraus, soll sie eventuell auf 4,5:1 oder 4:1 abgesenkt werden. Sobald dieser Entscheidungsprozess abgeschlossen ist - also nach Inkrafttreten der WCAG 2.0 - wird auch im BITV-Test der neue "Contrast Ratio"-Algorithmus zur Anwendung kommen. Denn die bestehende BITV steht dem nicht entgegen, sie sagt nicht, wie ausreichende Kontraste zu prüfen sind.

Die Differenzierung nach Schriftgröße ist nicht falsch, aber erheblich schwieriger praktisch umzusetzen, als die bislang im BITV-Test vorgesehene Differenzierung nach Fließtexten und anderen Texten. Da die Größe der Schrift aber tatsächlich einen großen Einfluss auf die Wirkung von Farben und die Anforderungen an den Kontrast hat, wird auch die Differenzierung nach Schriftgrößen wahrscheinlich im BITV-Test übernommen werden, sofern es zu einer entsprechenden Anpassung der BITV kommt.

Die alternative Erfüllung der Kontrastanforderungen über in die Website eingebaute Kontrastregler ist aus unserer Sicht problematisch. Die WCAG 2.0 weisen zurecht darauf hin, dass "jede Version so zugänglich wie möglich sein soll". Der BITV-Test wird das berücksichtigen. Es wird also sicher nicht möglich sein, den Prüfschritt 2.3.1 in Zukunft allein durch das Angebot alternativer Styles zu erfüllen. Auch bei Webangeboten mit Styleswitcher muss die Default-Ansicht zumindest gewisse Mindestanforderungen an die Kontraste erfüllen, die allerdings niedriger angesiedelt sein könnten als 5:1.

Tipp:

Leider ist derzeit noch nicht absehbar, welche Mindestkontrastwerte die WCAG 2.0 letztendlich festlegen werden und inwieweit die künftige BITV dem folgen wird. Webdesigner, die ganz sicher gehen wollen, sollten Farben auswählen, die die Anforderungen sowohl des BITV-Tests als auch der aktuellen Version der WCAG 2.0 erfüllen.

Wenn das nicht möglich ist, kann sicherheitshalber im Kopfbereich an prominenter Stelle Platz für einen Kontrastregler oder Styleswitcher eingeplant werden. Das Bedienelement selbst und seine Beschriftung sollten in jedem Fall eine "Contrast Ratio" von mindestens 5:1 haben.

Wichtig: auch mit Kontrastregler sollten die Kontraste im Default-Layout nicht völlig außer Acht gelassen werden - sie sollten so oder so einen gewissen Mindestwert erreichen. Wir empfehlen, im Default-Layout nicht unter 4:1 zu gehen.