DESIGN · ZUGÄNGLICHKEIT
Farbkontrast-Prüfer
Vergleiche zwei Farben nach dem WCAG-Kontrastverhältnis. Die Bewertung allein ersetzt keine vollständige Barrierefreiheitsprüfung.
Anleitung: Kontrast, Tastaturbedienung und verständliches HTML prüfen →
Deine Einstellungen
Normaler Text: AA ab 4,5:1 · Großer Text: AA ab 3:1 · AAA für normalen Text ab 7:1.
Vorschau oder Auswertung
Fertiger Code
Der Kontrastwert gilt für die zwei gewählten Farben. Schriftgröße, Schriftgewicht, Zustände und andere Anforderungen separat prüfen.
Kontraste richtig beurteilen
Ein hoher Farbkontrast verbessert die Lesbarkeit. Für normalen Text gilt in WCAG AA häufig ein Mindestverhältnis von 4,5:1, für großen Text in vielen Fällen 3:1. Beachte außerdem Schriftgröße, Schriftgewicht und die tatsächliche Nutzung.
Praxisbeispiel & wichtige Hinweise
Textfarben auf Lesbarkeit prüfen
Wähle Text- und Hintergrundfarbe aus. Prüfe den ausgegebenen Kontrast und betrachte den Text zusätzlich auf dem eigenen Bildschirm.
Beachten: WCAG-AA-Kontrastwerte sind nur ein Teil guter Barrierefreiheit; auch Schriftgröße und Bedienbarkeit zählen.
Passende Schritt-für-Schritt-Anleitung →Lesbarkeit und Kontrast einschätzen
Kleine Texte auf einem ähnlich hellen Hintergrund sind für viele Menschen schwer zu lesen. Ein rechnerisch guter Kontrast hilft, garantiert aber noch keine gute Bedienbarkeit: Schriftgröße, Gewicht, Zeilenabstand und tatsächliche Displayhelligkeit spielen ebenfalls eine Rolle.
Teste die gewählte Kombination in echten Seitenelementen und nicht nur als großes Farbmuster. Bei farbigen Schaltflächen solltest du außerdem Fokus- und Hover-Zustände separat beurteilen.
Lesbare Farben für Schaltflächen und Fließtext
Der Kontrast zwischen Vorder- und Hintergrund entscheidet darüber, wie gut sich Text bei kleiner Schrift, wenig Licht oder eingeschränktem Sehvermögen lesen lässt. Die WCAG nennen für normalen Text häufig mindestens 4,5:1 und für großen Text 3:1 als AA-Richtwerte.
Ein rechnerisch ausreichender Wert garantiert noch keine gute Bedienbarkeit. Prüfe zusätzlich Schriftgröße, Schriftschnitt, Fokusmarkierungen und den Unterschied zwischen normalen und deaktivierten Elementen. Farben allein sollten keine wichtigen Zustände vermitteln.