Farb- & Barrierefreiheits-Toolkit
Nur lokalWCAG-Kontrast prüfen, Farbpaare reparieren, Paletten erstellen und Bildfarben lokal extrahieren.
WCAG-Kontrastverhältnis
14.68:1
WCAG 2.2 benötigt mindestens 4,5:1 für Normaltext, 3:1 für große Text- und Nicht-Text-UI-Komponenten und 7:1 für verbesserten Normaltextkontrast.
Live-Vorschau
Design, das mehr Menschen lesen können
Kontrast ist nur ein Teil der Zugänglichkeit, aber es ist ein messbarer Ort zu beginnen. Überprüfe Überschriften, Absätze, Kontrollen und Fokus-Staaten zusammen.
Closest compliance founds
Diese Vorschläge erhalten Farbrichtung, wenn möglich, dann in Richtung schwarz oder weiß bewegen, bis der gewünschte Kontrast erreicht ist.
So funktioniert es
- 01
Geben Sie ein Farbpaar ein
Fügen Sie die Vordergrund- und Hintergrundfarben HEX oder RGB ein und sehen Sie, wie das genaue Kontrastverhältnis sofort aktualisiert wird.
- 02
Prüfen oder erkunden
Überprüfen Sie die Ergebnisse von WCAG 2.2 AA/AAA, erzeugen Sie harmonische Paletten, simulieren Sie häufige Farbsehschwächen oder extrahieren Sie Bildfarben.
- 03
Wenden Sie zugängliche Farben an
Verwenden Sie den nächstgelegenen Vordergrundvorschlag AA oder AAA, kopieren Sie Farbwerte oder exportieren Sie die Palette als CSS-Variablen.
Häufig gestellte Fragen
Welchen Standard verwendet der Kontrastprüfer?
Es verwendet die normative Formel für den relativen Luminanzkontrast WCAG 2.2 und die Schwellenwerte 3:1, 4,5:1 und 7:1.
Garantiert das Bestehen von Kontrast die Zugänglichkeit?
Nein. Kontrast ist eine Voraussetzung. Typografie, Fokuszustände, Semantik, Bewegung, Sprache und Tests mit unterstützender Technologie sind immer noch wichtig.
Sind hochgeladene Bilder privat?
Ja. Die Farbextraktion nutzt einen temporären Browser-Canvas und lädt das Bild nicht hoch.
Ist die Vorschau des Farbsehens eine Diagnose?
Nein. Es handelt sich um eine praktische Simulation zur Designüberprüfung, nicht um eine medizinische Diagnose oder um einen Ersatz für Benutzertests.
Ähnliche Tools
Arbeiten Sie mit weiteren fokussierten Browser-Hilfsmitteln weiter.