Eine Farbpalette kann ästhetisch stimmig sein und trotzdem schwer lesbar. Besonders bei kleinem Text, grauen Beschriftungen, Buttons oder Formularzuständen reicht subjektives „sieht gut aus“ nicht aus.
Die WCAG definieren messbare Kontrastanforderungen. Der Kontrastprüfer von Bethemesh berechnet das Verhältnis zweier Farben und zeigt, ob typische AA- und AAA-Schwellen erreicht werden.
Was ist ein Kontrastverhältnis?
Das Kontrastverhältnis beschreibt den Unterschied zwischen der relativen Helligkeit zweier Farben.
Die Skala reicht von:
- 1:1 – identische Helligkeit;
- bis 21:1 – maximaler Kontrast zwischen Schwarz und Weiß.
Je höher der Wert, desto stärker ist der Helligkeitsunterschied.
Wichtig: Der Wert wird nicht einfach aus den RGB-Zahlen subtrahiert. Die Berechnung berücksichtigt die relative Luminanz nach einer definierten Formel.
Warum Helligkeit nicht nur subjektiv bewerten?
Menschen nehmen Farben unterschiedlich wahr. Zusätzlich verändern Displays, Umgebungslicht, Sehschwächen und Alter die Wahrnehmung.
Ein automatischer Kontrastwert ersetzt keine vollständige Barrierefreiheitsprüfung, schafft aber eine objektive Mindestbasis.
WCAG AA für normalen Text
Für normalen Text gilt im Regelfall:
mindestens 4,5:1
Das betrifft typischen Fließtext, Labels, Navigation und andere kleinere Schriftgrößen.
WCAG AA für großen Text
Für großen oder entsprechend fetten Text ist die Schwelle niedriger:
mindestens 3:1
Die genaue Definition von „groß“ hängt von Schriftgröße und Gewicht ab. In der Praxis sollte man nicht versuchen, schwachen Kontrast durch minimal größere Schrift zu rechtfertigen. Gute Lesbarkeit bleibt das Ziel.
AAA ist strenger
WCAG AAA verlangt für normalen Text in der Regel 7:1, für großen Text 4,5:1.
AAA ist nicht in jedem Projekt die verpflichtende Zielstufe, kann aber für besonders wichtige oder sensible Inhalte sinnvoll sein.
Kontrast ist nicht nur ein Textthema
Auch grafische UI-Komponenten brauchen ausreichende Wahrnehmbarkeit. Beispiele:
- Eingaberahmen,
- Checkboxen,
- Fokusmarkierungen,
- Icons mit Bedeutung,
- Diagramme,
- aktive Tabs,
- Schalter und Controls.
Ein Button, dessen Text gut lesbar ist, kann trotzdem problematisch sein, wenn sich seine Form kaum vom Hintergrund abhebt.
Farbe darf nicht das einzige Signal sein
Ein Formularfehler sollte nicht nur durch Rot angezeigt werden. Ergänze beispielsweise:
- Fehlermeldung,
- Icon,
- Text,
- eindeutige Beschriftung.
Dasselbe gilt für Diagramme: Zwei Reihen sollten nicht ausschließlich durch Rot und Grün unterscheidbar sein.
Rot-Grün ist ein klassisches Problem
Farbenblindheit betrifft verschiedene Wahrnehmungsmuster. Rot und Grün können für manche Menschen schwer unterscheidbar sein.
Das bedeutet nicht, dass diese Farben verboten sind. Entscheidend ist, dass Information zusätzlich über Form, Text, Position oder Symbol vermittelt wird.
Kontrast von Links
Wenn Links nur durch Farbe vom umgebenden Text unterschieden werden, muss die Differenz ausreichend erkennbar sein. Eine Unterstreichung ist oft robuster und reduziert die Abhängigkeit von Farbe.
Besonders bei Fließtext ist eine klare visuelle Kennzeichnung wichtig.
Grauer Text ist häufig zu hell
Viele moderne Designs verwenden sehr helles Grau für sekundäre Informationen. Auf hochwertigen Displays kann das elegant wirken, aber schnell unter die Kontrastschwelle fallen.
„Sekundär“ bedeutet nicht „kaum lesbar“. Auch weniger wichtige Informationen müssen zugänglich bleiben.
Platzhalter sind kein Ersatz für Labels
Placeholder-Text ist oft bewusst hell gestaltet und verschwindet nach der Eingabe. Er sollte daher nicht als einziges Label eines Formularfelds dienen.
Ein dauerhaft sichtbares Label ist in der Regel robuster und verständlicher.