In der Mitte der Abbildung ist ein Ikon eines Auges. Um das Auge ist ein kalaidoskopisches Muster, das die Farben grün und grau enthält. Außen sind die Kontraste stark während sie zur Mitte hin abnehmen.

Dokumente für alle - Wie erstellt man ein kontrastreiches Dokument?

geschrieben von
Riccarda Stiritz
veröffentlicht

Rot-Grün-Sehschwäche, Farbsehstörung, Farbenblindheit - für circa 5% der deutschen Bevölkerung sind barrierefreie Kontraste in Dokumenten unerlässlich. Doch alle Lesenden profitieren von klaren Kontrasten bei der Erfassung und dem Verständnis von Informationen.

Den Kontrastwert ermitteln 

Erster Check – Sind die Kontraste in meinem Dokument ausreichend? 

Der PDF Accessibility Checker (PAC) kann die Kontraste in Dokumenten prüfen. Die Anwendung macht Sinn, um sich einen ersten Überblick über die bereits vorhandenen Kontraste im Dokument zu verschaffen. Sind die Texte gegenüber des Hintergrunds kontrastreich genug? 

Der PAC 2021 kann kostenlos heruntergeladen werden.

Kontraste berechnen – Welches Kontrastverhältnis besteht im Einzelfall? 

Es gibt Rechner, mit denen man die Kontrastverhältnisse berechnen kann. Ein webbasiertes Angebot ist der Kontrastrechner von Leserlich.info. Hier kann man die RGB-Werte (Rot-Grün-Blau) von Schrift und Hintergrund eintragen und bekommt den exakten Wert ausgerechnet.

Wie man den RGB-Wert in Word ermitteln kann: Den gefragten Text markieren, im Fenster Start den kleinen Pfeil rechts neben Schriftfarbe auswählen, dann auf weitere Farben klicken. Es öffnet sich ein Dialogfenster, hier auf Benutzerdefiniert gehen und der RGB-Wert wird angezeigt.

Bildschirmfoto der Benutzeroberfläche von Microsoft Word. Im Menüpunkt "Start" wurde das Dialogfeld "Schriftfarbe" geöffnet und das Feld "weitere Farben" angewählt.
Abbildung 1: Auswahl der «Schriftfarbe» in Microsoft Word
ildschirmfoto des Dialogfensters "Farben" in Microsoft Word. Gezeigt wird das Feld "Benutzerdefiniert".
Abbildung 2: Dialogfenster «Farben» in Microsoft Word

Alternativ gibt es den englischsprachigen Kontrast-Checker von WebAIM, für den man nur die Hex (z.B. #000000 bei schwarzer Farbe) benötigt. Diese findet man im selben Dialogfenster wie die RGB-Werte. Er ist der unterste Wert im Dialogfenster, siehe Abbildung 2.

Regelmäßige Überprüfung von Kontrasten – Welches Tool? 

Wenn es nicht bei der einmaligen Prüfung von Kontrastwerten bleibt, lohnt sich das Installieren eines Tools. Am weitesten verbreitet ist der Colour Contrast Analyzer (in deutscher Version erhältlich). Zur Ermittlung der Kontrastwerte wird eine Pipette verwendet, mit der man die gesuchte Farbe anklickt und direkt den Farbwert erhält.

Dieses Tool macht außerdem Sinn, wenn man die Werte von Nicht-Text-Inhalten, also z.B. Grafiken oder Text in einem Bild, ermitteln möchte.

Wie erstelle ich kontrastreiche Dokumente? 

Das gilt für Texte 

Die WCAG gibt ein Verhältnis von 4,5:1 als Mindest-Kontrastwert zwischen Text und Hintergrund an. (Dasselbe gilt auch für Text als Bestandteil von Grafiken oder Bildern.)

Dabei gelten folgende Ausnahmen:

  • Für Schriftgrößen ab 18pt oder 14pt Fettdruck sollte ein Mindest-Kontrast von 3:1 verwendet werden. Dasselbe gilt für Bilder, die einen Text abbilden.
  • Es gelten keine Kontrastanforderungen für Texte/Textabbildungen, die zur reinen Dekoration dienen (also unwesentlich für das Verständnis der Inhalte sind) oder Teil eines Bildes sind, das andere bedeutende visuelle Inhalte enthält.
  • Es gelten keine Kontrastanforderungen für Text, der Bestandteil eines Logos ist.

Beispiel: Kontrast-Verhältnis

Beispiele von Kontrastverhältnissen. Der erste Satz ist in Gelb:  Hier liegt das Verhältnis zwischen Text und Hintergrund bei 1.64:1. Der zweite Satz ist in Hellgrau: Hier liegt das Verhältnis zwischen Text und Hintergrund bei 2.46:1. Der dritte Satz in Grün: Hier liegt das Verhältnis zwischen Text und Hintergrund bei 4.53:1. Der vierte Satz in Schwarz: Hier liegt das Verhältnis zwischen Text und Hintergrund bei 21:1.
Abbildung 3: Beispiel von Kontrastverhältnissen

Tipps 

  • Wenn Text über ein Bild gelegt wird, sollte dieser durch eine Farbhinterlegung hervorgehoben werden:
Fotografie einer lilafarbenen Blüte mit einer bunten Häuserfassade im Hintergrund und der Beschriftung "Der Frühling kommt und lädt zum Entdecken ein".
Abbildung 3: Die Stadt Tübingen begrüßt den Frühling (Quelle: https://www.tuebingen.de/)
  • Wenn Links oder Schaltflächen ihre Form verändern, wenn man z.B. mit dem Zeiger darüberfährt/daraufklickt, sollte ein klarer Kontrast weiterhin gewährleistet sein. 
    Es ist außerdem sinnvoll, den Kontrast beim Berühren der Schaltfläche zu erhöhen, um damit die Aktion zu betonen.
    Beispiel Schaltflächen: Wenn man auf der Webseite «ELSTER» einen Menüpunkt auswählt, erscheint dieser in Grün statt in Blau sowie mit einer Markierung am linken Rand (s. linke Abbildung). Wenn man mit dem Zeiger über die Menüpunkte fährt, erscheint eine umrandende Box und der entsprechende Text wird unterstrichen (s. rechte Abbildung):
Links: Screenshot der Menüleiste mit den Punkten "Mein ELSTER", "Mein Benutzerkonto", "Formulare und Leistungen", "Benutzergruppen" und "Weitere Softwareprodukte" zur Auswahl. Rechts: Screenshot der Menüleiste mit den Punkten "Mein ELSTER", "Mein Benutzerkonto", "Formulare und Leistungen", "Benutzergruppen" und "Weitere Softwareprodukte" zur Auswahl. Der Punkt "Benutzergruppen" ist visuell hervorgehoben durch eine Unterstreichung.
Abbildung 4: Menüpunkte auf der Webseite ELSTER (Quelle: https://www.elster.de/eportal/start)
  • Dunkle Schrift auf hellem Hintergrund ist besser lesbar als umgekehrt.
  • Generell eignet sich richtiger Text besser als Text innerhalb eines Bildes zur barrierefreien Übermittlung von Informationen.

Das gilt für Grafiken/Nicht-Text-Inhalte 

Mit Nicht-Text-Inhalten sind grafische Elemente gemeint, die für das Verständnis sowie die Benutzung einer Website wichtig sind.
Es gilt der Mindest-Kontrastwert von 3:1 im Verhältnis von Schrift zu Hintergrund.
Es gibt verschiedene Arten grafischer Elemente:

  • Informationstragende Grafiken: Diese können anstelle von Text verwendet werden (zum Beispiel ein Mail-Icon vor einer E-Mail-Adresse) oder die Funktion eines Buttons erklären (zum Beispiel eine Lupe im Suchfeld).
  • User-Interface-Komponenten: Hierzu zählen zum Beispiel die Umrandung eines Eingabefelds oder der Rahmen einer Check-Box sowie der zugehörige Haken, der gesetzt werden kann.

Beispiel: Kontrast-Verhältnis

Mit einem Kontrastverhältnis von 4.7:1 erfüllen das Mikro (Symbol für Sprachsuche) und die Lupe (Symbol für Suche) die vorgegebenen Standards für informationstragende Grafiken:

Screenshot einer Suchleiste mit der Aufschrift "Durchsuche axes4 GmbH und das Web"
Abbildung 5: Beispiel für eine Suchleiste mit informationstragenden Grafiken

Das gilt für Farben 

Für einen klaren Kontrast zwischen Inhalt und Hintergrund gilt es nicht nur den Mindest-Kontrastwert einzuhalten, sondern auch das Zusammenspiel der jeweiligen Farben zu beachten. Neben einer allgemeinen Sehschwäche können Farb-Sehschwächen (wie z.B. die Rot-Grün-Schwäche) das Erfassen von Informationen zusätzlich erschweren.

Die häufigste Farb-Sehschwäche ist die Rot-Grün-Schwäche. Aber auch andere Komplementär-Kontraste (Rot/Grün, Blau/Orange und Gelb/Violett s. Farbkreis nach Itten) sollten vermieden werden.

Der semantische Einsatz von Farben kann für Menschen ohne Sehschwäche hilfreich bzw. ansprechend sein. Generell sollten Farben jedoch nicht der alleinige Informationsträger sein. Das Zweikanal-Prinzip besagt, dass Informationen immer auf mehreren Wegen zugänglich und Handlungen auf mehreren Wegen ausführbar sein müssen.

Beispiel: Verwendung von Farben mit zusätzlicher Beschriftung

Am Beispiel des Kalenderausschnitts der Müll-Abfuhrtermine in Tübingen kann man erkennen, wie die Verwendung von Farben (z.B. Blau für die Termine, an denen die Altpapier-Tonne geleert wird) durch Buchstaben ergänzt wird (in diesem Fall «AT» für Altpapier-Tonne).
Somit ist eine Zuordnung auch mit Farbsehschwäche möglich:

Monatsübersichten der Monate Januar bis Juni 2022 mit verschiedenfarbigen Markierungen für die jeweilige Müllabfuhr (z.B. grau für Restmüll und grün für Bioabfall).
Abbildung 6: Kalenderausschnitt der Müll-Abfuhrtermine in Tübingen (Quelle: https://www.abfall-kreis-tuebingen.de/online-abfuhrtermine/)

Beispiel: Verwendung von Farben ohne zusätzliche Beschriftung

Im akademischen Kalender dieser Universität wurden die Lehr- und Prüfungswochen sowie Feiertage etc. mit unterschiedlichen Farben gekennzeichnet. Eine Zuordnung der Kalenderinhalte ist nur über diese Farben möglich. Es ist keine Alternative Beschriftung in Textform vorhanden:

Jahresübersicht der Termine von September 2022 bis Juli 2023 mit Markierungen für Vorlesungs- und Prüfungszeiträume, vorlesungsfreie Tage und Feiertage.
Abbildung 7: Akademischer Kalender einer internationalen Universität (Quelle: https://www.uva.nl/)

Das könnte dich auch interessieren

Kurz & gut: Was ist Intersektionalität?

Wieder einmal ein Begriff, der immer wieder in Diskussionen rund um Barrierefreiheit fällt und viele Fragezeichen…

Artikel lesen

Bühne frei für - die „Fundamentals“ der PDF-Barrierefreiheit

Auf dem Blog wurden alle "Fundamentals der PDF-Barrierefreiheit" detailliert erklärt. Hier gibt es eine…

Artikel lesen