bit.blog

Kurz vor Weihnachten 2008 wurde WCAG2 verabschiedet, mit einem riesigen Sack detaillierter Regeln, an denen teilweise noch bis zur letzten Minute gearbeitet worden war. Nun sitzen die Accessibility-Experten in ihren Entwicklerstuben und packen die Geschenke aus. Meine erste Entdeckung ist allerdings eher eine Rute: Die neuen Regeln zu Farbkontrasten bringen strenge Einschnitte für das Screendesign mit sich. Einige Freiheitsgrade, an die wir uns gewöhnt hatten, wurden zurückgenommen, einige best practices für gute Usability müssen neu geschrieben werden. Farbige Schriften können in barrierefreien Websites nur noch sehr eingeschränkt verwendet werden.

Geltungsbereich

Die neuen Regeln gelten für alle Schriften einer Website, eine Unterscheidung wird nur nach der Schriftgröße gemacht. Die alte Regel ließ dagegen Ermessensspielräume. So hat der BITV-Test bisher die Layoutbereiche einer Website verschieden behandelt, für den Haupttext galten strengere Grenzwerte als für die Nebenbereiche, wie Menüleisten oder Fußzeile. WCAG2 lässt jetzt nur noch eine Ausnahme gelten: Logos müssen sich keiner Kontrastanforderung beugen. Ansonsten müssen alle Schriften und auch grafische Darstellungen dieselben strengen Kontrastwerte einhalten.

Der Algorithmus

Schriftgröße	AA	AAA
große Schrift 18pt oder 14pt bold	3:1	4,5:1
normale Schrift	4,5:1	7:1

Der in WCAG2 festgelegte Algorithmus zur Bestimmung der Kontrastwerte setzt die relative Helligkeit der Vorder- und Hintergrundfarbe einer Schrift zueinander in Beziehung. Es geht also um die Grauwerte der Farben. Der eigentliche Farbwert, der in früheren Testtools noch gemessen wurde, spielt in WCAG2 keine Rolle mehr. Der höchstmögliche Kontrastwert 21:1 entspricht den Farben schwarz und weiß, ein Wert von 1:1 wäre kein Kontrast. Gute Lesbarkeit von Schriften am Bildschirm ist laut ISO 9241-3 bei einem Helligkeitskontrast von mindestens 3:1 gegeben. Dieser Wert gilt für Normalsichtige. WCAG2 setzt nun die Grenzwerte für Menschen mit eingeschränktem Sehvermögen in zwei Stufen fest. Level AA bezieht sich auf ältere Menschen, genauer auf 80-jährige. Level AAA bezieht sich auf Menschen mit leichten Sehbehinderungen, die aber noch keine technischen Hilfen benötigen. Level AA wird erreicht bei einem Kontrast von 3:1 für große Schrift und von 4,5:1 für normale Schrift. Für Level AAA liegen die Grenzwerte bei 4,5:1 für große Schrift und bei 7:1 für normale Schrift.

Große Schrift im Sinne dieser Richtlinie sind Schriften von 18 pt bzw. 14 pt bold - wohlgemerkt Punkt, nicht Pixel. Für die Umsetzung in barrierefreien Websites müssen diese Werte in Pixel und weiter in em-Werte umgerechnet werden. Die Größe eines Pixels hängt von der Hardware ab, für den Test müsste man wohl ein “Normaldisplay” mit einer bestimmten Lochmaske definieren. Eine Umrechnungstabelle suche ich noch, an sich wäre das eine Aufgabe von WAI oder von BIK. Das Analysetool von Juicy Studio zeigt die Beispiele für große Schrift in 30 px (berechnet nach den Angaben im CSS) - das ist sicher nicht der Grenzwert.

Lesbarkeit von Schriften

Als Kennwert für die Lesbarkeit von Schriften ist der Helligkeitskontrast nur einer unter vielen, wenn auch der am einfachsten messbare. Für die Lesbarkeit spielen bekanntermaßen noch andere Faktoren eine Rolle, z.B. ob die Schrift positiv oder negativ gesetzt ist, die Form der Buchstaben, Umgebungseinflüsse. Die Schriftproben für Schwarz und Weiß sollen das verdeutlichen: Der negativ gesetzte Schriftzug ist schlechter lesbar als der positive, während der Kontrastwert derselbe ist.

Farbmuster	HEX-Werte	Kontrast	Konformität
	#fff auf #000	21:1	AAA
	#000 auf #fff	21:1	AAA

Helligkeitswerte reiner Farben

Um ein Gefühl für die neuen Grenzwerte zu bekommen, betrachten wir die Grundfarben in Kombination mit Schwarz und Weiß. Dabei fallen interessante Effekte auf.

Farbmuster	HEX-Werte	Kontrast	Konformität
	#f00 und #000	5,25:1	AA für normale Schrift
	#f00 und #fff	4:1	AA für große Schrift
	#0f0 und #000	15,3:1	AAA
	#0f0 und #fff	1,37:1	-
	#00f und #000	2,44:1	-
	#00f und #fff	8,59:1	AAA
	#ff0 und #000	19,56:1	AAA
	#ff0 und #fff	1,07:1	-
	#f0f und #000	6,7:1	AA für normale Schrift
	#f0f und #fff	3,14:1	AA für große Schrift
	#0ff und #000	16,75:1	AAA
	#0ff und #fff	1,25:1	-

Die Tabelle zeigt, dass die reinen Farben relativ hell sind. Alle Farben außer Blau kontrastieren ausreichend mit Schwarz, während die Kombination mit Weiß nur bei der Hälfte der getesteten Farben einen ausreichenden Kontrast ergibt. Ãœberraschend: Die Kombination von Rot und Schwarz, die als kritisch für Sehbehinderte bekannt ist und von der in “Understanding WCAG 2.0″ ausdrücklich abgeraten wird, liegt nach dem Helligkeitskontrast im sicheren Bereich. Dagegen liegt Grün mit Weiß weit außerhalb des Grenzwerts - eine Kombination, die von Normalsichtigen zumeist als gut lesbar empfunden wird. Die Farben spielen also durchaus eine Rolle für die Lesbarkeit von Schriften, der Helligkeitskontrast allein ist ein recht grober Maßstab.

Als Konsequenz für das barrierefreie Screendesign ergibt sich, dass man beim Entwurf der Schriftfarben nicht dem Augenschein vertrauen kann. Was dem Normalsichtigen als gut lesbar erscheint, muss nicht unbedingt die WCAG-Grenzwerte für ausreichenden Kontrast einhalten. Da ist es klüger, ein Analysetool zu Rate zu ziehen. Neben dem für Testzwecke optimalen Juicy Studio Luminosity Colour Contrast Ratio Analyser gibt es auch andere, mehr intuitiv arbeitende Tools, die sich eher für den Entwurf eignen.

Pastellige Flächen und Schriften

Was tun, wenn ein Farbmuster nicht den Kontrastanforderungen entspricht? - In einem aktuellen Designprojekt liegt mir eine Farbpalette mit pastellig-erdig abgetönten Farben in Grün, Gelb, Blau, Rot vor. Die Palette ist abgeleitet von einer maigrünen CI-Farbe, es sind abgedunkelte Farben, die als Hintergrund für weiße Schrift taugen sollen. Der Entwurf stammt von einer Screendesignerin, die mit Usability und Lesbarkeit von Schriften vertraut ist, aber intuitiv ohne Anwendung von Prüftools arbeitet.

Das Prüftool zeigt an, dass das Augenmaß täuscht. Die Farben sind nicht gleich hell, wie sie an sich gemeint waren. Der Kontrast mit weiß ist nicht bei allen vier Farben ausreichend. Nur der Blau- und der Rotton sind für große Schrift geeignet, Ockergelb und Olivgrün erreichen die Grenzwerte nicht.

Farbmuster	HEX-Werte	Kontrast	Konformität
	#9cae1f und #fff	2,47:1	-
	#da9f01 und #fff	2,35:1	-
	#da9f01 und #fff	3,49:1	AA für große Schrift
	#da9f01 und #fff	3,96:1	AA für große Schrift

Wie sehen denn die Farben aus, die die Grenzwerte für den Helligkeitskontrast einhalten? Vielleicht können wir uns an die Kontrastanforderungen anpassen, ohne uns allzu weit von den Logo-Farben zu entfernen. Wir bilden eine Skala auf Basis der Logo-Farbe Maigrün.

Farbmuster	HEX-Werte	Kontrast	Konformität
	#bbd125 und #fff	1,71:1	-
	#8b9d0d und #fff	3,03:1	AA für große Schrift
	#707d16 und #fff	4,53:1	AA für normale Schrift
	#525F04 und #fff	7,01:1	AAA

Das Ergebnis ist eindeutig: die Farben mit ausreichendem Kontrast gefallen uns nicht. Auch das hellere Olivgrün mit dem Kontrastwert 3:1 ist deutlich dunkler als das Grün der Farbpalette mit Kontrastwert 2,47, es würde nur zur Not mit den anderen Farben der Farbpalette zusammen. Die Grüntöne mit höherem Kontrast kommen gar nicht in Frage, als Farbfläche wirken sie zu düster, als Schriftfarbe nicht farbig genug.

Zum Designvorschlag gehört auch eine Infobox mit grünem Hintergrund, die mit schwarzer und weißer Schrift in Normalgröße beschrieben werden soll. Die weiße Schrift kontrastiert nicht ausreichend, das ist schnell klar. Ist der Vorschlag überhaupt umsetzbar? Gesucht wird ein Grünton, der mit Schwarz und Weiß ausreichend kontrastiert.

Farbmuster	HEX-Werte	Kontrast	Konformität
	#707d16 und #000	4,63:1	AA für normale Schrift
	#707d16 und #fff	4,53:1	AA für normale Schrift

Tatsächlich gibt es einen Grünton, der mit Schwarz ebenso wie mit Weiß einen Kontrastwert von 4,5:1 ergibt. Leider gefällt uns die Farbe nicht. Schlimmer: Die schwarze Schrift auf Dunkelolive finde ich schwer lesbar. Da hätten wir mal ein Beispiel, dass die Kontrastanforderungen nach WCAG2 im Einzelfall auch mal kein Garant für gute Lesbarkeit sind.

Lessons learned

Die Kontrastregeln nach WCAG2 setzen deutliche Einschränkungen für das Screendesign. Farbige Schriften und Schrift auf farbigem Hintergrund sind nur in einer engen Spannbreite erlaubt. Kritisch ist farbige Schrift auf weißem Hintergrund, vor allem die Farben mit Gelbanteil von grün bis orange müssen so stark abgedunkelt werden, dass sie ihre Farbwirkung beinahe verlieren.

Eng wird der Gestaltungsspielraum vor allem für Links im Fließtext. Links sollen nicht nur zum Hintergrund ausreichend kontrastieren, sondern sich auch vom normalen Text deutlich abheben, und zudem sollen besuchte und nicht besuchte Links optisch unterscheidbar sein. In manchen Farbräumen ist soviel Differenzierung unter Beachtung der Kontrastregeln kaum möglich. Man wird wieder häufiger die von Google bekannten Standardfarben blau und violett wählen. Oder sich für einen gänzlich anderen Umgang mit Links entscheiden. Einige Usability-Experten werben schon lange dafür, auf Links im Fließtext zugunsten eines ungestörten Leseflusses zu verzichten und statt dessen am Ende eines Textes deutlich gekennzeichnete Links aufzulisten. Für diese Lösung gibt es jetzt neue Argumente.

Eng wird es auch, wenn das Screendesign seine emotionale Wirkung aus Farbflächen bezieht, die zugleich Schrifthintergund sind. Die Suche nach Farben, die die Kontrastanforderungen erfüllen und zugleich die gewünschte positive Stimmung erzeugen, ist in unserem Fall fehlgeschlagen.

Kontrastumschalter

Wer auf pastellige Farbkombinationen nicht verzichten will, hat nach WCAG2 noch die Möglichkeit, einen Schalter anzubieten, mit dem der Nutzer zwischen verschiedenen Kontrastmodi auswählen kann. Diese Lösung wird in der Richtlinie ausdrücklich erwähnt, mit der Maßgabe, dass wenigstens der Schalter in allen Modi ausreichend kontrastieren muss. Über solche Styleswitcher haben wir in der Accessibility-Szene bisher eher polemisiert. Jetzt sind sie von höchster Stelle rehabilitiert, und werden wohl neu in Mode kommen.

Referenzen

• WCAG2: Contrast (Minimum) - Understanding SC 1.4.3
  w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html
• WCAG2: Contrast (Enhanced) - Understanding SC 1.4.6
  w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast7.html
• WCAG2: Advisory Techniques for 1.4.3 - Contrast (Minimum)
  w3.org/WAI/WCAG20/quickref/#qr-visual-audio-contrast-contrast
• BIK-Projekt: WCAG 2.0 Teil 3: Kontraste von Schrift
  bik-online.info/info/pruefung/wcag2/schriftkontraste.php
• BITV-Test: Prüfschritt 2.3.1 - Helligkeitskontraste von Texten ausreichend
  bitvtest.de/index.php?a=di&iid=1097&s=n
• Juicy Studio: Luminosity Colour Contrast Ratio Analyser
  juicystudio.com/services/luminositycontrastratio.php
• Giacomo Mazzocato: Accessibility Colour Wheel
  gmazzocato.altervista.org/colorwheel/wheel.php
• Einfach für Alle: EfA-Laborbericht Nr. 8
  einfach-fuer-alle.de/blog/id/2462/

Der Beitrag wurde am Montag, den 30. März 2009 um 20:18 Uhr veröffentlicht und wurde unter Webdesign, Design for All, BITV-Test abgelegt. du kannst die Kommentare zu diesen Eintrag durch den RSS 2.0 Feed verfolgen. du kannst einen Kommentar schreiben, oder einen Trackback auf deiner Seite einrichten.