WCAG-Kontrastprüfer
Check color contrast ratios against WCAG 2.1 AA/AAA guidelines mit Live-Vorschau, auto-fix suggestions, and CSS export
Über WCAG-Kontrastprüfer
Prüfe Farbkontrastverhältnisse gegen WCAG 2.1 AA- und AAA-Richtlinien mit Live-Vorschau, Auto-Fix-Vorschlägen und CSS-Export — alles in deinem Browser.
So verwenden Sie WCAG-Kontrastprüfer
- 1Enter or pick a foreground (text) color and a Hintergrundfarbe.
- 2Sieh das Kontrastverhältnis und die WCAG-Bestanden/Fehlgeschlagen-Ergebnisse für AA- und AAA-Stufen.
- 3Überprüfe die Live-Textvorschauen in verschiedenen Größen: normaler Text, große Überschriften, Abzeichen, Schaltflächen und Beschriftungen.
- 4Verwende „Tauschen“, um Vorder- und Hintergrund umzukehren, oder „Zufälliges Paar“ für Inspiration.
- 5Kopiere den/die/das CSS variables for the accessible color pair.
Tipps
- WCAG AA erfordert 4,5:1 für normalen Text und 3:1 für großen Text — AAA erfordert 7:1 bzw. 4,5:1.
- Upgrade auf Starter+ to get the closest AA-compliant color suggestion when your pair fails.
- Teste deine Farben in ihren tatsächlichen Nutzungsgrößen — ein Paar, das für Überschriften besteht, kann bei kleinem Fließtext durchfallen.
Kostenlos vs. kostenpflichtig
Gratis: contrast checking and preview. Starter+: auto-fix color suggestions and accessible pairs.
Verwandte Tools
OneKitTools-TeamAktualisiert 2.21.4