Farbpaletten-Kontrastprüfer
Alle HEX-Farbpaare einer Palette anhand der WCAG-Kontrastwerte für Text vergleichen.
Ein Rechenbeispiel ausprobieren
Ein Rechenbeispiel ausprobieren
Alle HEX-Farbpaare einer Palette anhand der WCAG-Kontrastwerte für Text vergleichen.
Prüfen Sie Einheiten und Optionen und verwenden Sie dann die Berechnungsschaltfläche. Das Beispiel ist fiktiv; ersetzen Sie die Werte für Ihre eigene Berechnung.
Beispieleingabe
- Palettenfarben (eine HEX-Farbe pro Zeile)
- #000000 #ffffff #2563eb
Erwartete Ausgabe
| Farbe 1 · #000000 | Farbe 2 · #ffffff | Farbe 3 · #2563eb Farbe 1 · #000000 | — | 21,00:1 · AA normaler Text ✓ · AAA normaler Text ✓ · AA großer Text ✓ · AAA großer Text ✓ | 4,06:1 · AA normaler Text × · AAA normaler Text × · AA großer Text ✓ · AAA großer Text × Farbe 2 · #ffffff | 21,00:1 · AA normaler Text ✓ · AAA normaler Text ✓ · AA großer Text ✓ · AAA großer Text ✓ | — | 5,17:1 · AA normaler Text ✓ · AAA normaler Text × · AA großer Text ✓ · AAA großer Text ✓ Farbe 3 · #2563eb | 4,06:1 · AA normaler Text × · AAA normaler Text × · AA großer Text ✓ · AAA großer Text × | 5,17:1 · AA normaler Text ✓ · AAA normaler Text × · AA großer Text ✓ · AAA großer Text ✓ | —
Die Matrix berechnet das Kontrastverhältnis zwischen jedem Paar deckender Farben und zeigt die AA- und AAA-Schwellen für normalen und großen Text.
Das Tool wird geladen. Die Erklärung ist auch ohne JavaScript verfügbar.
Methode und Grenzen
Geben Sie 2 bis 20 HEX-Farben ein, eine pro Zeile. Jede Zelle vergleicht die Zeilenfarbe mit der Spaltenfarbe. Für normalen Text gelten 4,5:1 für AA und 7:1 für AAA; für großen Text 3:1 und 4,5:1.
Akzeptiert nur deckende HEX-Farben mit 3 oder 6 Ziffern. Zeigt die Schwellen für normalen und großen Text, prüft aber weder die tatsächliche Schriftgröße und Schriftstärke noch Bedienelemente, Bilder oder andere Anforderungen an Barrierefreiheit.
Dieses Tool teilen
Nur der öffentliche Link zum Tool wird geteilt. Ihre Eingaben und Ergebnisse bleiben hier.
Link zum manuellen Kopieren anzeigen
Kurz erklärt
Die Matrix berechnet das Kontrastverhältnis zwischen jedem Paar deckender Farben und zeigt die AA- und AAA-Schwellen für normalen und großen Text.
Der Seitencode und benötigte Ressourcen werden von der Website geladen. Das Tool verarbeitet die Eingaben lokal im Browser.
Anleitung
Geben Sie 2 bis 20 HEX-Farben ein, eine pro Zeile. Jede Zelle vergleicht die Zeilenfarbe mit der Spaltenfarbe. Für normalen Text gelten 4,5:1 für AA und 7:1 für AAA; für großen Text 3:1 und 4,5:1.
Grenzen
Akzeptiert nur deckende HEX-Farben mit 3 oder 6 Ziffern. Zeigt die Schwellen für normalen und großen Text, prüft aber weder die tatsächliche Schriftgröße und Schriftstärke noch Bedienelemente, Bilder oder andere Anforderungen an Barrierefreiheit.
Häufige Fragen
Was bedeutet das Kontrastverhältnis?
Es ist das Verhältnis der relativen Leuchtdichten zweier Farben. Ein höherer Wert verbessert den Textkontrast, garantiert allein aber keine barrierefreie Seite.
Erkennt das Tool großen Text?
Nein. Das Tool zeigt die AA- und AAA-Schwellen für normalen und großen Text. Verwenden Sie die Ergebnisse für großen Text nur, wenn Schriftgröße und Schriftstärke der WCAG-Definition für großen Text entsprechen.
Quellen und Referenzen
Diese Quellen erläutern die genannte Norm oder API; sie bestätigen nicht das Ergebnis des Tools.