Farbpalette auf Kontrast prüfen (bis zu 12 Farben)

Ihre Farben, eine pro Zeile

Bis zu 12 Farben als Hex, rgb(), hsl() oder Farbname, mit optionalem Namen vor einem Doppelpunkt: „Primary: #2f47d9“. CSS-Variablen wie „--brand: #2f47d9;“ funktionieren auch.

Gelesene Farben

Textfarbe auf Hintergrundfarbe nach der WCAG-2.x-Formel. Eine halbtransparente Farbe wird zuerst mit dem Hintergrund gemischt, ein halbtransparenter Hintergrund mit Weiß. Die Prüfung läuft in Ihrem Browser; die Farben werden nirgendwohin gesendet.

Die Matrix braucht JavaScript. Ohne es können Sie die Kontrastregeln im Text unter dem Werkzeug trotzdem lesen.

Ein Kontrastprüfer beantwortet eine Frage für ein Paar. Eine Marke hat ein Dutzend Farben und Dutzende Paare. Geben Sie Ihre Palette ein, bis zu 12 Farben, und die Tabelle zeigt das WCAG-Kontrastverhältnis jedes Paars: welche Paare für Text sicher sind und welche nur für große Schrift, Icons und Rahmen taugen. Die Berechnung läuft in Ihrem Browser; die Farben werden nirgendwohin gesendet.

So geben Sie die Farben ein

Eine Farbe pro Zeile oder durch Semikolon getrennt. Ein Name vor dem Doppelpunkt ist optional: Primary: #2f47d9. Möglich sind Hex (auch mit Alpha), rgb(), rgba(), hsl(), hsla(), Farbnamen wie navy und CSS-Variablen aus Ihrem Stylesheet wie --brand-500: #2f47d9;. Eine Zeile, die der Prüfer nicht lesen kann, steht unter dem Feld, damit ein Tippfehler keine Farbe stillschweigend verschluckt. Halbtransparente Farben werden zuerst mit dem Hintergrund gemischt.

So lesen Sie die Matrix

Zeilen sind Textfarben, Spalten sind Hintergründe. Jede Zelle zeigt ein kleines Bild des Paars, das Verhältnis und die höchste erreichte Stufe:

Kennzeichen	Verhältnis	Wofür das Paar taugt
AAA	ab 7 : 1	Text jeder Größe auf der erhöhten Stufe (1.4.6)
AA	ab 4,5 : 1	Text jeder Größe (1.4.3), Icons und Rahmen
AA große Schrift und UI	ab 3 : 1	Große Schrift (24 px oder 18,66 px fett), Icons, Feldrahmen, Fokusanzeigen (1.4.3, 1.4.11)
Nicht bestanden	unter 3 : 1	Nur Dekoration; Logos und deaktivierte Elemente sind ausgenommen

Das Verhältnis folgt der WCAG-2.x-Formel und wird auf zwei Stellen abgeschnitten, nicht gerundet: 4,49 ist nicht 4,5. Jede Zelle trägt außerdem einen Text für Screenreader („Ink auf Paper: 16,1 : 1, AAA“), und die Tabelle hat Zeilen- und Spaltenköpfe; so lässt sie sich per Tastatur Zelle für Zelle lesen.

Filter und Export

Wählen Sie die Stufe, ab der ein Paar als bestanden zählt, und setzen Sie „Nur bestandene Paare in der Matrix zeigen“, um den Rest auszublenden. Die Liste unter der Matrix zeigt die bestandenen Paare, die besten zuerst. Als CSS-Variablen kopieren liefert Ihre Palette als Custom Properties mit den bestandenen Paaren als Kommentar; Als Markdown-Tabelle kopieren liefert die bestandenen Paare für eine Design-System-Seite oder einen Pull Request.

Was die Matrix nicht sagen kann

Zustände von Bedienelementen. Farben für Hover, Fokus, Aktiv, Besucht und Deaktiviert sind eigene Paare; tragen Sie sie als eigene Zeilen ein.
Unruhige Hintergründe. Text auf einem Foto oder Farbverlauf prüfen Sie an der hellsten und dunkelsten Stelle im Kontrastprüfer, der auch Farben aus einem Bild aufnehmen kann.
Bedeutung nur durch Farbe. Ein rotes Fehlersignal und ein grünes Erfolgssignal gleicher Helligkeit sehen für viele Menschen gleich aus. WCAG verlangt zusätzlich ein weiteres Merkmal, etwa ein Icon oder Text (1.4.1 Benutzung von Farbe).
Kontrast auf Ihren echten Seiten. Eine bestandene Palette kann falsch eingesetzt werden. Testen Sie die Live-Seite mit dem WCAG-Check.

Das ist eine automatische Berechnung, kein vollständiges Audit, und keine Rechtsberatung.

Eine Palette bauen, die besteht

Beginnen Sie mit zwei Ankern: einer dunklen Tinte für Text und einem hellen Papier für Hintergründe. Prüfen Sie Ihre Markenfarbe gegen beide, denn die meisten Markenfarben bestehen nur auf einer Seite. Geben Sie jeder Markenfarbe einen dunkleren Ton für Text auf Weiß und einen helleren für Text auf Dunkel. Halten Sie einen Ton mit 3 : 1 für Rahmen und Icons bereit, denn der Kontrast von Nicht-Text-Inhalten gilt für Feldrahmen und Fokusringe. Entscheidend ist nicht, welches Paar theoretisch erlaubt ist, sondern welche Paare das Theme praktisch erreicht.

Unter dem EAA und dem deutschen BFSG übernimmt die Norm EN 301 549 den WCAG-Kontrast der Stufe AA; planen Sie also mit 4,5 : 1 und 3 : 1. AAA ist nicht gefordert. Pandus prüft die Farben, die Ihre Seiten wirklich verwenden, auf jeder Seite, jede Woche.

Häufige Fragen

Wie viele Farben kann ich eingeben?

Bis zu 12. Bei 12 Farben hat die Matrix 132 Paare. Bei mehr Eingaben werden die ersten 12 genutzt, und der Prüfer sagt, wie viele ausgelassen wurden.

Welche Formel verwendet die Matrix?

Das WCAG-2.x-Kontrastverhältnis (L1 + 0,05) / (L2 + 0,05) auf der relativen Helligkeit der beiden Farben, auf zwei Stellen abgeschnitten. Auf diese Formel verweisen WCAG 1.4.3, 1.4.6 und 1.4.11.

Werden meine Farben an einen Server gesendet?

Nein. Die Matrix wird in Ihrem Browser berechnet; nichts über die Palette wird gespeichert oder gesendet.

Warum unterscheidet sich ein Paar in beiden Richtungen?

Bei deckenden Farben tut es das nicht: A auf B ergibt dasselbe Verhältnis wie B auf A. Die Matrix zeigt trotzdem beide Zeilen, damit Sie eine Textfarbe schnell finden. Bei halbtransparenten Farben unterscheiden sich die Richtungen, weil die Textfarbe mit dem Hintergrund gemischt wird.

Macht eine bestandene Palette meine Website barrierefrei?

Nein. Sie zeigt nur, dass diese Paare genug Kontrast haben. Ob die Seiten sie richtig verwenden und alles Übrige in WCAG, muss weiterhin geprüft werden.