Contrast Checker
WCAG contrast check
WCAG contrast check Läuft lokal in Ihrem Browser
The quick brown fox
Small body text at 14px
| Normal text (AA) | needs 4.5:1 | Pass |
| Normal text (AAA) | needs 7:1 | Pass |
| Large text 18pt+ (AA) | needs 3:1 | Pass |
| Large text 18pt+ (AAA) | needs 4.5:1 | Pass |
| UI components and graphics (AA) | needs 3:1 | Pass |
Text: #1a1a1a Background: #ffffff Contrast ratio: 17.40:1 Normal text (AA) (needs 4.5:1): Pass Normal text (AAA) (needs 7:1): Pass Large text 18pt+ (AA) (needs 3:1): Pass Large text 18pt+ (AAA) (needs 4.5:1): Pass UI components and graphics (AA) (needs 3:1): Pass
About the
Der Kontrastprüfer misst das Kontrastverhältnis zwischen einer Textfarbe und einer Hintergrundfarbe mithilfe der WCAG-Luminanzformel und zeigt Ihnen an, welche Barrierefreiheitsstufen dieses Paar besteht. Dies ist die Prüfung, die darüber entscheidet, ob Textkörper tatsächlich lesbar ist: Ein Verhältnis von 4,5 zu 1 ist das Minimum für normalen Text, 3 zu 1 für großen Text und für Schnittstellengrenzen und 7 zu 1 für verbesserte Compliance. Die Beurteilung des Kontrasts mit dem Auge ist unzuverlässig, da das Auge viel empfindlicher auf Grün als auf Blau reagiert, weshalb ein hell wirkendes Gelb und ein dunkel wirkendes Blau nahezu identische Ergebnisse erzielen können.
Where people use the
- Prüfen, ob Fließtext auf farbigem Hintergrund AA entspricht.
- Wählen Sie zwischen schwarzem und weißem Text für eine Schaltflächenfarbe.
- Prüfung einer vorhandenen Palette vor einer Neugestaltung.
- Dokumentation einer Barrierefreiheitsentscheidung in einem Ticket.
How to use the
- 1
Legen Sie die Textfarbe fest
Geben Sie einen Hexadezimalwert ein, z. B. 1a1a1a, oder verwenden Sie die Farbauswahl. Dreistellige Abkürzungen wie f0a werden akzeptiert.
- 2
Legen Sie die Hintergrundfarbe fest
Das Gleiche gilt für den Hintergrund. Die Vorschau wird aktualisiert, wenn Sie eine davon ändern.
- 3
Lesen Sie das Verhältnis
Die Zahl reicht von 1:1, identische Farben, bis 21:1, Schwarz auf Weiß. Höher bedeutet besser lesbar.
- 4
Überprüfen Sie die benötigte Stufe
Normaler Fließtext benötigt 4,5 zu 1 für AA und 7 zu 1 für AAA. Überschriften in 18pt oder 14pt Fettdruck und UI-Ränder benötigen 3 zu 1.
- 5
Schauen Sie sich die Vorschau und die Anzahl an
Ein Paar kann auf dem Papier durchgeben und sieht bei kleiner Größe oder auf einem Bildschirm mit geringer Qualität immer noch schlecht aus. Wenn es schwer lesbar aussieht, ist es schwer lesbar.
Tipps und Best Practices
- Verdunkeln Sie eine Farbe für Text und behalten Sie die hellere Version für Füllungen bei.
- Überprüfen Sie die kleinste Größe, in der der Text tatsächlich verwendet wird.
- Auch Rahmen und Symbole benötigen 3 zu 1, nicht nur Text.
Häufig gestellte Fragen
Wie lautet die Formel für das Kontrastverhältnis?
Jede Farbe wird nach Gammakorrektur mit den Standardgewichten 0,2126 für Rot, 0,7152 für Grün und 0,0722 für Blau in relative Leuchtdichte umgewandelt. Das Verhältnis ist dann die hellere Leuchtdichte plus 0,05 geteilt durch die dunklere plus 0,05. Das Ergebnis reicht von 1:1 bis 21:1.
Warum scheitert meine Markenfarbe?
Weil die meisten gesättigten Mitteltonfarben gegenüber Weiß kein Verhältnis von 4,5 zu 1 erreichen können. Die übliche Lösung besteht darin, die Farbe für Textzwecke abzudunkeln und für große Füllungen die hellere Version beizubehalten, was genau das ist, was die meisten Designsysteme mit ihrer Primärfarbe tun.
Reicht das Überschreiten des Verhältnisses aus, um zugänglich zu sein?
Es ist notwendig, aber nicht ausreichend. Sehr großer oder sehr kleiner Text, geringe Schriftstärken, Text über Bildern und bestimmte Formen der Farbsehschwäche beeinträchtigen die Lesbarkeit über das Verhältnis hinaus. Testen Sie mit echten Benutzern, wo immer Sie können.
Spielt die Richtung eine Rolle, hell auf dunkel oder dunkel auf hell?
Nein. Das Verhältnis ist symmetrisch, d. h. Schwarz auf Weiß und Weiß auf Schwarz ergeben jeweils 21:1. Was sich in der Praxis unterscheidet, ist die Blendung und das wahrgenommene Gewicht, wobei es sich dabei eher um eine Design- als um eine Compliance-Beurteilung handelt.
Was gilt als großer Text?
In WCAG-Begriffen 18pt oder größer bzw. 14pt oder größer bei Fettdruck. In CSS-Pixeln sind das etwa 24 Pixel oder etwa 18,66 Pixel, wenn es fett gedruckt ist.
Wo findet die Berechnung statt?
Komplett in Ihrem Browser. Da nichts hochgeladen wird, können Sie die Farben anhand einer Markenrichtlinie überprüfen, die noch nicht öffentlich ist.