Kontrastprüfung in der Praxis

Warum Kontrast überhaupt wichtig ist

Kontrast ist die wichtigste Voraussetzung für lesbare Texte. Wer die Helligkeit zwischen Textfarbe und Hintergrund unterschätzt, schließt einen großen Teil der Nutzer:innen aus – und zwar nicht nur Menschen mit Sehbeeinträchtigung:

• Menschen mit altersbedingter Sehbeeinträchtigung (ein Drittel der Über-65-Jährigen)
• Menschen mit Farbsehschwächen (etwa 8 % aller Männer, 0,5 % aller Frauen)
• Menschen, die im Sonnenlicht oder bei reflektierenden Bildschirmen arbeiten
• Menschen, die am Smartphone mit gedimmter Helligkeit lesen
• Menschen, die den Bildschirm aus einem ungünstigen Winkel sehen

Schwacher Kontrast ist deshalb keine Detailfrage, sondern eine der grundlegenden Anforderungen für gute UX – mit oder ohne Behinderung. Trotzdem scheitern aktuelle Studien zufolge rund 86 % aller Websites an der Kontrast-Anforderung der WCAG.

Die WCAG-Pflicht: 4,5:1 und 3:1

WCAG 2.2 misst Kontrast als Verhältnis zwischen den Helligkeiten zweier Farben. Reines Schwarz auf Weiß ergibt das Maximum von 21:1, identische Farben ergeben 1:1. Je größer der Wert, desto besser lesbar der Text.

Das BFSG fordert mindestens WCAG 2.1 AA – Kontrast ist damit gesetzlich bindend. Die Schwellenwerte sind klar definiert:

Die wichtigsten Schwellenwerte

• 4,5:1 für normalen Text – kleiner als 18 pt (24 px) oder 14 pt fett (18,5 px fett)
• 3:1 für großen Text – ab 18 pt (24 px) oder 14 pt fett (18,5 px fett)
• 3:1 für UI-Komponenten und Grafiken – Buttons, Eingabefelder, Icons, die zur Funktion gehören (Kriterium 1.4.11)
• 7:1 für erweiterten Anspruch – nur Stufe AAA, keine gesetzliche Pflicht (Kriterium 1.4.6)

Beispiele: Was besteht, was nicht

Die folgenden Vergleiche zeigen typische Farbkombinationen aus der Praxis. Die Verhältnisse sind reale Werte – das hilft, ein Gefühl für Größenordnungen zu bekommen:

Wo WCAG 2.x an seine Grenzen kommt

Das WCAG-2.x-Kontrastverfahren ist einfach zu berechnen und überall in Tools eingebaut. Das ist seine Stärke. Es hat aber konzeptionelle Schwächen, die in der Praxis seit Jahren bekannt sind:

• Lineare Mathematik, nichtlineare Wahrnehmung: Menschen nehmen Kontrast nicht in einem festen mathematischen Verhältnis wahr. Besonders bei dunklen Farben überschätzt WCAG 2 die tatsächliche Lesbarkeit. Ein „4,5:1"-Verhältnis kann bei sehr dunklen Farbtönen praktisch unlesbar sein.
• Schriftgröße und -gewicht ignoriert: WCAG 2 unterscheidet nur zwischen „normalem" und „großem" Text. Eine dünne Schrift in 16 px bekommt dieselbe Anforderung wie eine fette Schrift in 16 px – obwohl die dünne Variante deutlich mehr Kontrast bräuchte.
• Dark Mode wird unsauber behandelt: Heller Text auf dunklem Grund und dunkler Text auf hellem Grund werden mathematisch gleich behandelt. Tatsächlich werden sie unterschiedlich wahrgenommen.
• Bestimmte Farbtöne fallen durch das Raster: Sattes Orange auf Weiß scheitert oft an WCAG 2, ist aber für die meisten Menschen gut lesbar.

Das ist nicht nur akademisch: Studien zeigen, dass viele „durchgefallene" Designs tatsächlich gut lesbar sind, während manche „bestandenen" Kombinationen schwer lesbar bleiben.

APCA: Die neue Methode für WCAG 3

Was macht APCA grundlegend anders? Vier Eigenschaften unterscheiden es vom WCAG-2.x-Verfahren:

1. Perzeptuell uniform

APCA berücksichtigt, wie das menschliche Auge tatsächlich Kontrast wahrnimmt – nicht-linear, abhängig von der Helligkeit der Farben. Ein Lc-Wert von 60 bedeutet immer dieselbe wahrgenommene Lesbarkeit, egal ob die Farben dunkel oder hell sind. Bei WCAG 2.x stimmt das nicht: 4,5:1 zwischen zwei dunklen Farben ist wahrnehmungspsychologisch etwas anderes als 4,5:1 zwischen zwei hellen Farben.

2. Polarität zählt

In APCA ist das Ergebnis abhängig davon, welche Farbe Text und welche Hintergrund ist. Heller Text auf dunklem Grund hat einen negativen Lc-Wert, dunkler Text auf hellem Grund einen positiven. Bei WCAG 2.x ist es egal, herum.

3. Schriftgröße und -gewicht spielen eine Rolle

APCA bringt Tabellen mit, die für jeden Lc-Wert sagen, ab welcher Schriftgröße und welchem Schriftgewicht ein Text noch gut lesbar ist. Dünne Schriften brauchen mehr Kontrast als fette – APCA bildet das ab, WCAG 2 nicht.

4. Dark Mode funktioniert sauber

Weil APCA Polarität berücksichtigt, liefert es auch im Dark Mode verlässliche Werte. Designs, die mit WCAG 2 nur im Light Mode geprüft werden können, lassen sich mit APCA in beiden Richtungen bewerten.

Die Lc-Skala verstehen

APCA liefert Werte von etwa Lc 0 (kein Kontrast) bis Lc 108 (maximaler Kontrast). Negative Werte entstehen, wenn der Text heller als der Hintergrund ist – mathematisch dasselbe Vorzeichen, andere Polarität.

Die wichtigsten Richtwerte aus der APCA-Dokumentation:

• Lc 60 als Minimum für Fließtext ab 16 px Standardgewicht – „Silver"-Level
• Lc 75 für kleinere oder dünnere Texte – „Gold"-Level
• Lc 90 für sehr kleine oder ultra-dünne Schriften
• Lc 45 reicht für sehr große Überschriften (ab 24 px fett)

APCA und WCAG 2 im direkten Vergleich

Welche Methode für meine Arbeit?

Die pragmatische Antwort sieht deshalb so aus: WCAG 2.x als rechtliche Basis, APCA als zusätzliches Design-Werkzeug.

• WCAG 2.x: Für Konformitätsprüfung, Audits, BFSG-Erklärungen und alles, was rechtlich dokumentiert werden muss.
• APCA: Als Zweitmeinung im Design-Prozess. Wenn WCAG 2.x knapp besteht, APCA aber schlechte Werte liefert, ist das ein Signal, dass der Kontrast in der Praxis zu schwach sein könnte.
• Niemals nur APCA: Solange WCAG 2.x die rechtliche Grundlage ist, muss jeder kritische Kontrast auch dort bestehen.

Tools für die tägliche Arbeit

Die folgende Auswahl hat sich in der Praxis bewährt – mit Tools für jeden Bedarf, von der schnellen Prüfung im Browser bis zur systematischen Analyse im Audit:

• WCAG 2 · Browser WebAIM Contrast Checker Der Klassiker. Einfache Eingabe von zwei Hex-Werten, sofortige Bewertung für AA und AAA. Ideal für schnelle Einzelprüfungen.
• APCA · Browser APCA Contrast Calculator Das Original-Tool von Andrew Somers. Liefert Lc-Werte und konkrete Empfehlungen für Schriftgröße und -gewicht.
• WCAG 2 · Desktop Colour Contrast Analyser (CCA) Kostenloses Desktop-Tool mit Pipette für macOS und Windows. Perfekt zum Prüfen von Farben direkt aus Designs oder Live-Websites.
• WCAG 2 · Browser-Erweiterung axe DevTools Findet automatisch alle Kontrastfehler auf einer Seite. Für systematische Prüfungen im Browser unverzichtbar – als Chrome/Firefox-Erweiterung.
• WCAG 2 + APCA · Figma Stark für Figma Prüft Kontraste direkt im Design – noch bevor etwas live geht. Unterstützt sowohl WCAG 2 als auch APCA.
• APCA · Browser Huetone Visualisiert Farbpaletten mit APCA-Werten. Besonders wertvoll, um ganze Design-System-Farben zu prüfen.

Workflow: So prüfst du systematisch

Wer Kontraste systematisch prüfen will, geht in drei Phasen vor. Diese Reihenfolge spart Aufwand und vermeidet, dass am Ende eine Kombination durchrutscht:

Phase 1: Design-System

Bevor irgendein Pixel platziert wird, prüfst du die Farb-Token deines Design-Systems gegeneinander. Welche Textfarben dürfen auf welchen Hintergründen stehen? Welche Kombinationen sind tabu? Das Ergebnis ist eine Kontrast-Matrix – eine Tabelle, die zeigt, welche Paare bestehen und welche nicht.

Phase 2: Einzelne Bildschirme

Auf jeder konkreten Seite kommen Sonderfälle dazu: Text auf Bildern, Text auf Gradienten, semi-transparente Overlays, hover-Zustände, fokussierte Buttons. Hier prüfst du jede dieser Stellen einzeln. Mein Tipp: die häufigsten Komponenten zuerst – Buttons, Links, Formularfelder, Header.

Phase 3: Live-Prüfung

Wenn die Seite gebaut ist, läuft eine automatisierte Prüfung mit axe DevTools oder ähnlichem Werkzeug über die wichtigsten Seiten. Das fängt Fälle ein, bei denen Code anders rendert als das Design vorgesehen hatte. Bei knappen Werten lohnt sich der zusätzliche Check mit APCA.