Kontrastprüfer
Geben Sie eine Textfarbe und eine Hintergrundfarbe ein und erhalten Sie das WCAG-Kontrastverhältnis sowie bestanden oder nicht bestanden für AA und AAA, für normalen und für großen Text, mit Live-Vorschau.
Läuft in Ihrem Browser; nichts, was Sie eingeben, verlässt Ihr Gerät
Kontrastverhältnis –
| Verwendung | Erforderlich | Ergebnis |
|---|---|---|
| Normaler Text, AA | 4.5:1 | |
| Normaler Text, AAA | 7:1 | |
| Großer Text, AA | 3:1 | |
| Großer Text, AAA | 4.5:1 |
Verwendet das WCAG-2.x-Kontrastverhältnis, das nur den Helligkeitskontrast misst. Es kann keine Farbenblindheits-Paare wie Rot auf Grün, dünne oder kleine Schriften oder Text auf Bildern und Verläufen beurteilen. Liest HEX (3, 4, 6 oder 8 Stellen), rgb(), hsl() und CSS-Farbnamen; andere CSS-Farbsyntax liest Ihr Browser, soweit er kann.
So prüfen Sie den Farbkontrast
- Tippen oder fügen Sie die Textfarbe und die Hintergrundfarbe als HEX,
rgb(),hsl()oder CSS-Farbnamen wienavyein, oder wählen Sie beide mit dem Farbwähler. - Lesen Sie das Kontrastverhältnis ab, von 1:1 ohne Kontrast bis 21:1 für Schwarz auf Weiß.
- Prüfen Sie die Tabelle: Normaler Text braucht 4,5:1 für AA und 7:1 für AAA, großer Text braucht 3:1 für AA und 4,5:1 für AAA. Die Vorschau zeigt, wie der Text aussieht.
Was das Kontrastverhältnis bedeutet
Das WCAG-Kontrastverhältnis vergleicht die Helligkeit zweier Farben. Jede Farbe wird in eine relative Luminanz zwischen 0 (Schwarz) und 1 (Weiß) umgerechnet, anhand der sRGB-Werte ohne Gammakurve und mit einer Gewichtung der drei Kanäle danach, wie hell das Auge sie empfindet: Grün am stärksten, dann Rot, dann Blau. Das Verhältnis ist die hellere Luminanz plus 0,05 geteilt durch die dunklere Luminanz plus 0,05, es reicht also von 1:1 für identische Farben bis 21:1 für Schwarz auf Weiß.
WCAG 2 legt Mindestwerte nach Textgröße fest. Normaler Text braucht 4,5:1 für Stufe AA und 7:1 für die strengere Stufe AAA. Großer Text, der leichter zu lesen ist, braucht 3:1 für AA und 4,5:1 für AAA. Groß bedeutet mindestens 24 px oder etwa 18,7 px in Fettdruck.
Das Verhältnis betrachtet nur die Helligkeit. Zwei Farben können bestehen und für Menschen mit Farbenblindheit trotzdem schwer zu unterscheiden sein, und dünne Schriften oder Text über einem Foto brauchen womöglich mehr Kontrast als das Minimum. Verstehen Sie den Wert als Untergrenze und sehen Sie sich die Vorschau an.
Für Entwickler / KI-Agenten
Sie müssen den Kontrast im Code, in einem Build-Schritt oder von einem KI-Agenten prüfen? Dafür gibt es eine API: Siehe die Anleitung zur Kontrastprüfer-API.
Tipps
- Sie müssen eine Farbe zuerst zwischen HEX, RGB, HSL und CMYK umrechnen? Nutzen Sie den Farbkonverter.
- Sie bauen ein Set passender Farben? Der Farbpaletten-Generator zeigt für jede Farbfläche den Kontrast zu Weiß und Schwarz.
- Sie brauchen die Farbe eines Pixels in einem Screenshot? Nutzen Sie Farbe aus Bild auslesen.
Häufige Fragen
Wie wird das Kontrastverhältnis berechnet?
Mit der WCAG-2.x-Formel: Die relative Luminanz jeder Farbe wird aus ihren sRGB-Werten berechnet, und das Verhältnis ist (hellere + 0,05) geteilt durch (dunklere + 0,05). Es reicht von 1:1 (kein Kontrast) bis 21:1 (Schwarz auf Weiß). Das Verhältnis wird mit zwei Nachkommastellen angezeigt, daneben steht der ungerundete Wert.
Welche Verhältnisse verlangen AA und AAA?
Normaler Text braucht 4,5:1 für AA und 7:1 für AAA. Großer Text, also mindestens 24 px normal oder etwa 18,7 px fett, braucht 3:1 für AA und 4,5:1 für AAA. Ein Verhältnis wird nicht über eine Grenze hinaus aufgerundet: 4,499:1 wird als 4,49 angezeigt und besteht AA für normalen Text nicht.
Warum besteht #777777 auf Weiß AA nicht?
Sein Kontrast beträgt 4,48:1, knapp unter den 4,5:1, die AA für normalen Text verlangt. Für Fließtext besteht es also nicht, für großen Text aber, der nur 3:1 braucht. Ein etwas dunkleres Grau wie #767676 erreicht 4,54:1 und besteht.
Was passiert bei transparenten Farben?
Eine teilweise transparente Textfarbe wird zuerst mit dem Hintergrund gemischt, so wie ein Bildschirm sie darstellt, und die gemischte Farbe wird gemessen. Ein teilweise transparenter Hintergrund wird auf Weiß liegend angenommen. Die Kanäle werden nach dem Mischen auf ganze Zahlen gerundet.
Heißt ein bestandenes Verhältnis, dass der Text barrierefrei ist?
Nicht allein. Das Verhältnis misst nur den Helligkeitskontrast. Es sagt nichts über Farbenblindheits-Paare, sehr dünne Schriften, Text auf Fotos oder Verläufen aus und auch nicht darüber, ob eine Bedeutung allein durch Farbe vermittelt wird. Betrachten Sie es als Mindestwert, nicht als Garantie.
Wird etwas an einen Server gesendet?
Nein. Die Farben werden in Ihrem Browser gelesen und gemessen, und nichts, was Sie eingeben, verlässt Ihr Gerät.