So funktioniert es
- Lege Hintergrundfarbe und Textfarbe mit den Farbwählern oder durch Eingabe von HEX-Codes fest.
- Lies das Kontrastverhältnis als Zahl wie 4.50:1 ab und sieh dir die Vorschaukarte an.
- Prüfe die Badges PASS oder FAIL für normalen Text AA, großen Text AA und normalen Text AAA.
Der Prüfer berechnet das Kontrastverhältnis so, wie es die Web Content Accessibility Guidelines definieren. Jede Farbe wird mit der sRGB-Formel in relative Luminanz umgerechnet, und das Verhältnis ist die hellere Luminanz plus 0,05, geteilt durch die dunklere Luminanz plus 0,05. Das Ergebnis wird mit zwei Nachkommastellen angezeigt, von 1:1 bei identischen Farben bis 21:1 bei Schwarz auf Weiß. Die Standardfarben sind Weiß und Schwarz.
Es werden drei Ergebnisse angezeigt. Normaler Text auf Stufe AA braucht ein Verhältnis von mindestens 4,5. Großer Text auf Stufe AA braucht mindestens 3. Normaler Text auf Stufe AAA braucht mindestens 7. Jedes wird mit PASS oder FAIL markiert. Auch das Verhältnis selbst ist farbcodiert. Nach WCAG bedeutet großer Text etwa 18 Punkt normal oder 14 Punkt fett. Nutze das Ergebnis für großen Text also nur, wenn dein Text diese Größe hat.
Eine Vorschaukarte nutzt deine beiden Farben und zeigt eine Überschrift und eine Beispielzeile, sodass du die Farben ebenso wie die Zahl beurteilen kannst. Ein bestandener Wert garantiert allein noch keine gute Lesbarkeit, denn auch Schriftstärke, Größe und Umgebung spielen eine Rolle.
Die Farben müssen als 6-stellige HEX-Codes eingegeben werden. Die Berechnung erfolgt in deinem Browser.
Häufige Fragen
Welches Verhältnis brauche ich?
Für WCAG AA braucht normaler Text 4,5:1 und großer Text 3:1. Für AAA braucht normaler Text 7:1. Das Tool zeigt jeweils das Ergebnis.
Was zählt als großer Text?
Nach WCAG Text mit etwa 18 Punkt oder größer oder 14 Punkt fett oder größer.
Welche Farbe kommt wohin?
Das Tool behandelt eine Farbe als Hintergrund und die andere als Text, das Verhältnis ist aber in beiden Fällen gleich.
Warum funktioniert mein kurzer HEX-Code nicht?
Gib die vollständige 6-stellige Form ein, zum Beispiel #333333 statt #333.
Prüft es Elemente ohne Text?
Es liefert nur Schwellen für Text. Das Verhältnis wird angezeigt, sodass du es selbst mit der 3:1-Richtlinie für Oberflächenkomponenten vergleichen kannst.