Neulich erschrak ich ein wenig. In einem Seminar über das Testen der Barrierefreiheit von Webseiten fragte mich einer der Teilnehmenden, wie mit der Kontrastmessung bei aktiviertem ClearType auf Windows-Systemen umzugehen sei. Er erwischte mich auf dem falschen Fuß. Das war Grund genug, der Sache auf den Grund zu gehen.
ClearType
ClearType ist ein Verfahren auf Windows-Systemen, das die Kantenglättung (Anti-Aliasing) von Schrift am Bildschirm erlaubt. Das Verfahren eignet sich insbesondere dafür, ein schärferes Schriftbild auf TFT-Bildschirmen zu bewirken, kann aber prinzipiell für alle Bildschirme genutzt werden. Ab Windows 7 ist es standardmäßig aktiviert. Dabei gibt es nicht nur verschiedene Versionen von ClearType, die auf verschiedenen Windows-Systemen variierende Rekonstruktionsfilter, Gammakorrekturen und Kombinationen mit Subpixel-Rendering aufweisen, sondern selbstverständlich auch andere Anti-Aliasing-Verfahren für weitere Betriebssysteme und Grafikkarten.
Das Problem bei der Messung von Kontrastverhältnissen ist einfach: Bei aktiviertem ClearType gibt es keine durchgängigen eingefärbten Pixel, sondern es entsteht eine bunte Ansammlung von Subpixeln:
So kann es passieren, dass eine hell gelbe Schrift kein Hellgelb auf der Pixelebene enthält, sondern eine Vielzahl andersfarbiger Pixel, um ein helles Gelb darzustellen. Dieser Effekt ist umso stärker, je dünner oder kleiner die Schrift ist. Besonders auffällig wird der Effekt, wenn der Hintergrund farbig ist und keiner der Farben weiß oder schwarz ist.
Kontrastverhältnisse sind wichtig
Gute Kontrastverhältnisse sind aus verschiedenen Gründen wichtig, u.a. aus Gründen der Barrierefreiheit. In den Web Content Accessibility Guidelines (WCAG) 2.0 wird das minimale Kontrastverhältnis für die Vordergrund- und Hintergrundfarbe von Text wie folgt festgelegt:
- auf Konformitätsstufe AA soll das minimale Kontrastverhältnis 4,5:1 bzw. bei großer Schrift 3:1 und
- auf Konformitätsstufe AAA soll das Kontrastverhältnis 7:1 bzw. bei großer Schrift 4,5:1 betragen.
Das Verhältnis kann dabei zwischen 1:1 (kein Unterschied) und 21:1 (schwarz/weiß) liegen. Große Schrift wird dabei festgelegt auf mindestens 18pt oder mindestens 14pt und fett.
Kontrastverhältnisse messen
Es gibt eine Reihe von Methoden, um das Kontrastverhältnis zwischen zwei Farben (meist Vordergrundfarbe und Hintergrundfarbe) zu ermitteln. Die einfachste Methode ist sicher das Messen von CSS-Farbwerten mit der Juicy Studio Accessibility Toolbar. Damit können die Kontrastverhältnisse von Text gemessen werden, allerdings hat das Werkzeug auch Grenzen:
- Farbverläufe oder Hintergrundbilder,
- Mouse-Over-Effekte oder
- Bilder von Texten
können nicht untersucht werden.
Das umfassendere Werkzeug für die Kontrastmessung ist der Colour Contrast Analyser, das im Übrigen in der zur Prüfung der Barrierefreiheit erstklassigen Werkzeugleiste Web Accessibility Toolbar integriert ist. Dem Grunde nach erlaubt der Color Contrast Analyser die Eingabe von zwei Farbwerten, und das Kontrastverhältnis wird errechnet. Zur Unterstützung kann eine Pipette eingesetzt werden, um einzelne Pixel auf dem Bildschirm in einer Bildschirmlupe auszuwählen.
Ein weiteres Tool ist der Chrome Extension Color Contrast Analyzer. Dieses Werkzeug macht einen Screenshot der Webseite und kann das Kontrastverhältnis eines Pixels mit den umgebenden Pixeln errechnen. Das Ergebnis ist eine Grafik, in der kontrastierende Farbwerte weiß hervorgehoben werden und nicht kontrastierende Werte ausgegraut werden.
Alles halb so wild
Es hat einen Moment gedauert, bis ich realisierte, dass der gesamte Gedankengang zur Kantenglättung theoretischer Natur ist und für die Prüfung der Kontrastverhältnisse keine Relevanz hat:
- Es können nur die Farben, die auf der Webseite definiert sind, zuverlässig gemessen werden. Wenn eine Vordergrund- und eine Hintergrundfarbe für einen Text im CSS angegeben werden, dann sind das die zu messenden Farben. Genauer gesagt müssen die Farben eines Textes im DOM gemessen werden, denn durch Vererbung und Transparenzwerte sind die reinen CSS-Farbangaben oft nicht ausreichend.
- Wenn die Kontrastmessung mit einem Tool wie CCA erfolgt, so muss die Kantenglättung abgeschaltet sein. ClearType verändert die Darstellung, wie sie vom Webentwickler vorgegeben ist. Wenn ich die Farben manipuliere, dann messe ich nicht die vorgesehenen Farben der Webseite.
- Sollte bei der Kontrastmessung mit CCA das Anti-Aliasing eingeschaltet sein, so sollte der Text zuvor auf das 1,5 bis 2-fache vergrößert werden. Bei vergrößertem Text werden die Farben „gefestigt“ und es wird leichter, die tatsächliche Textfarbe zu bestimmen.
Da es bei der Messung von Kontrasten mit vergrößerter Schrift immer noch zu Fehlern kommen kann, sollte konsequenterweise die Messung bei ausgeschalteter Kantenglättung erfolgen, wenn zuverlässige Ergebnisse erzielt werden sollen.
Alternativ kann in Firefox die Kantenglättung abgeschaltet werden. Je nach Grafikkarte – und sicherlich anderen Faktoren – gibt es eine Vielzahl von Einstellungen zur Kantenglättung. Welche Einstellungen es für einen bestimmten Rechner genau gibt, können Sie anzeigen lassen, indem Sie im Firefox about:config über die Adresszeile des Browsers aufrufen.
Schlussbemerkungen
Die Schlussfolgerungen könnte ich stehen lassen, aber ich war dann doch neugierig, ob in den Web Content Accessibility Guidelines (WCAG) 2.0 etwas dazu steht. Ich kenne die Richtlinien zwar recht gut, aber weil sie sehr umfangreich sind, entgeht mir gelegentlich schon das eine oder das andere Detail.
Nach einigem Suchen bin ich im Glossar fündig geworden. Dort wird explizit angemerkt, dass eine Kontrastmessung bei deaktivierter Kantenglättung erfolgen sollte. Das Glossar ist normativ und deshalb ist die Vorgabe auch bindend, wenn es um die Prüfung der Konformität einer Webseite zur WCAG 2.0 geht.
Nach weiterer Recherche las ich in den Erläuterungen zu Erfolgskriterium 1.4.6 (erweiterte Kontrastverhältnisse), dass eine aktivierte Kantenglättung das Kontrastverhältnis beeinflusst und auch verschlechtern kann. Dort wird allerdings empfohlen, die Kantenglättung bei der Kontrastmessung einzuschalten und die Prüfung bei vergrößerter Schrift durchzuführen. Die Erläuterungen sind im Gegensatz zum Glossar informativ und deshalb für eine Prüfung auf Konformität nicht bindend.
Auch wenn ClearType als Voreinstellung eines Windows-Systems theoretisch vom Nutzer ausgeschaltet werden kann, so wird das in der Praxis seltener vorkommen, d.h. ClearType ist eine Realität für viele Nutzer, obwohl sie möglicherweise einen Bildschirmtext besser bei ausgeschaltetem ClearType lesen könnten. Auf der anderen Seite ist Textvergrößerung ebenfalls eine Realität. Wer regelmäßig Bildschirmtexte nicht gut lesen kann wird wahrscheinlich die Textgröße durch eine Voreinstellung ändern.
Unabhängig von den Kontrastverhältnissen möchte ich den geneigten Webdesignern noch auf dem Weg geben, dass die Leserlichkeit eines Textes auch von Hardware, Bildschirmauflösung und weiteren Software-Einstellungen abhängt. Über diese Faktoren der Leserlichkeit hinaus gibt es auch andere Aspekte, die für die Lesbarkeit eine Rolle spielen, etwa Abstand des Lesers zum Bildschirm, die konkrete Sehbeeinträchtigung oder äußere Aspekte wie Tageslicht. Deshalb wird ein WCAG-konformes Kontrastverhältnis nicht von allen Nutzern als leserlich wahrgenommen – das gilt auch für schwarzen Text auf weißen Hintergrund, wenn andere Parameter sehr ungünstig sind. Deshalb ist es ein guter Rat, Bildschirmtext groß zu gestalten und Schriftarten mit geringer Strichstärke sein zu lassen.