Kontraste und Farben: Ein Prüfablauf für dein Webdesign

Die Mindestwerte richtig einordnen

WCAG 2.2 AA verlangt für normalen Text mindestens 4,5:1 Kontrast zum Hintergrund. Großer Text braucht mindestens 3:1. Als groß gelten mindestens 18 Punkt beziehungsweise 14 Punkt bei fetter Schrift; bei CSS entsprechen 18 Punkt 24 Pixeln. Überschriften sind daher nicht allein aufgrund ihrer Funktion vom höheren Wert ausgenommen. Der berechnete Wert wird nicht aufgerundet: 4,49:1 unterschreitet 4,5:1.

Die Richtlinie enthält Ausnahmen, etwa für rein dekorativen Text, inaktive Bedienelemente und Schrift in Logos. Ein normaler Fließtext in der Markenfarbe fällt nicht unter die Logo-Ausnahme. Plane im Alltag etwas Reserve ein, besonders bei dünnen Schriften.

Nicht nur Text messen

Wichtige grafische Informationen und visuelle Merkmale, an denen Menschen aktive Bedienelemente oder deren Zustand erkennen, benötigen nach Erfolgskriterium 1.4.11 grundsätzlich 3:1 zu angrenzenden Farben. Das betrifft beispielsweise ein notwendiges Feldrechteck, ein aussagekräftiges Symbol oder die Markierung einer ausgewählten Checkbox. Die konkrete Darstellung entscheidet; nicht jeder dekorative Rahmen muss diesen Wert erfüllen.

Prüfe ein Suchfeld deshalb als Ganzes: Kannst du das Feld erkennen, den eingegebenen Text lesen und den Tastaturfokus unterscheiden? Eine kontrastreiche Beschriftung allein löst einen unsichtbaren Fokus nicht.

Information mit Worten und Formen ergänzen

Eine rote Umrandung erklärt noch keinen Fehler. Ergänze zum Beispiel: „Bitte gib eine E-Mail-Adresse mit @ ein.“ Ein Verfügbarkeitsstatus kann neben dem farbigen Punkt „Auf Lager“ zeigen. Diagramme werden verständlicher, wenn Linien zusätzlich unterschiedliche Muster und direkte Beschriftungen besitzen. So bleibt die Bedeutung sichtbar, wenn jemand Farben anders wahrnimmt oder einen Bildschirm mit verändertem Farbmodus nutzt.

Eine Farbmatrix für echte Komponenten anlegen

• Sammle Fließtext, Links, Buttons, Eingabefelder, Hinweise und Fehlermeldungen aus deinem tatsächlichen Design.
• Notiere je Komponente Vordergrund und Hintergrund für Standard, Fokus, Auswahl und Fehlerzustand.
• Messe die verwendeten CSS-Farben mit einem Kontrastprüfer; beachte Transparenz, Bilder und Farbverläufe im Hintergrund.
• Lege gut lesbare Varianten als gemeinsame Designwerte fest und korrigiere die Komponente an ihrer Quelle.
• Kontrolliere anschließend helle und dunkle Darstellung sowie die betroffenen Seiten im Browser.

Beispiel: Ein Formular statt nur eine Palette prüfen

Nimm ein Kontaktformular und löse absichtlich einen Fehler aus. Prüfe Feldbeschriftung, Eingabetext, Fehlermeldung und Absende-Button. Wechsle mit der Tastatur zwischen den Feldern. Vergrößere die Seite und kontrolliere, ob die Fehlermeldung weiterhin zu ihrem Feld gehört. Dieses kleine Szenario zeigt, welche Farbkombinationen im Produkt tatsächlich zusammentreffen, und liefert einen wiederholbaren Test für spätere Änderungen.

Die Freigabe nachvollziehbar festhalten

Dokumentiere die geprüfte Komponente, ihre Zustände und die verwendeten Werte. Ergänze bei Bildhintergründen den konkreten Ausschnitt oder eine stabile Textfläche. Ein automatisch gefundener Kontrastfehler ist ein hilfreicher Einstieg; die Aussagekraft endet beim tatsächlich geprüften Zustand. Prüfe neue Komponenten und größere Designänderungen erneut, damit die freigegebenen Kombinationen auch im Alltag erhalten bleiben.