Farbkontrast prüfen
Stellen Sie sicher, dass Ihr Text für alle gut lesbar ist, und erhalten Sie eine Korrektur, wenn nicht.
Auf diesem Gerät versiegelt
Läuft in Ihrem Browser. Nichts wird hochgeladen.
Versiegelt
Farben
- Kontrastverhältnis
- Normaler Text
- AA · 4,5:1
- AAA · 7:1
- Großer Text
- AA · 3:1
- AAA · 4,5:1
- Bedienelemente und Symbole
- AA · 3:1
- APCA-Kontrast (zur Information)
APCA ist eine neuere Methode, die für künftige Barrierefreiheitsrichtlinien geprüft wird. Maßgeblich ist heute WCAG 2.2.
Vorschau
So liest sich großer Text
Normaler Text sollte für alle gut lesbar bleiben, auch für Menschen mit Sehschwäche, auf dem Handy in praller Sonne oder auf einem alten Bildschirm.
Kleingedrucktes und Bildunterschriften brauchen den meisten Kontrast.
Korrekturvorschläge
So funktioniert es
-
Beide Farben eingeben
Geben Sie Textfarbe und Hintergrundfarbe ein oder wählen Sie sie aus. Jedes Format funktioniert: HEX, RGB, HSL oder ein CSS-Name.
-
Ergebnis ablesen
Sehen Sie das Kontrastverhältnis und ob es WCAG 2.2 AA und AAA für normalen Text, großen Text und Bedienelemente erfüllt.
-
Bei Bedarf korrigieren
Wenn eine Stufe nicht bestanden wird, verwenden Sie eine der vorgeschlagenen Farben: Es ist die nächstgelegene mit gleichem Farbton, die besteht.
Häufige Fragen
Welches Kontrastverhältnis brauche ich?
WCAG 2.2 Stufe AA verlangt mindestens 4,5:1 für normalen Text und 3:1 für großen Text. Stufe AAA verlangt 7:1 und 4,5:1. Symbole, Rahmen von Eingabefeldern und andere Bedienelemente brauchen mindestens 3:1 gegenüber ihrer Umgebung.
Was gilt als großer Text?
Text ab 18 Punkt (24 CSS-Pixel) oder ab 14 Punkt (etwa 18,7 CSS-Pixel), wenn er fett ist. Alles Kleinere ist normaler Text.
Warum besteht 4,49:1 nicht, obwohl es so nah an 4,5:1 ist?
Die WCAG-Schwellen sind strikte Mindestwerte, und das Verhältnis darf nicht aufgerundet werden. Deshalb zeigt dieser Checker das Verhältnis abgerundet an: Ein Wert, der bestanden aussieht, ist es auch.
Was ist APCA?
APCA (Accessible Perceptual Contrast Algorithm) ist eine neuere Methode zur Kontrastmessung, die berücksichtigt, ob Text dunkel auf hell oder hell auf dunkel steht. Sie wird für eine künftige Version der Richtlinien geprüft. Hier wird sie nur zur Information angezeigt: Rechtliche Vorgaben und Audits beziehen sich heute auf das WCAG-2-Verhältnis.
Wie werden die vorgeschlagenen Farben gewählt?
Der Checker behält Farbton und Buntheit Ihrer Farbe bei und ändert im wahrnehmungsbasierten Farbraum OKLCH nur die Helligkeit, bis er den nächstgelegenen Wert findet, der die Stufe erreicht. Ihre Farbe sieht weiterhin wie sie selbst aus, nur etwas heller oder dunkler.
Funktioniert das mit transparenten Farben?
Ja, für die Textfarbe: Eine halbtransparente Textfarbe wird zuerst mit dem Hintergrund gemischt, weil Menschen genau diese Farbe sehen. Der Hintergrund wird als deckend behandelt.