Web Content Accessibility Guidelines 2.0: neue Richtlinien für Farbgestaltung und Kontraste

Neue Empfehlungen in den Web Content Accessibility Guidelines 2.0 (WCAG) sollen das Netz für Menschen mit Behinderungen zugänglicher machen. Darin enthalten: Hinweise für bessere Farb- und Kontrastgestaltung, die barrierefreies Surfen für farbenblinde und sehschwache User ermöglichen.

Die WCAG 2.0 sind ein Kompendium technischer Referenzen die für userfreundliche und barrierefreie Gestaltung von Webinhalten. Sie definieren drei verschiedene Konformitätsstufen für die technische Umsetzung einer Webseite: A, AA und AAA. AA stellt dabei für textbasierte Anwendungen und Texte in Bildern die Mindestkonformitätsstufe dar.

Entscheidend für eine AA-konforme Umsetzung ist ein entsprechendes Verhältnis der Farbkontraste. WCAG 2.0 legt dafür ein Verhältnis von 4,5:1 fest. Dieses bezieht sich auf die Luminanz der verwendeten Farben und bedeutet, dass die hellere Farbe eine 4,5 mal höhere Leuchtkraft als die dunklere besitzen muss, um den Richtlinien gerecht zu werden.

Die Vorgaben für Level AA sind so berechnet, dass Menschen mit moderater Sehschwäche, die keine zusätzlichen Kontrast-verstärkenden Technologien benötigen, eine so gestaltete Webseite gut lesen können. Dasselbe gilt für farbenblinde Nutzer einer Webseite. Die Richtlinien treue Umsetzung von Level AA soll den Verlust der Kontrastwahrnehmung, von dem User mit Seheinschränkungen oft betroffen sind, ausgleichen.

Die höchste Konformitätsstufe, Level AAA, erfordert bereits ein wesentlich größeres Kontrastverhältnis (7:1). Sie ist auf Nutzer ausgelegt, deren Seheinschränkung nur ein Viertel der normalen Sehkraft beträgt. Menschen mit einer Sehbehinderung dieser Stärke sind gewöhnlich auf Kontrast-verstärkende und vergrößernde Hilfsmittel angewiesen sind, um eine ausreichende Lesefähigkeit zu erlangen.

Für die Umsetzung der WCAG 2.0 Richtlinien ist es wichtig zu wissen, welche Art von Text und/oder Bildern davon überhaupt betroffen ist. Sinnvollerweise unterscheiden wir hier zwischen essenziellem und nicht-essentiellem Text. Nicht-essentiellen Text wie Logos und Teile von Bildern müssen Sie nicht unbedingt WCAG 2.0-konform gestalten. Er hat hauptsächlich dekorativen Charakter und beeinträchtigt das Lesen und inhaltliche Verstehen einer Webseite kaum. Manchmal kann es dennoch wichtig sein, ein schlecht identifizierbares Logo für Sehbehinderte zu "übersetzen". Das ist vor allem der Fall, wenn es für die eindeutige Identifizierung einer Firma oder einer Marke unerlässlich ist. Wie man solche Beschreibungen mithilfe sogenannter "alt Attributes" am besten vornimmt, lesen Sie zum Beispiel auf Julie Grundy's Blogpost Simply Accessible nach.

Um eine ausreichende Kontrastwirkung zu erreichen, ist auch die Wahl der Textgröße entscheidend. Dafür ziehen wir die sogenannten RGB-Werte heran, die den Anteil an Rot, Grün und Blau in einer Farbe bestimmen. Grauer Text mit einem RGB-Wert von (150,150,150) auf rein weißem Untergrund ist mit dem AA-Level kompatibel, wenn er in Überschriften mit einem Schriftgrad von mindestens 18 Punkt verwendet wird.

Grauer Text mit einem RGB-Wert von (110,110,110) ist in jeder Schriftgröße AA-kompatibel. Ab einer Überschrift über 18 Punkt Schriftgröße erreicht er auch AAA-Level.

Bedeutend ist weiters die Auswahl der Fonts. Bei gleicher Schriftgröße können diese in manchen Fällen Richtlinien konform sein, in anderen nicht. Das hängt unter anderem von der starken Unterschiedlichkeit der Schrifttypen ab. Sehr dünne Fonts entsprechen dann eventuell trotz vernünftig gewählter Größe nicht der Norm.

Wir empfehlen, grundsätzlich AAA-kompatiblen Textkörper mit größeren Überschriften zu verwenden. Weniger wichtige Inhalte sollten mindestens AA-Kompatibilität aufweisen.
Dabei ist auch immer zu beachten, dass die Empfehlungen für Kontrastverhältnisse auf gut erkennbarem Text auf hellem Hintergrund ausgerichtet sind. Text, der auf Mustern, Fotos etc. aufgebracht ist, verlangt einen vielfach höheren Kontrastwert oder eine Veränderung der Seitengestaltung (z.B. Unterlegen des Textes mit einem gut kontrastierenden Farbstreifen). Wird dies nicht beachtet, leidet die Lesbarkeit teilweise beträchtlich.

Für Designer erscheint es oft schwierig, Maßnahmen zur Barrierefreiheit sinnvoll umzusetzen, ohne einen Verlust an Kreativität und Gestaltungsfreiheit hinnehmen zu müssen. Das muss nicht so sein. Hilfreich ist hier beispielsweise der Einsatz von sogenannten Farbkontrast-Checkern.
Experimentieren Sie ruhig etwas damit herum - das Verständnis dafür, dass gut gewählte Kontrastverhältnisse zur Lesbarkeit einer Webseite maßgeblich beitragen, wird sich bald einstellen.

Kontrast-Checker
Als praktisches Beispiel wählen wir ein Tool von Lea Verou, Contrast Ratio. Auf einfache Art und Weise lässt sich hier ein Farbcode für Text wie Hintergrund eingeben, das Kontrastverhältnis wird automatisch berechnet. Als Pluspunkt sei angemerkt, dass alle gängigen Werte (RGBA, HSLA, Farbbezeichnungen) und auch Kombinationen aus diesen verarbeitet werden. Veränderungen der Ergebnisse lassen sich problemlos durchführen.

Farbauswahl-Tools
Professionelle Hilfe gibt es auch schon für eine der ersten Entscheidungen bei der Webtext-Gestaltung: der Farbauswahl. Color Safe ist webbasiert und ermöglicht das Experimentieren mit einer Vielzahl von Farbkombinationen, die den Kriterien für Barrierefreiheit immer gerecht werden. Color Safe ist einfach zu benutzen: Wählen Sie zunächst eine Hintergrundfarbe, dann einen Font und eine Schriftgröße aus - als Ergebnis werden WCAG-kompatible Möglichkeiten in einer Auswahlliste angezeigt.

Anpassungs-Tools
Trotz aller Bemühungen mag das Ergebnis einer barrierefreien Webseitengestaltung manchmal doch anders ausfallen, als man sich das vorgestellt hat. Stellen Sie fest, dass Ihre Farbauswahl doch nicht ganz den Mindestanforderungen der WCAG-Richtlinien entspricht, hilft der Tanaguru Contrast Finder bei der Suche nach passenden Alternativen. Dabei wird ein nicht ganz konformes Paar aus Hinter- und Vordergrundfarbe auf Alternativen aus ähnlichen, aber WCAG-kompatiblen Farbpaarungen überprüft. Besonders hilfreich ist das, wenn die ursprünglich gewählte Farbkombinationen nicht allzu weit vom Vorschlag des Tanaguru Contrast Finders entfernt liegt.