ToolPronto

Farbkontrast prüfen und Palette testen

Kontrast messen, Alternativen finden und CSS-Farben kopieren.

Alle Farbwerte werden lokal berechnet.

Favoriten werden nur in diesem Browser gespeichert.

Farben prüfen

Textkontrast prüfen

Prüfe eine Text- und Hintergrundfarbe anhand der WCAG-2.x-Grenzwerte.

TextfarbeHintergrundfarbe

Lesbare Farben zeigen sich im echten Kontext.Lesbare Farben zeigen sich im echten Kontext.

Kontrastverhältnis: 16.68:1
Normaler Text AA: ✓ Bestanden
Großer Text AA: ✓ Bestanden

Farbformate

#17201Brgb(23 32 27)hsl(147 16% 11%)

Farben prüfen

Palette mit fünf Farben

Erstelle, sperre, prüfe, simuliere und exportiere eine wiederverwendbare Farbpalette.

Palettenvorschau

Diese reproduzierbare Vorschau ist nur eine Näherung, keine Diagnose oder Konformitätsprüfung. Exportierte Farben bleiben unverändert.

Kontrastprüfung der Originalpalette

In jeder Zeile ist die erste Farbe der Text und die zweite der Hintergrund.

Farbe 1 auf Farbe 2#096447 / #E2F3EC
6.24:1Normaler Text AA: BestandenNormaler Text AAA: Nicht bestandenGroßer Text AA: BestandenGroßer Text AAA: Bestanden
Farbe 1 auf Farbe 3#096447 / #17201B
2.32:1Normaler Text AA: Nicht bestandenNormaler Text AAA: Nicht bestandenGroßer Text AA: Nicht bestandenGroßer Text AAA: Nicht bestanden
Farbe 1 auf Farbe 4#096447 / #F4F6F3
6.61:1Normaler Text AA: BestandenNormaler Text AAA: Nicht bestandenGroßer Text AA: BestandenGroßer Text AAA: Bestanden
Farbe 1 auf Farbe 5#096447 / #6D46D9
1.21:1Normaler Text AA: Nicht bestandenNormaler Text AAA: Nicht bestandenGroßer Text AA: Nicht bestandenGroßer Text AAA: Nicht bestanden
Farbe 2 auf Farbe 1#E2F3EC / #096447
6.24:1Normaler Text AA: BestandenNormaler Text AAA: Nicht bestandenGroßer Text AA: BestandenGroßer Text AAA: Bestanden
Farbe 2 auf Farbe 3#E2F3EC / #17201B
14.51:1Normaler Text AA: BestandenNormaler Text AAA: BestandenGroßer Text AA: BestandenGroßer Text AAA: Bestanden
Farbe 2 auf Farbe 4#E2F3EC / #F4F6F3
1.06:1Normaler Text AA: Nicht bestandenNormaler Text AAA: Nicht bestandenGroßer Text AA: Nicht bestandenGroßer Text AAA: Nicht bestanden
Farbe 2 auf Farbe 5#E2F3EC / #6D46D9
5.18:1Normaler Text AA: BestandenNormaler Text AAA: Nicht bestandenGroßer Text AA: BestandenGroßer Text AAA: Bestanden
Farbe 3 auf Farbe 1#17201B / #096447
2.32:1Normaler Text AA: Nicht bestandenNormaler Text AAA: Nicht bestandenGroßer Text AA: Nicht bestandenGroßer Text AAA: Nicht bestanden
Farbe 3 auf Farbe 2#17201B / #E2F3EC
14.51:1Normaler Text AA: BestandenNormaler Text AAA: BestandenGroßer Text AA: BestandenGroßer Text AAA: Bestanden
Farbe 3 auf Farbe 4#17201B / #F4F6F3
15.35:1Normaler Text AA: BestandenNormaler Text AAA: BestandenGroßer Text AA: BestandenGroßer Text AAA: Bestanden
Farbe 3 auf Farbe 5#17201B / #6D46D9
2.80:1Normaler Text AA: Nicht bestandenNormaler Text AAA: Nicht bestandenGroßer Text AA: Nicht bestandenGroßer Text AAA: Nicht bestanden
Farbe 4 auf Farbe 1#F4F6F3 / #096447
6.61:1Normaler Text AA: BestandenNormaler Text AAA: Nicht bestandenGroßer Text AA: BestandenGroßer Text AAA: Bestanden
Farbe 4 auf Farbe 2#F4F6F3 / #E2F3EC
1.06:1Normaler Text AA: Nicht bestandenNormaler Text AAA: Nicht bestandenGroßer Text AA: Nicht bestandenGroßer Text AAA: Nicht bestanden
Farbe 4 auf Farbe 3#F4F6F3 / #17201B
15.35:1Normaler Text AA: BestandenNormaler Text AAA: BestandenGroßer Text AA: BestandenGroßer Text AAA: Bestanden
Farbe 4 auf Farbe 5#F4F6F3 / #6D46D9
5.48:1Normaler Text AA: BestandenNormaler Text AAA: Nicht bestandenGroßer Text AA: BestandenGroßer Text AAA: Bestanden
Farbe 5 auf Farbe 1#6D46D9 / #096447
1.21:1Normaler Text AA: Nicht bestandenNormaler Text AAA: Nicht bestandenGroßer Text AA: Nicht bestandenGroßer Text AAA: Nicht bestanden
Farbe 5 auf Farbe 2#6D46D9 / #E2F3EC
5.18:1Normaler Text AA: BestandenNormaler Text AAA: Nicht bestandenGroßer Text AA: BestandenGroßer Text AAA: Bestanden
Farbe 5 auf Farbe 3#6D46D9 / #17201B
2.80:1Normaler Text AA: Nicht bestandenNormaler Text AAA: Nicht bestandenGroßer Text AA: Nicht bestandenGroßer Text AAA: Nicht bestanden
Farbe 5 auf Farbe 4#6D46D9 / #F4F6F3
5.48:1Normaler Text AA: BestandenNormaler Text AAA: Nicht bestandenGroßer Text AA: BestandenGroßer Text AAA: Bestanden

Was Farbkontrast prüfen macht

Das Tool berechnet WCAG-Kontrast, zeigt Grenzwerte für Textgrößen und prüft Paletten mit optionaler Farbsinn-Simulation. Kontrast messen, Alternativen finden und CSS-Farben kopieren.

Typische Anwendungen

Text- und Hintergrundfarben vor dem Einsatz prüfen.
Eine zugängliche Alternative finden.
Eine Palette auf schwer unterscheidbare Farben untersuchen.

So funktioniert es

Vorder- und Hintergrundfarbe wählen.
Kontrastverhältnis und WCAG-Ergebnisse prüfen.
Farbe anpassen oder passenden CSS-Wert kopieren.