Kontrastprüfer (Contrast Checker)

Textkontrast vor der Veröffentlichung prüfen

Ein guter Farbkontrast ist eine der einfachsten Möglichkeiten, eine Website besser lesbar zu machen. Dieser Kontrastprüfer vergleicht Textfarbe und Hintergrundfarbe mit der WCAG-Formel für die relative Luminanz und zeigt dann das Kontrastverhältnis sowie die Ergebnisse „bestanden/nicht bestanden“ für die Stufen AA und AAA an. Er ist nützlich für Schaltflächen, Navigation, Badges, Karten, Warnmeldungen und überall dort, wo Text auf einer farbigen Fläche steht.

Die Berechnung läuft in Ihrem Browser und erfordert keinen Upload. Wählen Sie zwei Farben, tauschen Sie sie bei Bedarf und nutzen Sie den Vorschaublock, um zu sehen, wie ein echter Text wirkt. Das Verhältnis ist objektiv, doch die Vorschau bleibt wichtig, denn Schriftstärke, Buchstabengröße und das umgebende Layout beeinflussen die Lesbarkeit. Ein Paar, das technisch besteht, kann trotzdem ermüdend sein, wenn die Schrift winzig oder die Fläche unruhig ist.

AA- und AAA-Ergebnisse verstehen

WCAG AA ist das übliche Ziel für die meisten Websites und Produkte. Normaler Text sollte mindestens 4,5:1 erreichen, großer Text mindestens 3:1. AAA ist strenger: 7:1 für normalen Text und 4,5:1 für großen Text. Als großer Text gelten 18 pt normal oder 14 pt fett und mehr. Der niedrigere Schwellenwert besteht, weil größere, kräftigere Buchstaben auch bei geringerem Kontrast leichter zu unterscheiden sind als kleiner Fließtext. Wenn Sie unsicher sind, welche Kategorie zutrifft, behandeln Sie den Text als normal und streben Sie die höhere Anforderung an.

Barrierefreie Farbsysteme gestalten

Der Kontrast sollte früh geprüft werden, nicht erst nach Abschluss des visuellen Designs. Wenn Sie Markenfarben wählen, testen Sie sie auf den Flächen, auf denen sie tatsächlich erscheinen: weiße Karten, dunkle Navigationsleisten, gedämpfte Hintergründe und deaktivierte Zustände. Dokumentieren Sie barrierefreie Kombinationen als Tokens, damit Teams sie nicht neu herausfinden müssen. Denken Sie daran, dass Kontrast nur ein Teil der Barrierefreiheit ist. Verwenden Sie sichtbare Fokusrahmen, klare Beschriftungen, semantisches HTML und nutzen Sie nicht allein Farbe, um wichtige Zustände wie Fehler, Erfolg und Warnungen zu vermitteln.