Farbkontrast berechnen für Barrierefreiheit

Ermittle schnell, ob deine Farben den WCAG-Standards entsprechen.

Kontrastverhältnis

Großer Text — 24px fette Überschrift

Normaler Fließtext mit 15px. Dies ist die häufigste Textgröße im Interface und entscheidend für AA-Konformität.

Wie funktioniert die Kontrastprüfung?

Der Farbkontrast Checker von ToolMole nimmt zwei Farben auf – meist Vordergrund und Hintergrund. Mit der WCAG 2.1 Formel werden die Helligkeiten der Farben berechnet und daraus das Kontrastverhältnis ermittelt.

Anschließend wird angezeigt, ob der Kontrast die Mindestanforderungen für normale und große Texte gemäß WCAG AA oder AAA erfüllt. Die Berechnung erfolgt komplett lokal im Browser, sodass keine Farbdaten weitergegeben werden.

Grenzen und Besonderheiten

Die Prüfung bezieht sich ausschließlich auf Farbpaare, die als Text und Hintergrund verwendet werden. UI-Elemente oder Icons können ebenfalls getestet werden, sofern die Farben manuell eingegeben werden.

Bei Text auf Bildern oder Farbverläufen muss zuerst die dominierende Farbe bestimmt werden. Die automatische Erkennung von Schriftgröße oder -gewicht ist nicht möglich; diese Angaben müssen vom Nutzer selbst gemacht werden.

Wann ist ein Kontrast ausreichend?

Die WCAG unterscheidet zwischen normalen und großen Texten. Für normalen Fließtext gilt ein Mindestkontrast von 4,5:1 für AA und 7:1 für AAA. Große oder fett gesetzte Überschriften müssen mindestens 3:1 (AA) bzw. 4,5:1 (AAA) erreichen.

Die Werte werden direkt angezeigt. So kann präzise entschieden werden, ob eine Farbkombination ausreichend lesbar und barrierefrei ist. ToolMole hält sich dabei strikt an die offiziellen Vorgaben der WCAG.

Häufig gestellte Fragen

Wie erkenne ich, ob mein Text als 'groß' gilt?

WCAG definiert 'großen Text' als mindestens 24px (normal) oder 18,66px fett. Für diese Texte gelten niedrigere Kontrastanforderungen. Du kannst die Textgröße selbst festlegen und im Tool die entsprechende Kategorie auswählen.

Kann ich Kontrast für Symbole oder UI-Elemente prüfen?

Ja, indem du die Farbwerte für das Element und den Hintergrund manuell eingibst. Das Tool prüft dann die Kontrastanforderung, auch wenn es sich nicht direkt um Text handelt.

Wie werden transparente Farben behandelt?

Das Tool berechnet den Kontrast auf Basis der angegebenen Farben. Bei Halbdurchsichtigkeit muss die tatsächlich sichtbare Mischfarbe bestimmt und eingegeben werden, um realistische Ergebnisse zu erhalten.

Werden Farbprofile oder Geräteeinstellungen berücksichtigt?

Nein, das Tool basiert auf den Standard-RGB-Werten. Unterschiedliche Bildschirme oder Farbdarstellungen werden nicht einbezogen – die Berechnung erfolgt nach WCAG-Norm.

Kann ich mehrere Farbpaare gleichzeitig testen?

Aktuell wird jeweils ein Farbkontrast geprüft. Für mehrere Kombinationen musst du die Werte einzeln eingeben. So bleibt die Bedienung einfach und übersichtlich.

Wie zuverlässig ist die Kontrastberechnung?

Die Berechnung basiert auf der offiziellen WCAG-Formel und ist technisch exakt. Die tatsächliche Lesbarkeit kann aber je nach Nutzer und Kontext variieren.

Probleme oder Ideen zu diesem Werkzeug? Mitteilung senden