Kontrast-Raster
Farbkontrast-Verhältnisse für Barrierefreiheit prüfen
Über Kontrast-Raster
Prüfe Farbkontrast-Verhältnisse gegen WCAG-Standards — stelle sicher, dass deine Farben für alle Nutzer zugänglich sind.
So verwenden Sie Kontrast-Raster
- 1Füge Farben zu deiner Palette mit HEX-Werten und optionalen Beschriftungen hinzu.
- 2The grid automatisch generates contrast ratios for every foreground/background combination.
- 3Überprüfe, welche Paare WCAG AA oder AAA bestehen und welche nicht.
- 4Filtere das Raster, um alle Kombinationen, nur bestandene oder nur fehlgeschlagene anzuzeigen.
- 5Export the full grid as CSV zur Dokumentation or team review.
Tipps
- Strebe mindestens ein Kontrastverhältnis von 4,5:1 für normalen Text und 3:1 für großen Text an.
- WCAG AA erfordert ein Mindestkontrastverhältnis von 4,5:1 für normalen Text und 3:1 für großen Text.
- Exportiere die CSV und füge sie in deine Design-System-Dokumentation als Entwicklerreferenz ein.
Kostenlos vs. kostenpflichtig
Kostenlos: alle Funktionen verfügbar.
Verwandte Tools
OneKitTools-TeamAktualisiert 2.21.4