Farbkontrast-Checker
Wähle Text- und Hintergrundfarbe und sieh sofort das WCAG-Kontrastverhältnis, AA/AAA-Ergebnisse und eine Live-Vorschau der Kombination.
Vorschau große Überschrift
Das ist normaler Fließtext in den gewählten Farben, damit du die Lesbarkeit direkt beurteilen kannst.
WCAG-2.1-Schwellen: 4,5:1 (AA), 3:1 (AA groß ≥18pt/14pt fett), 7:1 (AAA), 4,5:1 (AAA groß).
Als Nächstes
Your files are processed locally in your browser. They are not uploaded to our servers.
So funktioniert's
- Wähle oder tippe die Textfarbe und die Hintergrundfarbe.
- Lies das Kontrastverhältnis und die AA/AAA-Ergebnisse für normalen und großen Text ab.
- Passe die Farben an, bis alle nötigen Prüfungen bestehen.
Was ist dieses Tool?
Der Farbkontrast-Checker berechnet das WCAG-2.1-Kontrastverhältnis zweier Farben mit der offiziellen Leuchtdichte-Formel und bewertet es gegen alle vier Schwellen: AA und AAA, jeweils für normalen und großen Text. Eine Live-Vorschau zeigt echten Text in den gewählten Farben, damit du die Lesbarkeit direkt beurteilen kannst. Ausreichender Kontrast ist in vielen Ländern eine rechtliche Barrierefreiheits-Anforderung — und hilft jedem Nutzer bei hellem Sonnenlicht.
Typische Anwendungen
- Text-/Hintergrund-Paare eines Designsystems auf WCAG AA prüfen
- Markenfarben vor einem Website-Launch auf Barrierefreiheit testen
- Kontrast-Warnungen aus Lighthouse- oder axe-Audits beheben
- Eine lesbare Textfarbe für einen gegebenen Hintergrund finden
Häufige Fragen
Welches Verhältnis brauche ich zum Bestehen?
AA verlangt 4,5:1 für normalen Text und 3:1 für großen Text (≥18pt bzw. 14pt fett). AAA erhöht auf 7:1 bzw. 4,5:1.
Was zählt als großer Text?
Text ab 18pt (ca. 24px) oder fetter Text ab 14pt (ca. 18,5px).
Deckt das Tool WCAG 3 / APCA ab?
Nein, es implementiert die WCAG-2.1-Formel — auf die beziehen sich aktuelle rechtliche Standards und Audit-Tools.
Kann ich Farben mit Transparenz prüfen?
Nein, das Verhältnis ist für deckende Farben definiert. Rechne Transparenz zuerst gegen den echten Hintergrund um.