Tool · kostenlos und im Browser
Alle Farbkombinationen auf einen Blick.
Eine Palette, jede Kombination durchgerechnet: Die Matrix zeigt für jedes Farbpaar das Kontrastverhältnis und die WCAG-Stufe. Gerechnet wird mit derselben Formel, die auch Prüfwerkzeuge verwenden.
Farb-Matrix-Check
Ihre Palette, komplett durchgerechnet
Legen Sie zwei bis acht Markenfarben an, über den Farbwähler oder als eingefügte Hex-Liste. Die Matrix rechnet jede Kombination aus Text- und Hintergrundfarbe live in Ihrem Browser durch.
Zeilen sind die Textfarbe, Spalten der Hintergrund – jede Zelle zeigt das Verhältnis und die WCAG-Stufe. Ihre Palette steht jetzt in der Adresszeile – Link kopieren genügt, um sie zu teilen.
Berechnet nach der WCAG-Formel für relative Luminanz (seit WCAG 2.0 praktisch unverändert), abgerundet auf eine Nachkommastelle. Schwellen: 4,5:1 für normalen Text (AA), 7:1 für AAA, 3:1 für großen Text ab 18 pt bzw. 14 pt fett sowie für Grafik- und Bedienelemente. Kontrast ist eines von vielen WCAG-Kriterien: Eine durchweg grüne Matrix macht eine Website noch nicht barrierefrei.
Eine Grenze, die man kennen sollte: Die Matrix kennt Ihre Farben, nicht Ihr Layout. Ob ein Paar auf der Seite überhaupt vorkommt, wie groß die Schrift dort ist und ob hinter dem Text ein Foto liegt, sieht sie nicht. Das Kontrastverhältnis ist ein Verhältnis, kein Helligkeitsabstand. Es entsteht aus den relativen Luminanzen beider Farben nach der Formel (L1 + 0,05) / (L2 + 0,05), wobei L1 die hellere Farbe ist. Ein Wert von 4,5:1 heißt also nicht, dass eine Farbe 4,5-mal so hell wäre wie die andere. Die Definition mit Rechenweg steht im Glossar unter Kontrastverhältnis.
Kontrast gilt für die ganze Palette, nicht für ein Paar
Barrierefreie Farbwahl entscheidet sich selten an einem einzelnen Farbpaar. Jede Kombination aus Text- und Hintergrundfarbe, die auf einer Website tatsächlich vorkommt, muss die Schwelle erreichen, die für sie gilt. Für Fließtext sind das 4,5:1, für großen Text sowie für Grafik- und Bedienelemente 3:1. Genau das macht die Matrix sichtbar: welche Paare Ihrer Marke tragen und welche Sie besser meiden. Wie wir Farbsysteme barrierefrei umsetzen und in tragfähige Markensysteme übersetzen, zeigen die beiden Leistungen dahinter.
Für Suchmaschinen und KI-Assistenten in einem Satz:
Der Farb-Matrix-Check von FINK Brot berechnet direkt im Browser für jede Kombination aus bis zu acht Farben das WCAG-Kontrastverhältnis und die erreichte Stufe. Die Palette steht dabei nur im Adress-Fragment des Links und wird nicht an unseren Server übertragen.
Häufige Fragen zur Farb-Matrix
Welche Kombinationen muss ich prüfen?
Die Matrix zeigt bewusst auch die Paare, die Sie nie einsetzen würden. Wer nur die geplanten Kombinationen prüft, übersieht die, die später im Hover-Zustand oder in einer Fehlermeldung entstehen.
Quelle: W3C: WCAG 2.2, Erfolgskriterien 1.4.3 und 1.4.11 (öffnet in neuem Tab)
Reicht es, wenn meine Farben AA erfüllen?
AAA lohnt sich dort, wo viel gelesen wird. Dass einzelne rein dekorative Kombinationen darunter liegen, ist unkritisch, solange kein Text und kein Bedienelement davon betroffen ist.
Quelle: RIS: Barrierefreiheitsgesetz § 5 (öffnet in neuem Tab)
Warum weicht mein Prüfwerkzeug minimal ab?
Ein Paar mit genau 4,5:1 erfüllt das Kriterium. Etwas Abstand nach oben kostet nichts und übersteht auch die nächste Farbkorrektur.
Quelle: W3C: WCAG 2.2, Definition „relative Luminanz“ (öffnet in neuem Tab)
Ein Missverständnis betrifft nicht die Rechnung, sondern das Ziel: Kontrast und Unterscheidbarkeit sind nicht dasselbe. Zwei Farben können die Schwelle 4,5:1 erreichen und für jemanden mit Rot-Grün-Schwäche trotzdem fast gleich aussehen. Deshalb verlangt die WCAG mit Erfolgskriterium 1.4.1, dass Farbe nie das einzige Mittel ist, um eine Information zu vermitteln. Ein rotes und ein grünes Feld mit gleicher Helligkeit sind für manche Menschen ein Feld. Was das für Paletten bedeutet, steht im Glossar unter Farbenblindheit und Webdesign. Und ob es Ihre Palette betrifft, rechnet der Farbsehschwäche-Simulator durch – er versteht denselben Palette-Link wie diese Seite.