Werte werden mit Browser-APIs und offengelegten Umrechnungen verarbeitet; die Quelle bleibt erhalten.
96
Konverter
Farbkontrast-Prüfer
Berechnet relative Leuchtdichte und Kontrastverhältnis und zeigt AA/AAA für normalen und großen Text getrennt. Reale UI-Tests bleiben erforderlich.
✓ Kostenlos✓ Kein Konto✓ Im Browser
KURZANTWORT
Was macht dieses Werkzeug?
Zwei Farben anhand von WCAG-Kontrast und Textschwellen vergleichen.
ANWENDUNGS- UND ENTSCHEIDUNGSHILFE
Farbkontrast-Prüfer: Methode und Anwendung
Berechnet relative Leuchtdichte und Kontrastverhältnis und zeigt AA/AAA für normalen und großen Text getrennt. Reale UI-Tests bleiben erforderlich.
unterstützte Farb-, CSS-, SVG-, Bild- oder Maßwerte Das Format zuerst mit einem kleinen Beispiel ohne Personendaten prüfen.
Vorschauwert, Maß- oder Formatübersicht und kopier- beziehungsweise ladbares Ergebnis
Praktische Schritte
- unterstützte Farb-, CSS-, SVG-, Bild- oder Maßwerte Prüfen Sie das Format zuerst mit einem synthetischen Beispiel statt mit sensiblen Echtdaten.
- Lokale Verarbeitung starten. Werte werden mit Browser-APIs und offengelegten Umrechnungen verarbeitet; die Quelle bleibt erhalten.
- Abnahmekriterium: visueller Vergleich auf hellen und dunklen Flächen, mehreren Bildschirmgrößen, in der Zielanwendung und mit der Quelle Bewahren Sie die Quelle auf und prüfen Sie die Ausgabe in der Zielanwendung.
visueller Vergleich auf hellen und dunklen Flächen, mehreren Bildschirmgrößen, in der Zielanwendung und mit der Quelle
Bewahren Sie die Quelle auf und prüfen Sie die Ausgabe in der Zielanwendung.
Geeignete Anwendungen
- Farbkontrast-Prüfer einsetzen, wenn das Ziel lautet: Zwei Farben anhand von WCAG-Kontrast und Textschwellen vergleichen
- Vor Übergabe an Designsystem oder Publikationsdatei: Vorschauwert, Maß- oder Formatübersicht und kopier- beziehungsweise ladbares Ergebnis
- visueller Vergleich auf hellen und dunklen Flächen, mehreren Bildschirmgrößen, in der Zielanwendung und mit der Quelle
ARBEITSABLAUF VERTIEFEN
Ratgeber zu diesem Werkzeug
Barrierefreie responsive UI: Kontrast, clamp() und Seitenverhältnis
Dark Mode, fließende Typografie und Medienflächen mit messbaren Grenzen gestalten.
Ratgeber lesen →Barrierefreie Fehler- und Verarbeitungsrückmeldung in lokalen Werkzeugen
Verarbeitung, Erfolg und Fehler mit Aktion und Erklärung statt nur Farbe verbinden.
Ratgeber lesen →ÜBER DIESES WERKZEUG
Häufig gestellte Fragen
Welche Eingabe akzeptiert Farbkontrast-Prüfer?+
unterstützte Farb-, CSS-, SVG-, Bild- oder Maßwerte unterstützte Farb-, CSS-, SVG-, Bild- oder Maßwerte Prüfen Sie das Format zuerst mit einem synthetischen Beispiel statt mit sensiblen Echtdaten.
Was liefert Farbkontrast-Prüfer?+
Vorschauwert, Maß- oder Formatübersicht und kopier- beziehungsweise ladbares Ergebnis Werte werden mit Browser-APIs und offengelegten Umrechnungen verarbeitet; die Quelle bleibt erhalten.
Wie prüfe ich die Ausgabe von Farbkontrast-Prüfer?+
visueller Vergleich auf hellen und dunklen Flächen, mehreren Bildschirmgrößen, in der Zielanwendung und mit der Quelle
Sendet oder speichert Farbkontrast-Prüfer Eingaben auf einem Server?+
Werkzeugeingaben werden im aktiven Tab verarbeitet. Speichern in der Workstation oder Übergabe an ein anderes Werkzeug erfolgt nach eigener Auswahl. Browser-Erweiterungen und gemeinsam genutzte Geräte gesondert prüfen; die Datenschutzseite erklärt Werbung und Netzwerkverbindungen.