🎨 Farbkontrast-Prüfer

Stelle sicher, dass deine Farben barrierefrei (WCAG 2.1 AA/AAA) und gut lesbar sind.

Farbkontrast-Prüfer (WCAG 2.1)

Vordergrund (Text)

Hintergrund

4.47 : 1

Kontrastverhältnis

WCAG 2.1 Barrierefreiheit

Normaler Text Kleiner als 18pt (ca. 24px)

AA Fail AAA Fail

Großer Text Größer als 18pt oder 14pt fett

AA Pass AAA Fail

UI-Elemente / Symbole Bedienelemente und informative Grafiken

AA Pass

Vorschau

Große Überschrift

Dies ist ein Beispiel für normalen Fließtext. Die Lesbarkeit hängt stark vom Kontrastverhältnis zwischen Vordergrund- und Hintergrundfarbe ab.

Beispielanwendung

Button

Die Vorschau oben zeigt die exakten Farben. Verwende das Kontrastverhältnis von **4.5:1** für Fließtext (AA) und **3:1** für großen Text, um eine gute Zugänglichkeit zu gewährleisten.

Guide & Best Practices

Kontrast-Checker für WCAG-konforme Farbkontraste

Stelle sicher, dass Text und UI ausreichend Kontrast bieten – mit Kontrastverhältnis und klarer AA/AAA-Bewertung.

Typische Einsatzfälle

Ideal für Accessibility-Audits, Design-Systeme, Barrierefreiheits-Compliance und das Prüfen von Themes.

So berechnet Balou den Kontrast

Du gibst Vorder- und Hintergrundfarbe (HEX/RGB) ein; Balou berechnet das Kontrastverhältnis und bewertet es gegen WCAG-Schwellen.

Best Practices für barrierefreie Farben

Ziele auf mindestens AA (4,5:1 Normaltext), prüfe auch Großtext und UI-Komponenten und teste Hover-/Fokus-Zustände.

Häufige Fragen

Welches Kontrastverhältnis erfüllt WCAG AA?

Mindestens 4,5:1 für Normaltext und 3:1 für Großtext (ab ca. 18 pt bzw. 14 pt fett).

Was ist der Unterschied zwischen AA und AAA?

AAA ist strenger und verlangt 7:1 für Normaltext und 4,5:1 für Großtext.

Gilt Kontrast auch für Icons und UI?

Ja, für Nicht-Text-Elemente wie Icons und Bedienelemente gilt mindestens 3:1 (WCAG 1.4.11).

HEX oder RGB – spielt das eine Rolle?

Nein, beide beschreiben dieselbe Farbe; das Kontrastverhältnis ist identisch.