Farbkontrast-Checker – WCAG AA und AAA prüfen
Sorg dafür, dass dein Text für alle lesbar ist. Gib Text- und Hintergrundfarbe ein und sieh das WCAG-Kontrastverhältnis, AA- und AAA-Ergebnis, eine Live-Vorschau und einen Korrekturvorschlag.
Text- und Hintergrundfarbe als HEX, RGB oder HSL eingeben oder wählen. Das Tool berechnet das Verhältnis, z. B. 4,83:1, und zeigt, ob WCAG AA (4,5:1 normal, 3:1 groß) und AAA (7:1 und 4,5:1) erfüllt sind. Fällt es durch, schlägt es die nächste passende Textfarbe vor.
So funktioniert: Farbkontrast-Checker
- Textfarbe eingeben oder wählen.
- Hintergrundfarbe eingeben oder wählen.
- Kontrastverhältnis und WCAG-Ergebnisse ablesen.
- Vorschau mit Überschrift, Text und Button prüfen.
- Bei Bedarf die vorgeschlagene Farbe übernehmen.
WCAG-Anforderungen
Die WCAG 2.x legen Mindestkontraste zwischen Text und Hintergrund fest, von 1:1 bis 21:1.
| Stufe | Normaler Text | Großer Text | UI-Elemente |
|---|---|---|---|
| AA | 4,5:1 | 3:1 | 3:1 |
| AAA | 7:1 | 4,5:1 | — |
„Groß“ heißt mindestens 24 px normal oder etwa 18,7 px fett. AA ist das übliche rechtliche Ziel, etwa für die BITV und den European Accessibility Act.
Berechnung
Jede Farbe wird in relative Leuchtdichte umgerechnet, wobei Grün viel stärker zählt als Blau. Verhältnis = (hellere + 0,05) ÷ (dunklere + 0,05). Abgerundet wird wie in der WCAG – 4,499 fällt durch.
Kontrast verbessern
Der Vorschlag behält Farbton und Sättigung und ändert nur die Helligkeit bis 4,5:1. Alternativ: dunklerer Hintergrund, größerer oder fetter Text. #767676 ist das hellste Grau, das auf Weiß AA besteht.
Mehr als Zahlen
Fehler und Links nicht nur mit Farbe kennzeichnen, Hell- und Dunkelmodus prüfen. Paletten mit dem Farbpaletten-Generator, Farben aus Bildern mit dem Farbe aus Bild auslesen, Umrechnung mit HEX in RGB umrechnen.
Kontrast im Alltag testen
Prüfe nicht nur Fließtext, sondern auch Platzhalter in Formularfeldern, deaktivierte Buttons, Links im Fließtext und Text auf farbigen Bannern. Gerade hellgraue Platzhalter fallen häufig durch. Auch Hover- und Fokus-Zustände brauchen genug Kontrast, damit Tastaturnutzer sehen, wo sie sich befinden. Teste Farben zusätzlich auf einem Handy im hellen Sonnenlicht: Ein knapp bestandener Kontrast wirkt dort schnell blass. Wer eine Markenfarbe hat, die durchfällt, kann sie für große Überschriften und Flächen behalten und für kleinen Text eine dunklere Variante festlegen. So bleibt das Design erkennbar und trotzdem barrierefrei.
Dokumentiere die geprüften Farbpaare im Styleguide, damit das ganze Team sie verwendet.
Diese kostenlosen Tools könnten dir auch helfen: JSON formatieren, Passwort-Generator und Regex-Tester.
Häufige Fragen
Welches Kontrastverhältnis braucht WCAG AA?
4,5:1 für normalen Text, 3:1 für großen Text und UI-Elemente.
Was verlangt WCAG AAA?
7:1 für normalen und 4,5:1 für großen Text.
Was gilt als großer Text?
Mindestens 24 px normal oder etwa 18,7 px fett.
Welches Grau besteht auf Weiß?
#767676 ist das hellste Grau mit 4,5:1 auf Weiß.
Wie funktioniert der Farbvorschlag?
Farbton und Sättigung bleiben, die Helligkeit wird bis 4,5:1 angepasst.
Zuletzt aktualisiert: