Gestalte lesbare Farbkombinationen.
Prüfe Vorder- und Hintergrundfarben nach WCAG-Kontrastkriterien. Das Tool zeigt die Ergebnisse für normalen und großen Text.
Farbkontrast prüfen
Die Rolle des Farbkontrasts
Hoher Kontrast hilft Nutzern mit Sehschwäche, Farbenblindheit oder spiegelnden Bildschirmen beim Lesen digitaler Inhalte. Dieses Tool vergleicht deine Vorder- und Hintergrundfarben lokal.
WCAG-Kontrastanforderungen
WCAG 2.2 erfordert ein Kontrastverhältnis von 4,5:1 für normalen Text und 3:1 für großen Text (Level AA). Level AAA erfordert 7:1 und 4,5:1.
- Normaler Text erfordert 4,5:1 (AA) oder 7:1 (AAA).
- Großer Text erfordert 3:1 (AA) oder 4,5:1 (AAA). Als groß gilt Text ab 18pt (normal) oder 14pt (fett).
- Bedienelemente und Grafiken erfordern 3:1 Kontrast zu angrenzenden Farben.
Tipps für zugängliche Farben
- Ergänze Text, Icons oder visuelle Signale. Farbe allein vermittelt keine Informationen zuverlässig.
- Teste Text in seiner echten Größe und Stärke. Dünne Schriften reduzieren die Lesbarkeit trotz guter Kontrastwerte.
- Teste Designs in hellen Themes, dunklen Themes und auf verschiedenen Bildschirmen.
FAQ
Was bedeutet ein Kontrastverhältnis von 4,5:1?
Das Verhältnis vergleicht die Helligkeit zweier Farben. Höhere Werte bedeuten eine bessere Trennung zwischen Vorder- und Hintergrund.
Garantiert bestandener Kontrast Barrierefreiheit?
Nein. Barrierefreies Design erfordert zudem lesbare Typografie, sichtbare Fokuszustände, ausreichende Abstände und klare Sprache.
Speichert ihr meine Farben auf einem Server?
Nein. Die Berechnung läuft lokal in deinem Browser. Wir laden deine Farben nicht hoch und speichern sie nicht.