Farbkontrast-Matrix-Prüfer

Warum sollte man alle Farbkombinationen auf einmal prüfen statt einzeln?

Die WCAG-Richtlinien zur Barrierefreiheit verlangen ein Mindestkontrastverhältnis zwischen Text- und Hintergrundfarben — sonst können Nutzer mit Sehbehinderung oder Farbenblindheit den Text möglicherweise nicht lesen. In der Praxis kombinieren die meisten Websites mehrere Markenfarben, Hintergrundfarben und Statusfarben — eine Überschrift in der Hauptfarbe auf einer hellgrauen Karte, eine Warnfarbe auf Weiß, dunklen Text auf einem farbigen Hintergrund — und jede Kombination einzeln zu prüfen führt leicht zu Fehlern oder Auslassungen. Mit diesem Tool fügen Sie einfach alle tatsächlich verwendeten Farben ein und erhalten sofort das Kontrastverhältnis für jede mögliche Paarung, übersichtlich als eine Matrix dargestellt — kein einzelnes Abprüfen mehr nötig.

Wie das Verhältnis berechnet wird — ein konkretes Beispiel

WCAG 2.1 definiert das Kontrastverhältnis als (L1 + 0,05) / (L2 + 0,05), wobei L1 und L2 die relative Leuchtdichte der beiden Farben sind (höhere Werte bedeuten näher an Weiß). Reines Schwarz #000000 gegen reines Weiß #FFFFFF erreicht ein perfektes 21:1, aber Hellgrau #999999 gegen Weiß erreicht nur 2,85:1 — deutlich unter dem Mindestwert von 4,5:1 für normalen Text. Normaler Text (unter 18px oder unter 14px fett) benötigt AA ≥ 4,5:1, bei strengerem Standard AAA ≥ 7:1; großer Text (18px+ fett oder 24px+) hat mit AA ≥ 3:1 eine niedrigere Hürde.

So liest man die Ergebnismatrix

Jede Zelle der Matrix zeigt das Kontrastverhältnis zwischen der Farbe der jeweiligen Zeile und der Farbe der jeweiligen Spalte, farblich markiert in Grün (AAA bestanden), Gelb (nur AA bestanden) oder Rot (nicht bestanden) — so erkennen Sie problematische Kombinationen auf einen Blick, statt jede einzeln von Hand zu berechnen.

Der Kontrast wird ausschließlich aus dem RGB-Wert jeder Farbe berechnet — Schriftgewicht, Anti-Aliasing oder halbtransparente Überlagerungen bei der tatsächlichen Darstellung werden nicht berücksichtigt. Prüfen Sie vor der Veröffentlichung immer noch einmal auf einem echten Gerät.