Farbkontrast-Rastergenerator

Farbkontrast-Rastergenerator

Geben Sie die Farben Ihrer Marke oder Ihres Designsystems ein und generieren Sie eine vollständige WCAG-Kontrastmatrix, die das Kontrastverhältnis für jede mögliche Kombination von Vorder- und Hintergrundfarben anzeigt. Sehen Sie sofort, welche Farbkombinationen AA, AAA erfüllen oder die Zugänglichkeitsanforderungen nicht erfüllen – unerlässlich für die Erstellung barrierefreier Designsysteme und Styleguides.

Nutzung

Geben Sie Hex-Farben einzeln pro Zeile ein (mit optionalen Bezeichnungen wie „Primärfarbe #3B82F6“), oder wählen Sie eine voreingestellte Palette. Klicken Sie auf Raster generieren um die Kontrastmatrix zu erstellen. Jede Zelle zeigt das Kontrastverhältnis mit der tatsächlichen Vordergrundfarbe auf dem tatsächlichen Hintergrund, farbkodiert nach WCAG-Konformitätsstufe.

Funktionen

• N×N-Kontrastmatrix – Jede Vordergrund-/Hintergrundkombination wird getestet und in einem visuellen Raster angezeigt
• WCAG-Farbkodierung – Grün für AAA (≥7:1), Gelb für AA (≥4,5:1) und Rot für Nicht bestanden (<4,5:1)
• Live-Farbvorschau – Jede Zelle wird mit tatsächlichem Text in der Vordergrundfarbe auf der tatsächlichen Hintergrundfarbe gerendert
• AA für große Textgrößen – Zeigt auch die AA-Konformität für große Textgrößen (≥3:1) für größere Schriftgrößen an
• Zusammenfassende Statistiken – Getestete Gesamtpaare, AAA-Ergebnisse, AA-Ergebnisse und Fehler auf einen Blick
• Voreingestellte Paletten – Voreingestellte Farbpaletten von Tailwind, Material Design oder monochrom zum schnellen Laden
• Bis zu 20 Farben – Unterstützt Paletten von 2 bis 20 Farben
• Nur auf der Client-Seite verfügbar – Alle Berechnungen finden im Browser statt