Wie Sie den Farbkontrast für Barrierefreiheit prüfen

Etwa 1 von 12 Männern und 1 von 200 Frauen haben eine Form von Farbsehschwäche. Millionen weitere haben eingeschränkte Sehkraft, alternde Augen oder betrachten Bildschirme bei hellem Sonnenlicht. Wenn Ihr Text nicht genügend Kontrast zu seinem Hintergrund hat, können diese Menschen ihn nicht lesen. Farbkontrast ist nicht nur ein Nice-to-have, sondern eine zentrale Barrierefreiheitsanforderung. Ein browserbasierter Kontrastprüfer erledigt die gesamte Arbeit lokal, ohne Farben oder Daten auf einen Server hochzuladen.

Was WCAG erfordert

Die Web Content Accessibility Guidelines (WCAG) definieren minimale Kontrastverhältnisse zwischen Text und seinem Hintergrund:

«Großer Text» bedeutet 18px fett oder 24px normal und größer. Das Kontrastverhältnis reicht von 1:1 (kein Kontrast, weiß auf weiß) bis 21:1 (maximaler Kontrast, schwarz auf weiß).

So überprüfen Sie den Kontrast

1. Wählen Sie Ihre Farben: Geben Sie die Vordergrund- (Text) und Hintergrundfarben mit HEX-Codes, RGB-Werten oder Farbpaletten ein.
2. Überprüfen Sie die Ergebnisse: Das Tool zeigt sofort das Kontrastverhältnis an und ob Ihre Kombination WCAG AA und AAA für normalen und großen Text besteht.
3. Anpassen, falls nötig: Wenn der Kontrast fehlschlägt, verdunkeln Sie den Text oder hellen Sie den Hintergrund auf (oder umgekehrt), bis Sie die erforderliche Stufe bestehen.

Eine kurze Geschichte der Farbkontrast-Standards

Vor WCAG war die Web-Barrierefreiheit ein Flickenteppich aus anbieterspezifischen Regeln. Das W3C veröffentlichte WCAG 1.0 im Jahr 1999, mit Kontrast-Richtlinien, aber ohne spezifisches Verhältnis. WCAG 2.0 (2008) führte die 4,5:1 / 7:1-Formel ein, basierend auf der Farbwissenschaft von Dr. Lillian Yetenekian und dem IBM Research Lab, mit Input von Forschern für Sehbehinderte. Die Formel ist so konzipiert, dass eine Person mit 20/40-Sehkraft (leichte Sehbehinderung) AA-konformen Text lesen kann und eine Person mit 20/80-Sehkraft (signifikante Sehbehinderung) AAA-konformen Text lesen kann.

WCAG 2.1 (2018) fügte Kontrastanforderungen für UI-Komponenten (3:1 für Nicht-Text), grafische Objekte und Fokusindikatoren hinzu. WCAG 2.2 (2023) fügte mehr Anforderungen um Zielgrößen und Fokussichtbarkeit hinzu.

Der aktuelle WCAG 3.0-Arbeitsentwurf schlägt eine neue Kontrastformel (APCA, Accessible Perceptual Contrast Algorithm) vor, die besser zur menschlichen Wahrnehmung passt, besonders für dunkleren Text. APCA ist noch keine W3C-Empfehlung, wird aber bereits von einigen Tools als Vorschau unterstützt.

Die rechtliche Übernahme von WCAG war stetig:

• USA: Section 508 des Rehabilitation Act (Bundesebene) und ADA-Rechtsprechung erfordern WCAG 2.0 / 2.1 AA
• EU: Web Accessibility Directive (2016/2102) und European Accessibility Act (2025) erfordern EN 301 549, was WCAG 2.1 AA entspricht
• UK: Public Sector Bodies Accessibility Regulations erfordert WCAG 2.1 AA
• Kanada: ACA (Accessible Canada Act) für Bundesbereich, AODA (Ontario) für Unternehmen
• Australien: DDA-Rechtsprechung behandelt WCAG 2.1 AA als Standard
• Japan: JIS X 8341-3:2016 (basierend auf WCAG 2.0)

Für die meisten öffentlichen Websites ist WCAG 2.1 AA das de-facto rechtliche Minimum.

Wie das Kontrastverhältnis berechnet wird

Das Kontrastverhältnis wird unter Verwendung der relativen Luminanz jeder Farbe berechnet:

1. Jede Farbe von sRGB in lineares RGB konvertieren (Gamma-Korrektur)
2. Relative Luminanz berechnen: L = 0,2126 R + 0,7152 G + 0,0722 B
3. Kontrast = (L_heller + 0,05) / (L_dunkler + 0,05)

Das Ergebnis ist eine Zahl von 1 (kein Kontrast) bis 21 (maximaler Kontrast). Die 0,05-Offsets verhindern Division durch Null und modellieren leicht den Beitrag des Umgebungslichts zum wahrgenommenen Kontrast.

Die Formel wurde absichtlich so konzipiert, dass sie deterministisch und berechenbar ist, sodass die gleichen Farben immer das gleiche Verhältnis ergeben. Sie berücksichtigt nicht:

• Farbenblindheit: Ein Rot/Grün-Paar kann ein Verhältnis von 7:1 haben, aber für eine Person mit Rot/Grün-Farbenblindheit unsichtbar sein
• Schriftgewicht über fett hinaus: Ultra-dünne oder Haarstrich-Schriften benötigen höheren Kontrast
• Anti-Aliasing-Artefakte: sehr dünne Striche können heller erscheinen, als der Farbwert nahelegt
• Hintergrundmuster: Verläufe, Bilder oder Rauschen hinter Text degradieren den effektiven Kontrast

Deshalb sind WCAG-Prüfungen notwendig, aber nicht ausreichend. Visuelle Überprüfung mit diversen Benutzern (einschließlich Farbenblinder) fängt den Rest ab.

Häufige Kontrastfehler

Hellgrauer Text auf Weiß: #999999 auf #ffffff hat ein Verhältnis von nur 2,8:1. Das versagt bei WCAG AA. Es mag für einen Designer mit perfektem Sehvermögen «sauber» aussehen, aber es ist für viele Menschen unlesbar.

Farbiger Text auf farbigen Hintergründen: Ein blauer Knopf mit weißem Text besteht oft, aber ein grüner Knopf mit weißem Text möglicherweise nicht. Immer überprüfen, Sie können das Kontrastverhältnis nicht mit dem Auge beurteilen.

Platzhaltertext: Formularfeld-Platzhalter sind notorisch kontrastarm. Während WCAG nicht streng verlangt, dass Platzhalter Kontrastverhältnisse erfüllen, müssen Benutzer sie trotzdem lesen können.

Dunkler Modus: Designer verwenden oft mittelgrauen Text auf dunkelgrauen Hintergründen für einen «subtilen» Look. Das versagt häufig bei Kontrastprüfungen.

Text über Bildern: Text, der über einem Hero-Bild platziert wird, besteht oft, wenn das Bild dunkel ist, und versagt, wenn das Bild hell ist. Verwenden Sie einen dunkel/hell-Verlaufsoverlay oder festen Hintergrund hinter Text über Bildern.

Markenfarbverschiebungen: Die Unternehmensidentität diktiert oft eine primäre Markenfarbe. Wenn diese Farbe als Fließtext versagt, verwenden Sie sie für Überschriften (großer Text, 3:1-Schwellenwert) und verwenden Sie einen dunkleren Farbton für den Fließtext.

Linkfarben: Links müssen vom umgebenden Text unterscheidbar sein. WCAG erfordert ein Verhältnis von 3:1 zwischen Link und Fließtext sowie einen weiteren visuellen Hinweis (Unterstrich, fett oder Symbol).

Fokusindikatoren: Die Kontur um eine fokussierte Schaltfläche oder einen Link muss 3:1-Kontrast gegen ihren Hintergrund erfüllen. Standard-Fokusringe des Browsers sind normalerweise sicher; benutzerdefinierte Fokusstile versagen oft.

Häufige Stolperfallen

• Nur Überschriften testen: Kontrast muss für jede Textgröße und Gewichtskombination auf der Seite überprüft werden. Fließtext, Bildunterschriften, Beschriftungen, Schaltflächen, Symbole und Formularfelder müssen alle überprüft werden.
• Hover- und Aktivzustände vergessen: Ein Link, der standardmäßig Kontrast besteht, kann beim Hover (hellere Farbe) oder aktiv (anderer Hintergrund) versagen. Überprüfen Sie alle Zustände.
• Deaktivierte Zustände ignoriert: WCAG schließt deaktivierte Zustände explizit von Kontrastanforderungen aus, aber barrierefreies Design strebt immer noch eine sichtbare Unterscheidung an.
• Transluzente Overlays: Text auf einem 50% transparenten dunklen Overlay verhält sich wie seine effektive Farbe, nicht die Eingabefarbe. Komponieren Sie die effektive Farbe vor der Überprüfung.
• Anti-aliased dünner Text: 12px Inter Thin bei 8,5:1-Verhältnis ist immer noch schwer zu lesen. Überprüfen Sie mit der tatsächlich gerenderten Schrift, nicht nur dem Farbwert.
• HSL-Konvertierungsabweichung: Das Anpassen von Farben im HSL-Raum kann Werte erzeugen, die ähnlich aussehen, aber beim Kontrast versagen. Überprüfen Sie immer nach Farbanpassungen erneut.
• Markenfarben durch Stakeholder gesperrt: Wenn eine Markenfarbe nicht geändert werden kann, verwenden Sie sie strategisch (nur großer Text) und wählen Sie eine andere Farbe für den Fließtext. Dokumentieren Sie die Begründung für Stakeholder.
• Druckkontrast vergessen: Eine Website kann den Kontrast auf dem Bildschirm bestehen, aber beim Drucken in Graustufen versagen. Testen Sie die gedruckte Ausgabe für Dokumente, die zum Drucken bestimmt sind.
• Text auf Video: Video-Hintergründe ändern sich ständig. Heften Sie entweder ein statisches Frame an, fügen Sie einen Verlaufsoverlay hinzu oder verwenden Sie einen festen Hintergrund.
• Internationalisierung ändert Zeichendichte: Chinesische, japanische, koreanische Zeichen sind dichter als lateinische. Ein 4,5:1-Verhältnis, das auf Englisch gut lesbar ist, kann Leser von CJK-Sprachen bei gleicher Größe anstrengen. Erhöhen Sie für internationalen Text auf 7:1.

Jenseits von WCAG: APCA und moderner perzeptiver Kontrast

Der Accessible Perceptual Contrast Algorithm (APCA) ist eine neuere Formel, die Andrew Somers für WCAG 3.0 vorgeschlagen hat. Im Gegensatz zur WCAG 2-Formel berücksichtigt APCA:

• Schriftgewicht und -größe im Kontrastscore: Dünnere oder kleinere Schriften benötigen mehr Kontrast
• Verwendet nicht-lineare perzeptive Skalierung: Entspricht, wie menschliche Sehkraft tatsächlich auf Luminanz reagiert
• Behandelt dunkle Hintergründe besser: WCAG 2 überbewertet Kontrast auf dunklen Hintergründen; APCA korrigiert das
• Produziert einen polaritätsbewussten Score: positiv für dunklen Text auf hellem Hintergrund, negativ für das Gegenteil

APCA-Scores reichen ungefähr von -108 bis +108. Ein Score von 60 (positiv oder negativ) entspricht ungefähr WCAG 2's 4,5:1. APCA ist noch nirgends gesetzlich erforderlich, wird aber von Designsystemen wie Material Design und IBM Carbon als zukunftsorientierter Standard übernommen.

Für die meisten praktischen Zwecke heute bleibt WCAG 2.1 AA (4,5:1 / 3:1) der rechtliche und Industrie-Standard. Einige Teams verwenden APCA parallel als Qualitätsprüfung.

Werkzeuge und Integrationen

Integrieren Sie mindestens ein automatisiertes Tool in CI, damit Kontrastfehler nicht unbemerkt geliefert werden können.

Tipps

• Überprüfen Sie jede Text/Hintergrund-Kombination: Nehmen Sie nichts an. Selbst erfahrene Designer sind überrascht, welche Kombinationen versagen.
• Beide Themen testen: Wenn Ihre Website helle und dunkle Modi hat, überprüfen Sie den Kontrast in beiden. Eine Farbe, die auf Weiß funktioniert, kann auf Dunkelgrau versagen.
• Verwenden Sie Ihre Markenfarben weise: Wenn Ihr Markenblau als Textfarbe versagt, verwenden Sie es für größere Elemente (Schaltflächen, Überschriften), wo der große Text-Schwellenwert (3:1) gilt, und verwenden Sie einen dunkleren Farbton für Fließtext.
• Verlassen Sie sich nicht nur auf Farbe: Zusätzlich zu ausreichendem Kontrast vermitteln Sie Informationen niemals nur durch Farbe. Verwenden Sie Symbole, Textbeschriftungen oder Muster neben der Farbe, um sicherzustellen, dass alle den Inhalt verstehen können.
• Mit Simulatoren testen: Ein Farbenblindheits-Simulator zeigt, wie Ihr Design für Benutzer mit Protanopie, Deuteranopie oder Tritanopie aussieht. Häufige Paare (rot/grün) versagen oft.
• Bei Sonnenlicht testen: Nehmen Sie Ihr Telefon an einem hellen Tag mit nach draußen. Text, der WCAG kaum besteht, kann unter direktem Sonnenlicht unlesbar werden. AAA-Kontrast (7:1) ist das praktische Minimum für Outdoor-Sichtbarkeit.
• Barrierefreie Farbpaletten speichern: Bauen Sie eine Palette, in der jede Textfarbe gegen jede Hintergrundfarbe besteht. Beschränkung vorne, keine Kontrast-Überraschungen später.
• Stakeholder schulen: Stakeholder, die eine kontrastarme Markenfarbe verlangen, ändern oft ihre Meinung, wenn ihnen das Design durch einen Sehbehinderten-Simulator gezeigt wird.

Datenschutz und Designdaten

Der Farbkontrast-Prüfer läuft vollständig in Ihrem Browser. Die Farben und Werte, die Sie eingeben, die Berechnungen und die Kontrastergebnisse bleiben alle auf Ihrem Gerät. Nichts wird auf einen Server hochgeladen, protokolliert oder mit irgendjemandem geteilt.

Das ist weniger wichtig für einzelne Farben (sie sind nicht geheim) und wichtiger für Batch-Prüfung oder Designsystem-Arbeit, wo Sie eine vollständige Markenpalette, interne Produktmockup-Farben oder unveröffentlichte Produkt-UI-Spezifikationen einfügen könnten. Cloud-Kontrast-Tools protokollieren jedes Einfügen in ihren Anfrageprotokollen, behalten sie manchmal zur «Service-Verbesserung» und könnten unveröffentlichte Markenfarben oder UI-Designs preisgeben. Ein browserbasierter Prüfer hat null Exposition: Die Farben verlassen niemals Ihren Computer.

Browserbasierte Kontrastprüfung funktioniert auch offline, sobald die Seite geladen ist, nützlich für Design-Reviews in Flugzeugen, in sicheren Umgebungen ohne Internetzugang oder überall dort, wo Sie keine Designdaten mit einem Drittanbieter-Dienst teilen können oder sollten.