Prüfen Sie den Kontrast jeder Text- und Funktionskombination im realen Zustand und ergänzen Sie die Bedeutung von Farbe stets durch Text, Icon, Form oder Muster.
Farbe hilft, Hierarchie und Markenwirkung zu schaffen, darf aber nicht der einzige Bedeutungsträger sein. Ein rotes Feld ohne Text, ein grüner Punkt ohne Beschriftung oder ein grauer Link ohne Unterstreichung können bei Farbsehschwächen, auf einem schwachen Display und bei direkter Sonneneinstrahlung unklar sein. Der Kontrast ist zwischen den konkreten benachbarten Farben und im tatsächlichen Zustand des Elements zu beurteilen.
Barrierefreies Design bedeutet nicht, die Website auf Schwarz und Weiß zu beschränken. Es braucht definierte Farbpaare für Text und Nicht-Text-Elemente, ein zusätzliches Merkmal für Zustände sowie Tests von Themes, Fokus, Bildern und Diagrammen. Prüfen Sie die aktuellen WCAG-Anforderungen und die Berechnungsmethode in offiziellen Quellen; der visuelle Eindruck oder der Name einer Farbe allein ist keine Messung.
Text wird gegen den tatsächlichen Hintergrund gemessen
Prüfen Sie Fließtext, Überschriften, Links, Beschriftungen, Platzhalter, Fehlermeldungen sowie Text auf Schaltflächen. Der Hintergrund kann eine Vollfarbe, ein Verlauf, ein Foto oder eine halbtransparente Ebene sein. Testen Sie bei Bildern die ungünstigste Stelle oder fügen Sie einen stabilen Untergrund hinzu. Ein Textschatten ist kein verlässlicher Ersatz für eine geeignete Farbkombination.
Schriftgröße und Schriftstärke beeinflussen das Kriterium, verlassen Sie sich aber nicht auf ein Design am Grenzwert. Eine eigene Schriftart kann dünner dargestellt werden, und der Nutzer kann die Skalierung ändern. Definieren Sie Farben als Tokens mit festgelegter zulässiger Verwendung, damit ein Redakteur nicht versehentlich hellen Text für kleine Beschriftungen oder Links wählt.
Bedienelemente und Fokus brauchen Nicht-Text-Kontrast
Der Rahmen eines Eingabefelds, ein Icon, ein Häkchen, ein grafischer Schalter und der Fokusindikator tragen auch ohne Text eine funktionale Bedeutung. Prüfen Sie sie gegenüber ihrer Umgebung und zwischen den Zuständen anhand der aktuellen Kriterien. Verschmilzt ein Feld mit dem Hintergrund, erkennt der Nutzer möglicherweise nicht, wo er schreiben soll, auch wenn das Label einen hervorragenden Kontrast hat.
Der Fokus muss sich vom nicht fokussierten Zustand und von benachbarten Farben unterscheiden lassen. Hover ersetzt nicht den Fokus, und „selected“ ersetzt nicht „disabled“. Testen Sie die Komponente auf verschiedenen Oberflächen, denn derselbe blaue Umriss kann auf einer weißen Karte funktionieren und auf einem blauen Banner verschwinden. Das Designsystem sollte die zulässigen Kombinationen angeben.
- Feldränder und aktive Bedienelemente
- Icons, die zum Verständnis der Funktion nötig sind
- sichtbarer Fokus auf jeder Oberfläche
- Unterscheidung von active, selected, error und disabled
Ein Status braucht eine textliche oder formbasierte Entsprechung
Kennzeichnen Sie Fehler mit Text und verknüpfen Sie sie mit dem Feld, bestätigen Sie Erfolg mit einer Meldung und erklären Sie Pflichtfelder mit einem Wort oder einem Symbol samt Legende. Verwenden Sie in Tabellen nicht nur grüne und rote Zellen. Ergänzen Sie Text, ein Symbol mit zugänglichem Namen oder ein Muster, das auch ohne Farbe verständlich bleibt.
Heben Sie Links im Fließtext auf eine Weise hervor, die nicht nur auf dem Farbton beruht, zum Beispiel durch Unterstreichung. Verstärken Sie die Veränderung bei Hover und Fokus, statt sie zu entfernen. Ein alleinstehendes Icon benötigt einen Textnamen, wenn es eine Aktion ausführt. Ein dekoratives Icon sollte dagegen nicht unnötig von assistiven Technologien angesagt werden.
Diagramme, Karten und Bilder erfordern ein eigenes Datenkonzept
Kombinieren Sie in einem Diagramm Farbe mit Punktform, Linienart, Muster oder direkter Beschriftung. Eine weit von den Daten entfernte Legende erhöht den Aufwand. Stellen Sie eine Textzusammenfassung und bei Bedarf eine barrierefreie Tabelle bereit. Erhöhen Sie die Anzahl farbiger Datenreihen nicht über das Maß hinaus, in dem sie sich zuverlässig unterscheiden lassen, nur weil das Werkzeug eine Palette anbietet.
In ein Bild eingebetteter Text lässt sich schwer vergrößern und übersetzen. Ist er unvermeidlich, braucht er eine Alternative und einen geprüften Kontrast in der finalen Ausgabe. Eine Karte sollte einen Zustand nicht nur über die Farbe der Pins vermitteln; eine Ortsliste oder Filter mit Text ermöglichen dieselbe Aufgabe auch Nutzern, die den visuellen Code nicht sehen.
- direkte Beschreibungen von Datenreihen und Werten
- Form oder Muster zusätzlich zur Farbe
- Textliche Zusammenfassung der wichtigsten Erkenntnis
- alternative Tabelle bei detaillierten Daten
- in allen Themes geprüfter Kontrast
- Bedeutung des Status auch ohne Farbe erkennbar
- Hover, Focus und Selected als unterschiedliche Zustände
- Prüfung der resultierenden Farbe nach Anwendung der Transparenz
- zulässige Farbpaare im Designsystem
Die Tests decken Tokens, Inhalte und Benutzereinstellungen ab
Prüfen Sie gängige Kombinationen automatisch, gehen Sie jedoch Hover, Focus, Error, Disabled, Modal und dynamische Inhalte manuell durch. Testen Sie helles und dunkles Theme, den hohen Systemkontrast sowie deaktivierte Hintergrundbilder. Die Pipette muss die resultierende Farbe nach der Transparenz messen, nicht nur den Token-Wert in der Quelldatei.
Ergänzen Sie den Veröffentlichungsprozess um zulässige Stile und eine Prüfung neuer Komponenten. Eine Änderung der Markenfarbpalette erfordert ein Regressionsaudit, da sie Dutzende Zustände betreffen kann. Nutzertests decken Bedeutungsverwechslungen auf, die das Kontrastverhältnis allein nicht zeigt. Das Erfüllen des technischen Minimums ist keine Garantie für angenehmes Lesen.
Häufige Fragen
Reicht es, den Kontrast des Fließtexts zu prüfen?
Nein. Prüfen Sie Links, Beschriftungen, Platzhalter, Buttons, Feldbegrenzungen, Icons, Fokus und alle interaktiven Zustände auf ihrem tatsächlichen Hintergrund.
Können wir einen Fehler rot markieren?
Ja, als Ergänzung, nicht als einziges Signal. Ergänzen Sie verständlichen Text, eine programmatische Zuordnung und bei Bedarf ein Icon oder ein weiteres visuelles Merkmal.
Ist ein automatischer Kontrasttest vollständig?
Nein. Es erkennt möglicherweise nicht alle Zustände, Verläufe, Bilder oder die durch Farbe vermittelte Bedeutung. Ergänzen Sie es durch manuelle Prüfungen und Tests mit Nutzern.
Quellen und weiterführende Lektüre
Adam Antoni vyvíja weby, aplikácie a softvér na mieru. Prepája firemné systémy, automatizuje procesy a vytvára AI agentov. Pôsobí v Spišskej Novej Vsi a spolupracuje s firmami na celom Slovensku.
