Hat mein Text genug Kontrast? (WCAG)
Tippe eine Textfarbe und eine Hintergrundfarbe ein - das Tool berechnet das Kontrastverhältnis (1:1 bis 21:1) und zeigt, ob es AA / AAA für kleinen Text, großen Text und UI-Komponenten besteht.
Plus eine Bildschirm-Pipette (Chrome/Edge) - greif dir jedes Element.
Du siehst das Paar live - kleinen Text, großen Text, Beispielbuttons. Lokal - Farben verlassen den Browser nie.
Kritisch für Accessibility (a11y) - WCAG 2.1 AA ist das Minimum, das die meisten Regulierungen verlangen (Section 508, EU-Richtlinie zur Barrierefreiheit, UK Equality Act).
So nutzt du das Tool
- Rechts: zwei Felder, "Vordergrund" (Text) und "Hintergrund". Jedes akzeptiert HEX, RGB, nativen Farb-Picker, optional eine Bildschirm-Pipette.
- In der Mitte siehst du das Paar live - kleinen Text (15px), großen Text (28px), ein vollständiges Pangram-Sample und zwei Button-Stile.
- Balken darunter: Verhältnis (z. B. "4.83:1") und vier PASS/FAIL-Badges: AA-klein (4.5:1), AAA-klein (7:1), AA-groß (3:1), AA-UI (3:1).
- Wenn AA-klein fehlschlägt (das häufigste Problem), erscheint ein "Auto-Fix"-Button - er verdunkelt/erhellt die Textfarbe in OKLCH (mit erhaltenem Farbton), bis das Verhältnis 4.5:1 erreicht.
- "Tauschen" kippt Vordergrund ↔ Hintergrund - nützlich, wenn du nicht weißt, welche Seite du anpassen sollst.
Wann das hilfreich ist
Wo der Kontrast-Prüfer glänzt - typische Szenarien:
- Webdesign / a11y-Audits - AA-klein 4.5:1 ist der Standard für Fließtext, AA-groß 3:1 für Überschriften, AA-UI 3:1 für Button-Borders und Icons.
- Markenfarben - sicherstellen, dass deine Farben auf unterschiedlichen Flächen nutzbar bleiben.
- Light- / Dark-Mode - Kombinationen für beide Modi testen.
- E-Mail-Templates - Outlook rendert Farben schlecht. Mehr Kontrast = lesbarer Text.
- Druck - WCAG zielt auf Bildschirme, aber 4.5:1+ funktioniert auch auf Papier gut.
- Schulung - bekomm ein Gefühl dafür, warum "subtiler" Text (hellgrau auf weiß) 1.5:1 liest - kaum sichtbar.
Wenn du die fehlschlagende Farbe in ein anderes Format umrechnen willst, nutze den Farb-Konverter. Für das größere a11y-Bild simulier Protanopie / Deuteranopie / Tritanopie im Farbenblindheit-Simulator.