Kontrastmatrix für Farbpaletten

Diese Matrix berechnet die relative Leuchtdichte nach WCAG 2 für jede angegebene Hex-Farbe, vergleicht sämtliche Farben miteinander und gibt die Ergebnisse als stabile quadratische Matrix zurück. Design-, Entwicklungs- und Barrierefreiheitsteams können damit die gesamte Palette eines Designsystems auf einmal untersuchen, anstatt jedes Paar einzeln zu prüfen. Eingaben werden validiert, Farben normalisiert und das deterministische Ergebnis eignet sich für automatisierte Audits sowie versionierte Berichte.

Lesen Sie die Matrix mit eindeutigem Farbbezug

Übermitteln Sie eine Liste mit zwei bis einhundert Hex-Farben. Drei- und sechsstellige Formen werden mit oder ohne führendes Rautezeichen akzeptiert; jeder gültige Wert wird als sechsstelliger Kleinbuchstabencode normalisiert. Die Antwort führt diese Farben in unveränderter Reihenfolge auf und weist jeder einen Index zu. Zeilen und Spalten verwenden genau diese Reihenfolge, sodass der Wert in Zeile zwei und Spalte fünf den Kontrast zwischen den Farben mit den Indizes zwei und fünf bezeichnet. Die Diagonale beträgt stets 1, da eine Farbe zu sich selbst keinen Kontrast hat. Die Matrix ist symmetrisch, weil ein Vertauschen von Vorder- und Hintergrund das WCAG-Verhältnis nicht ändert. Angezeigte Verhältnisse werden für eine stabile Ausgabe auf zwei Dezimalstellen gerundet, Leuchtdichten auf sechs. Doppelte Farben bleiben getrennte Positionen; dadurch lassen sich semantisch unterschiedliche Tokens mit demselben Wert prüfen. Dieses Positionsmodell erleichtert die Darstellung als Tabelle, die Ablage als Auditnachweis und den Vergleich verschiedener Versionen.

Verstehen Sie Berechnung und WCAG-Grenzwerte

Die Berechnung folgt dem Verfahren für relative Leuchtdichte nach WCAG 2 bei sRGB-Farben. Jeder rote, grüne und blaue Kanal wird vom codierten sRGB-Wert in lineares Licht umgerechnet und anschließend mit den Standardkoeffizienten kombiniert. Für jedes Paar wird die hellere Leuchtdichte plus 0.05 durch die dunklere Leuchtdichte plus 0.05 geteilt; daraus entsteht ein Verhältnis von 1 bis 21. Die Antwort enthält die bekannten WCAG-Grenzwerte: 4.5 für normalen Text nach AA, 7 für normalen Text nach AAA, 3 für großen Text nach AA und 4.5 für großen Text nach AAA. Vergleichen Sie jede Zelle mit dem zum tatsächlichen Inhalt und Schriftbild passenden Wert. Ein Verhältnis allein weist keine vollständig barrierefreie Oberfläche nach, denn Schriftgröße, Gewicht, Interaktionszustände, nicht textliche Elemente und Nutzungskontext bleiben relevant. Das Werkzeug liefert deshalb numerische Nachweise statt eines pauschalen Urteils, damit Sie für jede vorgesehene Kombination die richtige Regel anwenden können.

Nutzen Sie deterministische Ergebnisse in Designaudits

Eine vollständige Matrix entfaltet ihren größten Nutzen bei wiederholbaren Palettenprüfungen. Halten Sie eine dokumentierte Reihenfolge ein, etwa neutrale Farben vor Marken-, Status- und Akzent-Tokens, und speichern Sie die Matrix zusammen mit der Designsystemversion. Eine kontinuierliche Integrationsprüfung kann ausgewählte Zellen mit vorgeschriebenen Grenzwerten vergleichen, während Prüfende die gesamte Tabelle nach unerwartet schwachen Kombinationen durchsuchen. Da der Algorithmus weder Netzwerk, Zufall, aktuelle Uhrzeit, Browserstile noch Schätzungen zu Farbprofilen verwendet, erzeugen identische JSON-Eingaben identische JSON-Ausgaben. Ungültige Listenformen, zu große oder kleine Paletten und fehlerhafte Hex-Werte werden mit einem eindeutigen Index abgelehnt. Die Obergrenze von einhundert Farben beschränkt die quadratische Matrix auf zehntausend Zellen. Klären Sie Transparenz und Überlagerung vor dem Aufruf: Alphafarben werden abgelehnt, weil ihr sichtbares Ergebnis vom Hintergrund abhängt. Wandeln Sie Farbnamen, HSL, Wide-Gamut-Werte und Designwerkzeug-Objekte zuerst in deckendes sRGB-Hex um, damit jedes Audit auf einer eindeutigen, reproduzierbaren Grundlage beruht.