Farbkontrast-Prüfer
WCAG-Barrierefreiheit prüfen
100 % kostenlos. Läuft vollständig in deinem Browser: deine Dateien und Daten verlassen dein Gerät nie, und es wird nichts auf einen Server hochgeladen.
editColours
visibilityLive Preview
Großer Überschriftentext
Das ist ein normaler Absatz bei 16px - die Größe, die die meisten Fließtexte nutzen, und die Größe, die WCAG AA bei 4.5:1 bewertet.
Kleingedrucktes bei 13px, der härteste Fall zum Bestehen.
visibility_offColour Blindness
Die Verhältnisse hier sind das, was jemand mit dieser Form der Farbwahrnehmung sehen würde. Ein Paar, das normal besteht, kann für diese Person trotzdem scheitern.
Über dieses Tool
Das Kontrastverhältnis misst den Unterschied der relativen Luminanz zweier Farben, auf einer Skala von 1:1 (identisch) bis 21:1 (Schwarz auf Weiß). WCAG setzt die Schwellen, die zählen: 4,5:1 für normalen Text bei AA, 3:1 für großen Text und 7:1 für normalen Text auf dem strengeren AAA-Level. Diese Zahlen sind nicht willkürlich – sie stammen aus Forschung dazu, was für Menschen mit mäßig reduzierter Sehkraft lesbar bleibt, was ab mittlerem Alter einen großen Teil jedes Publikums beschreibt. Unzureichender Kontrast ist durchgängig der häufigste Barrierefreiheitsfehler in automatisierten Audits echter Websites, und die übliche Ursache ist, dass Designer hellgrauen Text auf Weiß wählen, weil er auf einem hochwertigen Monitor in einem kontrollierten Raum elegant wirkt. Lesbar bleibt er nicht auf einem Handy in der Sonne, auf einem billigen Laptop-Bildschirm oder für alle über etwa fünfzig. Prüfen dauert Sekunden; der Fix ist meist, eine Farbe etwas abzudunkeln. Das läuft vollständig in deinem Browser.
So verwendest du dieses Tool
- Gib deine Textfarbe einFüge einen HEX-Wert ein oder wähle einen. Das ist der Vordergrund – die Farbe, in der die Wörter gezeichnet werden.
- Gib die Hintergrundfarbe einDie tatsächliche Farbe hinter dem Text, nicht der Seitenhintergrund, wenn eine Karte oder ein Overlay dazwischenliegt.
- Lies Verhältnis und BestehensmarkenDu bekommst das numerische Verhältnis plus, ob es AA und AAA für normalen und großen Text besteht.
- Anpassen, wenn es scheitertDen Text abzudunkeln stört ein Design meist weniger, als den Hintergrund zu ändern.
Warum es nutzen
- Gibt das genaue Verhältnis und Bestanden oder Nicht bestanden gegen jede WCAG-Schwelle auf einmal.
- Fängt den häufigsten Barrierefreiheitsfehler im Web, bevor er ausgeliefert wird.
- Unterscheidet normalen von großem Text, die wirklich unterschiedliche Anforderungen haben.
- Läuft in deinem Browser ohne Konto oder Limit.
- Schnell genug, um eine ganze Palette in ein paar Minuten zu prüfen.
Häufige Anwendungen
- Eine Markenpalette prüfen, bevor sie in ein Design-System eingefroren wird.
- Barrierefreiheits-Audit-Fehler auf einer bestehenden Seite beheben.
- Eine gesetzliche oder Beschaffungsanforderung für WCAG-AA-Konformität erfüllen.
- Prüfen, dass Platzhalter- und Hilfetext lesbar ist, nicht nur Fließtext.
- Entscheiden, ob weißer oder schwarzer Text auf einer Markenfarbe besser funktioniert.
Tipps für bessere Ergebnisse
- Ziele auf AA (4,5:1) als Baseline für Fließtext. AAA lohnt sich für langes Lesen, ist für eine Markenpalette aber oft unpraktisch.
- Prüfe die Zustände ebenso wie den Default – Hover, Disabled, Placeholder und besuchte Linkfarben scheitern öfter als Fließtext.
- Großer Text bedeutet 24px regular oder 18,66px fett und darüber. Wende die 3:1-Erlaubnis nicht auf 16px-Fließtext an.
- Text über einem Bild braucht ein solides Overlay oder einen Textschatten, weil der Kontrast über das Foto variiert.
- Kontrast wird gegen das gemessen, was direkt hinter dem Text liegt – eine Kartenfarbe, nicht die Seitenfarbe darunter.
Fehler, die du vermeiden solltest
- Hellgrau auf Weiß nutzen, weil es auf einem guten Monitor elegant wirkt. Es scheitert routinemäßig und ist der häufigste Fehler überhaupt.
- Die Großer-Text-Schwelle auf normalgroßen Text anwenden, was der Standard nicht erlaubt.
- Nur Fließtext prüfen und dann Placeholder-Text, deaktivierte Buttons und Bildunterschriften scheitern lassen.
- Annehmen, eine Farbe, die auf Weiß besteht, bestehe auch in deinem Dark Theme. Beide Richtungen müssen geprüft werden.
- Kontrast als optionale Politur behandeln. In vielen Rechtsordnungen ist Barrierefreiheit eine gesetzliche Pflicht, keine Vorliebe.
Häufig gestellte Fragen
Gib deine Text- und Hintergrundfarben oben ein. Du bekommst das genaue Kontrastverhältnis und ob es WCAG AA und AAA für normalen und großen Text besteht.
Ja. Kein Konto, kein Limit, und er läuft vollständig in deinem Browser.
AA verlangt 4,5:1 für normalen Text und 3:1 für großen Text. AAA verlangt 7:1 bzw. 4,5:1. AA ist das Level, auf das sich die meisten gesetzlichen und Beschaffungsstandards beziehen.
24px (18pt) bei regular weight oder 18,66px (14pt) fett und darüber. Alles Kleinere ist normaler Text und braucht die vollen 4,5:1 – die Großer-Text-Erlaubnis auf 16px-Fließtext anzuwenden ist ein häufiges Missverständnis.
Weil niedriger Kontrast für Menschen mit reduzierter Sehkraft, in greller Sonne oder auf schlechten Bildschirmen unlesbar ist. Es ist auch das am häufigsten gemeldete Problem in Barrierefreiheits-Audits und in vielen Rechtsordnungen eine gesetzliche Pflicht statt einer Nettigkeit.
Ja. WCAG verlangt 3:1 für bedeutsame Nicht-Text-Elemente – Icons, die Information tragen, Formularfeld-Ränder, Fokusindikatoren. Rein dekorative Grafiken sind ausgenommen.
Meist, indem du den Text abdunkeln statt den Hintergrund zu ändern, oder indem du die Markenfarbe für große Überschriften und Akzente nutzt, wo 3:1 gilt, und Fließtext ein dunkleres Neutral hält.
Das Kontrastverhältnis ist luminanzbasiert, das hilft, ist aber kein vollständiger Farbenblindheits-Check. Die separate Regel lautet, nie allein auf Farbe zu setzen, um Bedeutung zu tragen – kombiniere sie immer mit Text, einem Icon oder einem Muster.
Andere suchen auch nach
- farbkontrast checker wcag
- barrierefreiheit kontrastverhältnis
- wcag aa kontrast anforderungen
- kontrast checker für website
- farbkontrast analyser
- ist mein text lesbar genug
- wcag 4,5:1 verhältnis