Kontrastprüfer
Ob es überhaupt jemand lesen kann.
Beispiele ersetzen vorübergehend Eingabe und Einstellungen. Du kannst deine vorherige Arbeit wiederherstellen.
0 Zeichen
Ergebnis
Oben einfügen oder tippen, das Ergebnis erscheint hier.
Ihre Dateien bleiben auf Ihrem Gerät
Dieses Tool läuft vollständig in Ihrem Browser. Was Sie einfügen, wird auf Ihrem Gerät verarbeitet und nie an einen Server gesendet. Es ist daher auch für Tokens, Schlüssel und unveröffentlichte Texte sicher.
Beispiel
Vereinswebsite in Grün: Besteht weiße Schrift auf dem Button?
Die Website eines Sportvereins nutzt das Vereinsgrün #4caf50 für Buttons mit weißer Schrift, die Fußzeile ist hellgrau (#999999 auf #f5f5f5). Vor dem Relaunch kommen alle Paare auf einmal ins Feld, eins pro Zeile, Textfarbe zuerst – dazu zwei dunklere Grüntöne und ein dunkleres Grau zur Auswahl.
- Zuerst das Verhältnis lesen: Weiß auf #4caf50 ergibt 2,78:1 und fällt überall durch, sogar bei großem Text, der nur 3:1 braucht.
- #388e3c kommt auf 4,12:1: genug für große Schrift ab 24 px (oder 18,66 px fett), zu wenig für normalen Button-Text.
- #2e7d32 erreicht 5,13:1 und besteht AA für Fließtext. In der Fußzeile kommt #666666 statt #999999 auf 5,27:1.
- Die Auswertung nennt je Zeile das Verhältnis und dann für jede Stufe „erfüllt“ oder „verfehlt“: Fließtext AA und AAA, großer Text AA und AAA, Rahmen und Symbole.
| Eingabe | Verhältnis | AA Fließtext (4,5) | AA großer Text (3) |
|---|---|---|---|
| #ffffff #4caf50 | 2,78:1 | nein | nein |
| #ffffff #388e3c | 4,12:1 | nein | ja |
| #ffffff #2e7d32 | 5,13:1 | ja | ja |
| #999999 #f5f5f5 | 2,61:1 | nein | nein |
| #666666 #f5f5f5 | 5,27:1 | ja | ja |
Der Verein nimmt #2e7d32 für die Buttons und #666666 für die Fußzeile: Beide bestehen AA, keines AAA – dafür wären 7:1 nötig. Das Grün bleibt erkennbar das Vereinsgrün, nur dunkler.
So funktioniert es
- Ein Paar je Zeile eintippen, erst die Textfarbe, dann den Hintergrund: #333 #fff. „auf“ dazwischen geht auch (#333 auf #fff), ebenso ein Komma, ein Schrägstrich oder das englische „on“.
- Eine einzelne Farbe wird gegen den oben angegebenen Hintergrund geprüft.
- Zuerst das Verhältnis lesen; alles andere folgt daraus.
- 4,5 ist die Zahl, die Fließtext überbieten muss.
Häufige Fragen
- Was verlangen AA und AAA genau?
- AA verlangt 4,5:1 für Fließtext und 3:1 für großen Text – 24 px oder 18,66 px fett. AAA verlangt 7:1 und 4,5:1. Ränder, Symbole und die Kanten von Eingabefeldern brauchen 3:1.
- Warum fällt mein Grau durch?
- #777 auf Weiß ergibt 4,48:1 und verfehlt AA um zwei Hundertstel. Das ist der klassische Beinahe-Treffer und der Grund, warum überhaupt geprüft wird: Wer die Farbe gewählt hat, findet sie in Ordnung, und für viele Menschen ist sie wirklich schwer zu lesen. #757575 besteht.
- Kommt es auf die Reihenfolge der Farben an?
- Bei deckenden Farben nicht: Das Verhältnis ist symmetrisch, Text auf Hintergrund und Hintergrund auf Text ergeben dieselbe Zahl. Bei einer transparenten Farbe (#33333380, rgba(…)) schon: Die erste Farbe wird über die zweite gelegt, ein transparenter Hintergrund über eine weiße Seite – schreiben Sie also die Textfarbe zuerst.
- Reicht ein bestandenes Verhältnis, um es barrierefrei zu nennen?
- Nein. Kontrast ist eine Anforderung von vielen und sagt nichts über Fokuszustände, Trefferflächen, Bewegung oder darüber, ob die Farbe allein eine Bedeutung trägt. Er ist eine Untergrenze, kein Urteil.
- Welche Farbangaben versteht der Prüfer?
- Hex-Werte mit oder ohne Raute, drei- oder sechsstellig (#333, 333, #757575), außerdem rgb(…) und hsl(…), auch mit Leerzeichen in der Klammer: rgb(51, 51, 51). Eine Farbe mit Transparenz (#33333380) wird so bewertet, wie sie auf dem Hintergrund aussieht. Farbnamen wie „white“ werden nicht erkannt; die Zeile meldet dann, dass eine der Angaben keine Farbe ist.
- Wie kommt die Zahl zustande, und warum ist 21:1 das Maximum?
- Verglichen wird die relative Helligkeit beider Farben nach der WCAG-Formel: (hellere + 0,05) geteilt durch (dunklere + 0,05). Schwarz auf Weiß ergibt das Maximum von 21:1, eine Farbe auf sich selbst 1:1. Gerundet wird auf zwei Stellen – deshalb fällt #777 mit 4,48:1 knapp durch.
Verwandte Tools
◒ Farb-Umrechner HEX, RGB, HSL und CMYK – dazu das Kontrastverhältnis, das über Lesbarkeit entscheidet. ◒ CSS-Formatierer Eine Deklaration je Zeile – oder die ganze Datei auf einer. ◉ Bildtools Farbe aus Bild bestimmen Ein Klick für den Farbcode, ein Knopf für die Farbpalette des Bildes. ‹› HTML-Formatierer Eingerückt zum Lesen oder zusammengedrückt zum Ausliefern.