Kontrastprüfer
Prüfen Sie das WCAG-2.1-Verhältnis und das moderne APCA Lc (WCAG-3-Entwurf) für ein Vorder-/Hintergrund-Paar, oder wechseln Sie in den Palettenmodus für eine vollständige Kontrastmatrix zwischen jeder Farbe Ihrer Palette. Simulieren Sie vier Arten von Farbenblindheit, wenden Sie automatische Vorschläge an und exportieren Sie die Palette als CSS-Variablen oder JSON.
Colors are processed entirely in your browser. Nothing is sent to a server.
So verwenden Sie diesen kontrastprüfer
- Paar-Check: wählen Sie Vordergrund (Text) und Hintergrund und lesen Sie das WCAG-Verhältnis + APCA Lc mit Bestanden/Durchgefallen-Badges.
- Paletten-Modus: Farben hinzufügen (oder Vorlage laden) für die vollständige Kontrastmatrix zwischen jedem Paar.
- Schalten Sie die Sehkraft-Simulation um (Protanopie, Deuteranopie, Tritanopie, Achromatopsie), um auf Farbenblindheit zu testen.
- Wenn eine Prüfung fehlschlägt, klicken Sie auf einen automatischen Vorschlag, um die nächste bestandene Farbe anzuwenden.
- Exportieren Sie die Palette als CSS-Variablen oder JSON, oder senden Sie das aktuelle Paar in die Matrix.
Häufig gestellte Fragen
Was ist APCA und wie unterscheidet es sich von WCAG 2.1?
APCA (Advanced Perceptual Contrast Algorithm) ist ein wahrnehmungs-einheitliches Kontrastmodell für WCAG 3. Es modelliert Lesbarkeit besser als das ältere 4,5:1-Verhältnis — Lc 75 ist das Minimum für Fließtext, Lc 90+ ist optimal.
Welche WCAG-2.1-Stufen werden getestet?
AA erfordert 4,5:1 für normalen Text, 3:1 für großen Text (≥18 pt oder 14 pt fett) und UI-Komponenten. AAA erhöht normalen Text auf 7:1 und großen Text auf 4,5:1.
Wie funktioniert die Paletten-Matrix?
Jede Farbe wird gegen jede andere als Text und Hintergrund geprüft. Die Zahl ist das WCAG-Verhältnis; das Badge zeigt AA/AAA/groß/durchgefallen. Hover für den APCA-Lc-Wert.
Wie funktioniert die Auto-Korrektur?
Sie hellt oder dunkelt den Text linear ab, bis das Verhältnis das Ziel erreicht — und wählt die kleinste Änderung. Sie können auch den Hintergrund anpassen.