Farbkontraste prüfen, damit Texte für alle lesbar bleiben

Warum Farbkontraste über die Lesbarkeit entscheiden

Farbe trägt auf Websites, in Apps und in Dokumenten nicht nur zur Gestaltung bei. Sie vermittelt Hierarchien, kennzeichnet Links, hebt Fehlermeldungen hervor und trennt Bedienelemente vom Hintergrund. Ist der Kontrast zwischen Vordergrund und Hintergrund zu gering, können Texte und wichtige Informationen schwer erkennbar sein. Betroffen sind nicht nur Menschen mit einer Sehbehinderung. Auch bei ungünstiger Beleuchtung, einem spiegelnden Display, geringer Bildschirmhelligkeit oder altersbedingten Veränderungen der Sehleistung sinkt die Lesbarkeit.

Ein stimmiges Farbschema ist deshalb mehr als eine Geschmacksfrage. Es gehört zur technischen Qualität eines digitalen Angebots. Gute Kontraste unterstützen Menschen mit Farbenfehlsichtigkeit, erleichtern das Lesen auf kleinen Bildschirmen und machen Inhalte unter wechselnden Umgebungsbedingungen robuster. Dabei geht es nicht darum, jede Oberfläche möglichst dunkel oder grell zu gestalten. Entscheidend ist das Verhältnis zwischen der Helligkeit der Textfarbe und der Helligkeit des Hintergrunds.

Die Web Content Accessibility Guidelines, kurz WCAG, des World Wide Web Consortiums, kurz W3C, definieren dafür überprüfbare Anforderungen. Die WCAG 2.2 unterscheidet unter anderem zwischen normalem Text, großem Text und grafischen Bedienelementen. Ein Prüfwerkzeug kann dieses Verhältnis berechnen, doch die technische Messung ersetzt keine vollständige Prüfung der Oberfläche.

Was das Kontrastverhältnis aussagt

Das Kontrastverhältnis beschreibt den Unterschied zwischen der relativen Leuchtdichte zweier Farben. Die hellere Farbe wird dabei zur dunkleren Farbe ins Verhältnis gesetzt. Das Ergebnis wird als Verhältnis wie 4,5:1 oder 7:1 angegeben. Je größer der zweite Wert, desto stärker unterscheidet sich der Text vom Hintergrund.

Die Berechnung basiert nicht auf dem Abstand der Farbwerte in einem gewöhnlichen Farbwähler. Zwei Farben können sich bei den RGB-Werten deutlich unterscheiden und trotzdem eine ähnliche wahrgenommene Helligkeit besitzen. Umgekehrt kann ein kleines Farbupdate den Kontrast spürbar verbessern, wenn dabei die Helligkeit einer Farbe verändert wird. Farbton und Sättigung beeinflussen die Wahrnehmung ebenfalls, für die WCAG-Prüfung ist jedoch die relative Leuchtdichte maßgeblich.

Für die Orientierung gelten nach WCAG 2.2 des W3C diese zentralen Schwellenwerte:

Die Anforderungen sind kontextabhängig. Eine Überschrift ist nicht automatisch großer Text, nur weil sie als Überschrift ausgezeichnet ist. Maßgeblich sind die tatsächliche Darstellung, die Schriftstärke und die in den WCAG festgelegten Kriterien. Sehr dünne Schrift kann trotz formal ausreichendem Verhältnis schwächer wirken als eine kräftigere Schrift mit demselben Farbwert.

Kontrast von Text und Hintergrund korrekt beurteilen

Bei einer Prüfung muss zunächst das tatsächlich sichtbare Farbpaar bestimmt werden. Gemeint ist die Textfarbe gegenüber der Fläche, auf der der Text erscheint. Bei einer weißen Seite mit dunkelgrauer Schrift wird die Schriftfarbe gegen Weiß geprüft. Bei einem Text über einem Bild gibt es dagegen nicht immer ein einziges gültiges Farbpaar. Helle und dunkle Bildbereiche können jeweils einen anderen Kontrast erzeugen.

Auch Transparenz verändert das Ergebnis. Eine halbtransparente weiße Schrift auf einem farbigen Hintergrund erhält nicht automatisch den Kontrast einer vollständig weißen Schrift. Das endgültige Ergebnis hängt von der Mischung der Ebenen ab. Schatten, Verläufe, Überlagerungen und Hintergrundbilder müssen deshalb in der tatsächlich gerenderten Darstellung beurteilt werden.

Besondere Aufmerksamkeit verdienen folgende Stellen:

• Fließtext, Überschriften, Bildunterschriften und Fußnoten
• Links innerhalb von Texten und Navigationselemente
• Formularbeschriftungen, Platzhalter und Fehlermeldungen
• Schaltflächen, Tabs, Menüs und fokussierte Elemente
• Deaktivierte oder nur scheinbar deaktivierte Bedienelemente
• Diagramme, Karten, Infografiken und Statusanzeigen
• Text in Bannern, Cookie-Hinweisen und Dialogfenstern

Platzhaltertexte werden häufig mit einer hellen grauen Farbe gestaltet. Das kann die Lesbarkeit deutlich verschlechtern. Außerdem sollten Platzhalter keine dauerhafte Beschriftung ersetzen, weil ihre Information beim Eingeben verschwindet. Eine sichtbare Beschriftung und ein ausreichender Kontrast lösen zwei unterschiedliche Zugänglichkeitsprobleme.

Farbkontraste mit einem Prüfwerkzeug messen

Für eine belastbare Prüfung eignet sich ein Kontrastprüfer, der zwei Farbwerte entgegennimmt und das Verhältnis ausgibt. Solche Funktionen finden sich in Designprogrammen, Browser-Erweiterungen, Entwicklerwerkzeugen und eigenständigen Prüfprogrammen. Die konkrete Oberfläche kann unterschiedlich sein, das Vorgehen bleibt vergleichbar.

1. Die Textfarbe und die Hintergrundfarbe aus der Gestaltung oder aus der gerenderten Seite ermitteln.
2. Beide Farben in das Prüfwerkzeug eintragen, meist als Hex-, RGB- oder HSL-Wert.
3. Das angezeigte Verhältnis mit der passenden WCAG-Anforderung vergleichen.
4. Prüfen, ob es sich um normalen Text, großen Text, ein Bedienelement oder eine grafische Information handelt.
5. Die Farbe ändern, erneut messen und anschließend die Darstellung bei verschiedenen Bildschirmgrößen kontrollieren.

Bei einer bestehenden Website lassen sich die Werte häufig über die Entwicklerwerkzeuge des Browsers untersuchen. Nach dem Öffnen der Werkzeuge wird das betreffende Element ausgewählt. Im Bereich für berechnete CSS-Eigenschaften stehen die tatsächlich verwendeten Werte für color, background-color und gegebenenfalls weitere Hintergrunddefinitionen. Einige Browser zeigen bei der Farbangabe bereits an, ob ein Kontrastwert bestimmte WCAG-Stufen erfüllt.

Diese Methode hat Grenzen. Ein einzelner Messwert kann eine Seite nicht vollständig bewerten. Ein Text über einem Bild, ein Verlauf oder ein Element mit mehreren Zuständen benötigt eine zusätzliche Sichtprüfung. Außerdem können Betriebssystem, Browser, Zoomstufe und benutzerdefinierte Hochkontrasteinstellungen die Darstellung verändern.

Kontrastprobleme systematisch in der Gestaltung beheben

Wenn ein Text die Anforderung nicht erfüllt, sollte die Gestaltung gezielt angepasst werden. Eine Änderung der Textfarbe ist oft die direkteste Möglichkeit. Bei dunklem Text kann eine deutlich hellere Hintergrundfarbe helfen. Bei weißem Text auf einer farbigen Fläche wird meist ein dunklerer, weniger heller Hintergrund benötigt.

Die folgenden Maßnahmen sind in der Praxis besonders hilfreich:

• Für Fließtext eine gut unterscheidbare Vordergrund- und Hintergrundkombination verwenden.
• Sehr helle Grautöne für wichtige Texte vermeiden.
• Bei Text über Fotos eine deckende oder ausreichend starke Hintergrundfläche einsetzen.
• Bei farbigen Hintergründen eine zusätzliche Textfläche, einen Verlauf oder eine abgedunkelte Überlagerung prüfen.
• Die Schriftstärke und Schriftgröße nicht als alleinige Reparatur für schlechte Kontraste betrachten.
• Farbe nicht als einziges Signal für Fehler, Status, Links oder Auswahlzustände nutzen.
• Für Fokusmarkierungen eine klar sichtbare Kontur oder Fläche vorsehen.

Eine Farbpalette sollte nicht nur aus einzelnen Lieblingsfarben bestehen. Zweckmäßiger ist ein System mit festen Rollen, etwa Hintergrund, Primärtext, Sekundärtext, Link, Akzent, Fehler, Warnung und Erfolg. Für jede Rolle werden erlaubte Kombinationen dokumentiert und geprüft. So lässt sich vermeiden, dass dieselbe Farbe an einer Stelle als Textfarbe und an einer anderen Stelle als Hintergrund verwendet wird, obwohl die Kontrastanforderungen voneinander abweichen.

Links, Zustände und Bedienelemente nicht übersehen

Ein Link muss in einem Fließtext nicht ausschließlich durch Farbe erkennbar sein. Eine Unterstreichung oder ein anderes dauerhaft sichtbares Merkmal erhöht die Auffindbarkeit. Nach WCAG 2.2 gelten für Text, der nur durch Farbe von umgebendem Text unterschieden wird, zusätzliche Anforderungen. Ein ausreichender Kontrast zwischen Link und umgebendem Text ersetzt nicht automatisch die Notwendigkeit eines weiteren visuellen Hinweises, sofern die entsprechende Ausnahme nicht greift.

Bedienelemente brauchen ebenfalls eine erkennbare Darstellung. Bei einer Schaltfläche können Hintergrund und Beschriftung gemeinsam geprüft werden. Zusätzlich müssen die Grenzen oder wesentlichen grafischen Bestandteile eines Bedienelements gegenüber angrenzenden Flächen wahrnehmbar sein. Das betrifft beispielsweise den Rand eines Eingabefelds, das Symbol eines Menüknopfs oder die Kontur eines Kontrollkästchens.

Jeder Zustand sollte einzeln geprüft werden:

• Standardzustand
• Hover- oder Zeigerzustand
• Fokuszustand bei Tastaturbedienung
• Aktiver oder ausgewählter Zustand
• Fehler- und Warnzustand
• Deaktivierter Zustand, soweit die Information weiterhin relevant ist

Ein Fokusrahmen mit zu geringem Kontrast kann dazu führen, dass Tastaturnutzer den aktuellen Standort nicht erkennen. Der Fokus darf deshalb nicht nur durch eine kaum sichtbare Farbänderung dargestellt werden. Eine deutlich abgegrenzte Kontur, ein zusätzlicher Rand oder eine ausreichend große sichtbare Fläche ist verlässlicher.

Farbe allein vermittelt keine vollständige Information

Kontrast und Farbenblindheit sind eng verbunden, aber nicht identisch. Ein ausreichender Helligkeitskontrast kann die Erkennung verbessern, garantiert jedoch nicht, dass alle Farbcodierungen verständlich sind. Rot und Grün werden beispielsweise häufig zur Darstellung von Fehler und Erfolg eingesetzt. Werden diese Zustände nur über die Farbe unterschieden, können wichtige Informationen verloren gehen.

Zusätzliche Kennzeichnungen schaffen Redundanz:

• Fehler mit einem verständlichen Text und einem Symbol kennzeichnen
• Diagrammreihen mit Beschriftungen, Mustern oder unterschiedlichen Linienarten ergänzen
• Ausgewählte Elemente durch Form, Rahmen oder Position hervorheben
• Bei Statusanzeigen neben der Farbe eine Bezeichnung wie „offen“, „erledigt“ oder „Warnung“ anzeigen
• Links im Fließtext mit Unterstreichung oder einer anderen dauerhaften Markierung versehen

Die Auswahl von Farben sollte zusätzlich in einer Simulation verschiedener Farbsehschwächen betrachtet werden. Solche Simulationen sind nützlich, ersetzen aber keine Kontrastmessung. Eine Palette kann in einer Simulation unterscheidbar wirken und dennoch die WCAG-Mindestwerte verfehlen. Umgekehrt kann ein technisch ausreichender Wert bei sehr kleinen oder dünnen Schriften anstrengend wirken.

Prüfung direkt im Design- und Entwicklungsprozess verankern

Kontrastkontrollen sind besonders wirksam, wenn sie vor der Veröffentlichung stattfinden. Wird erst am Ende geprüft, sind Farben oft bereits in Komponenten, Grafiken, Vorlagen und Zuständen verteilt. Änderungen können dann unerwartete Nebenwirkungen auslösen. Ein dokumentiertes Farbsystem reduziert diesen Aufwand.

Für einen wiederholbaren Ablauf bietet sich diese Reihenfolge an:

1. Alle Farbrollen und ihre vorgesehenen Einsatzbereiche erfassen.
2. Die wichtigsten Kombinationen aus Text, Fläche, Rand und Symbol prüfen.
3. Komponenten in allen Zuständen testen, nicht nur im Standardzustand.
4. Besondere Fälle wie Bilder, Verläufe, transparente Ebenen und Dark Mode separat betrachten.
5. Die Seite mit Tastatur, Zoom und unterschiedlichen Bildschirmgrößen kontrollieren.
6. Ergebnisse dokumentieren, damit spätere Anpassungen dieselben Regeln einhalten.

In CSS können Farbrollen über benutzerdefinierte Eigenschaften zentral hinterlegt werden. Das erleichtert die Pflege, weil eine Änderung nicht in zahlreichen einzelnen Regeln gesucht werden muss. Die zentrale Definition verhindert jedoch keine problematische Kombination. Jede tatsächliche Verwendung muss weiterhin gegen ihren Hintergrund geprüft werden.

Bei automatisierten Tests ist außerdem wichtig, die Grenzen automatischer Werkzeuge zu kennen. Sie finden viele offensichtliche Verstöße, erkennen aber nicht zuverlässig, ob ein Text inhaltlich korrekt beschriftet ist, ob ein Symbol verständlich ist oder ob ein Fokuszustand in der realen Nutzung auffällt. Eine manuelle Prüfung ergänzt die automatisierte Analyse.

Typische Fehler bei der Kontrastprüfung

Ein häufiger Fehler besteht darin, nur die Markenfarben zu prüfen. Eine Farbe kann als große Fläche gut funktionieren, als kleine Textfarbe aber unzureichend sein. Ebenso kann eine Textfarbe auf Weiß bestehen, auf einer hellgrauen Fläche jedoch scheitern. Deshalb braucht jede Kombination eine eigene Messung.

Ein weiterer Fehler ist die Prüfung anhand eines Farbcodes aus dem Designentwurf, obwohl die Website später eine andere Transparenz, einen Schatten oder einen Verlauf verwendet. Entscheidend ist die Darstellung, die Nutzer tatsächlich sehen. Bei Bildern sollten mehrere Stellen mit unterschiedlicher Helligkeit kontrolliert werden.

Auch folgende Annahmen führen zu falschen Ergebnissen:

• „Große Überschrift“ wird mit jeder beliebigen großen Schrift gleichgesetzt.
• Eine kräftige Schrift wird als Ersatz für jeden fehlenden Kontrast betrachtet.
• Ein Symbol wird nicht geprüft, weil es kein Text ist.
• Der Standardzustand wird getestet, Fokus und Fehlerzustand bleiben unberücksichtigt.
• Die Farbe wird mit einem Farbwähler beurteilt, ohne das Kontrastverhältnis zu berechnen.
• Eine automatische Prüfung wird als vollständiger Barrierefreiheitstest verstanden.

Werden Kontrastwerte dokumentiert, sollte zusätzlich festgehalten werden, wo die Farben eingesetzt werden. Ein Wert ohne Kontext sagt wenig darüber aus, ob die Kombination für Fließtext, eine dekorative Fläche oder ein interaktives Element gedacht ist.

Praktische Checkliste für die abschließende Kontrolle

Vor der Veröffentlichung oder nach einer größeren Änderung kann folgende Checkliste als kompakter Kontrollablauf dienen:

• Sind Fließtexte und Beschriftungen gegenüber ihrem tatsächlichen Hintergrund ausreichend kontrastreich?
• Wurden große Texte nach den dafür vorgesehenen WCAG-Kriterien bewertet?
• Sind Links auch ohne Farbwahrnehmung auffindbar?
• Besitzen Eingabefelder, Schaltflächen und Symbole erkennbare Grenzen?
• Ist der Tastaturfokus deutlich sichtbar?
• Werden Fehler, Warnungen und Erfolge zusätzlich durch Text, Symbol oder Form erklärt?
• Wurden Bilder, Verläufe, Transparenzen und Dark Mode gesondert kontrolliert?
• Bleibt die Lesbarkeit bei Vergrößerung, kleiner Bildschirmbreite und unterschiedlicher Beleuchtung plausibel?
• Wurden die Ergebnisse für wiederverwendete Komponenten dokumentiert?

Die Prüfung sollte nicht als einmalige Freigabe verstanden werden. Neue Inhalte, ein Redesign, eine geänderte Schrift oder ein neues Farbschema können die Ergebnisse verändern. Ein kurzer Kontrastcheck bei jeder relevanten Designänderung kostet weniger als eine nachträgliche Korrektur zahlreicher Einzelseiten.

FAQ zu lesbaren Farbkontrasten

Welcher Kontrast ist für normalen Text erforderlich?

Nach den WCAG 2.2 des W3C gilt für normalen Text grundsätzlich ein Mindestverhältnis von 4,5:1. Für großen Text nennt die Richtlinie 3:1. Die Einstufung als großer Text richtet sich nach den in der WCAG beschriebenen Merkmalen von Größe und Schriftstärke, nicht allein nach der HTML-Auszeichnung als Überschrift.

Reicht schwarzer Text auf weißem Hintergrund immer aus?

Diese Kombination erreicht in der Regel einen sehr hohen Kontrast. Trotzdem bleiben Schriftgröße, Schriftstärke, Zeilenabstand, überlagernde Elemente und die Darstellung auf Bildern relevante Faktoren. Bei Text über Fotos oder Verläufen muss die konkrete Ausgabe geprüft werden.

Müssen dekorative Texte geprüft werden?

Rein dekorative Elemente ohne Informations- oder Bedienfunktion können anders bewertet werden als wesentliche Inhalte. Sobald ein Text eine Information vermittelt, eine Funktion erklärt oder zur Orientierung dient, sollte er als relevanter Inhalt behandelt werden. Eine vermeintlich dekorative Gestaltung darf keine wichtige Information verbergen.

Kann ein automatisches Werkzeug die gesamte Prüfung übernehmen?

Nein. Ein Werkzeug kann Farbpaare messen und viele technische Probleme markieren. Es beurteilt jedoch nicht zuverlässig die Verständlichkeit einer Farbcodierung, die Sichtbarkeit in allen Zuständen oder die praktische Wahrnehmbarkeit in jeder Nutzungssituation. Automatisierte Messung, manuelle Sichtprüfung und Tastaturkontrolle ergänzen einander.