Zum Hauptinhalt springen
ToolsByUs

Kontrast prüfen

Der Kontrast-Checker misst eine Textfarbe gegen ihren Hintergrund und meldet das WCAG-2.2-Verhältnis, welche Stufen es damit besteht, und daneben den APCA-Helligkeitskontrast. Eine halbtransparente Vordergrundfarbe wird vor dem Messen auf den Hintergrund gerechnet – genau deshalb weichen die meisten Prüftools vom Browser ab – und fällt ein Farbenpaar durch, sucht das Tool die nächstgelegene bestehende Farbe, indem es die Helligkeit in OKLCh verschiebt. So behält das Ergebnis den Farbton, mit dem Sie gestartet sind.

Nur lokal

Verhältnis5.13:1

Dies ist ein Beispiel für normalen Fließtext. Dieser Absatz hat eine nach WCAG übliche Textgröße.

Und dies ist großer Text.

Normaler Text, AABestanden · 4.5:1

Fließtext: unter 18pt (24 CSS-px) in normaler Schrift oder unter 14pt (ca. 18,67 CSS-px) bei fetter Schrift. WCAG 1.4.3.

Normaler Text, AAANicht bestanden · 7:1

Erhöhte Anforderung für dieselben Größen. WCAG 1.4.6.

Großer Text, AABestanden · 3:1

Mindestens 18pt (24 CSS-px) in normaler Schrift oder 14pt (ca. 18,67 CSS-px) bei fetter Schrift. WCAG 1.4.3.

Bedienelemente, AABestanden · 3:1

Symbole, Fokusringe, Eingaberänder und Diagrammlegenden. WCAG 1.4.11.

APCA Lc 75.4dunkler Text auf hellem Grund

Fließtext ab 18 px bei normaler Schriftstärke. APCA ist ein Entwurfsmodell für WCAG 3 ohne feste Bestehen-oder-Durchfallen-Grenze. Der Wert gibt Hinweise zu Textgröße und -stärke.

Verhältnis
5.13:1
Text
#6d6d74
Hintergrund
#ffffff

Wie funktioniert Kontrast prüfen?

Kontrast ist ein Verhältnis zwischen zwei relativen Luminanzen. Jeder Kanal wird aus seiner sRGB-Kodierung herausgeholt – über die stückweise definierte Übertragungsfunktion aus IEC 61966-2-1, nicht über ein schlichtes Gamma von 2.2 – und dann gewichtet: 0.2126 für Rot, 0.7152 für Grün, 0.0722 für Blau, ungefähr der Anteil, mit dem jeder Kanal zu dem beiträgt, was das Auge als Helligkeit liest. Die beiden Luminanzen gehen in (lighter + 0.05) / (darker + 0.05) ein, und die 0.05 ist eine Zulage für Streulicht – sie steht für das Licht, das Ihr Bildschirm aus dem Raum zurückwirft.

Warum eine halbtransparente Farbe zuerst mit dem Hintergrund verrechnet wird

Eine Farbe mit 50% Alpha hat kein eigenes Kontrastverhältnis. Was Leser sehen, ist die Mischung aus ihr und dem, was hinter ihr liegt – gemessen wird also die Mischung. Prüftools, die diesen Schritt auslassen, melden das Verhältnis der unvermischten Farbe, und das sieht immer besser aus als die Wahrheit – es ist der mit Abstand häufigste Grund, warum ein Tool vom eigenen Inspector des Browsers abweicht.

Wo WCAG 2.x nachweislich falsch liegt

Die 2.x-Formel wurde nie aus Lesbarkeitsforschung abgeleitet; sie ist ein schlichtes Luminanzverhältnis, und sie versagt in beide Richtungen. Manche hellgraue Schrift auf Weiß, die niemand lesen kann, besteht sie, und manche dunkle Paare fallen durch, die problemlos lesbar sind. Außerdem behandelt sie Schwarz-auf-Weiß und Weiß-auf-Schwarz bei 21:1 als identisch, obwohl heller Text auf dunklem Grund bei gleichem Verhältnis messbar schwerer zu lesen ist.

APCA ist das Modell hinter dem WCAG-3-Entwurf. Es ist polaritätsabhängig – das Vorzeichen der Zahl verrät, wie das Paar herumliegt – und liefert einen Helligkeitskontrastwert, Lc, statt eines Verhältnisses. Hier wird es neben dem 2.x-Verhältnis angezeigt, niemals an dessen Stelle: Konformität wird weiterhin an 2.x gemessen, und ein Tool, das die Kennzahl stillschweigend austauschte, würde Leuten bestätigen, eine Prüfung bestanden zu haben, die sie nicht bestanden haben.

Wie der Vorschlag ermittelt wird

Fällt ein Paar durch, wird die nächstgelegene bestehende Farbe gesucht, indem die Helligkeit in OKLCh entlanggegangen wird, während Farbton und Chroma festgehalten werden. Geht man stattdessen die sRGB-Kanäle durch, driftet der Farbton, während die Farbe dunkler wird – der Vorschlag käme also in einer anderen Farbe zurück als der aus Ihrer Palette. Die Suche bewegt sich zuerst vom Hintergrund weg – auf einer hellen Seite dunkler, auf einer dunklen heller –, damit eine dunkle Markenfarbe dunkel bleibt und nicht fast weiß wird.

Die beiden Farben

foreground  #6d6d74
background  #ffffff

Was gemeldet wird

ratio        5.13 : 1
normal AA    pass   (needs 4.5)
normal AAA   fail   (needs 7)
large AA     pass   (needs 3)
APCA         Lc 75.4

Welche Optionen und Sonderfälle unterstützt Kontrast prüfen?

Technische Referenz und Optionen
ParameterTypStandardVerhalten & Sonderfälle
4.5:1AA1.4.3Normaler Text: unter 18pt (24 CSS-px) in normaler Schrift oder unter 14pt (ca. 18,67 CSS-px) bei fetter Schrift. Stufe AA verlangt mindestens 4,5:1.
3:1AA1.4.3Großer Text: mindestens 18pt (24 CSS-px) in normaler Schrift oder 14pt (ca. 18,67 CSS-px) bei fetter Schrift. Maßgeblich sind die berechnete Schriftgröße und Schriftstärke, nicht die Deklaration eines Elternelements.
7:1AAA1.4.6Erweiterter Kontrast für normalen Text. Selten außerhalb der öffentlichen Beschaffung erforderlich und schwer mit einer Markenpalette zu erreichen.
3:1AA1.4.11Nicht-textuelle Elemente: Symbole, Fokusanzeiger, Eingabegrenzen, Diagrammreihen, der Rand eines Buttons. In WCAG 2.1 hinzugefügt und immer noch die am häufigsten übersehene Regel.
Lc 60APCAEntwurfUngefähr dort, wo 16px fett oder 24px normal komfortabel lesbar wird. APCA hat kein Bestehen/Scheitern – die Zahl wird einer Größe und Dicke zugeordnet.
Lc 90APCAEntwurfAusreichend für jede Größe und Dicke, einschließlich schmaler Schriftarten und langer Fließtexte.
Alpha0–11Ein durchsichtiger Vordergrund wird vor der Messung auf den Hintergrund komponiert, weil das das ist, was der Leser sieht.
Deaktivierter Text—ausgenommenWCAG stellt inaktive Steuerelemente von 1.4.3 vollständig frei. Es ist rechtlich zulässig, sie unlesbar zu lassen, aber trotzdem lohnt es sich, sie zu korrigieren.

Häufig gestellte Fragen

Welches Kontrastverhältnis brauche ich, um WCAG zu bestehen?

Stufe AA verlangt 4,5:1 für normalen Text und 3:1 für großen Text. Groß bedeutet mindestens 18pt (24 CSS-px) in normaler Schrift oder 14pt (ca. 18,67 CSS-px) bei fetter Schrift. Stufe AAA erhöht diese Werte auf 7:1 und 4,5:1. WCAG 1.4.11 verlangt unabhängig davon 3:1 für die visuellen Informationen, die zur Erkennung von Bedienelementen und ihren Zuständen nötig sind, sowie für bedeutungstragende Teile von Grafiken, vorbehaltlich der dort genannten Ausnahmen.

Warum zeigt dieses Tool ein anderes Verhältnis als ein anderer Checker?

Fast immer Alpha. Ein Vordergrund unter 100% Deckkraft hat kein eigenes Verhältnis: Was Leser sehen, ist diese Farbe, gemischt mit dem Hintergrund – gemessen wird also die Mischung. Dieses Tool rechnet zuerst zusammen; mehrere verbreitete Checker tun das nicht und melden ein besseres Verhältnis, als die Seite tatsächlich hat. Sind beide Farben opak und die Werte weichen trotzdem ab, wendet eines der beiden ein schlichtes Gamma von 2.2 an statt der stückweisen sRGB-Übertragungsfunktion.

Reicht 4.5:1 für eine 14px-Schrift?

Es ist das, was AA verlangt, und es ist knapp. 4.5:1 wurde als Minimum festgelegt, nicht als Ziel, und bei 14px in magerer Schrift auf dem Handy im Tageslicht ist es wirklich schwer. Wenn der Text wichtig ist, zielen Sie auf mehr als 7:1 oder vergrößern Sie die Schrift. APCA ist hier nützlicher als das 2.x-Verhältnis, weil es die Zahl an Größe und Schriftschnitt koppelt, statt allen Text gleichzubehandeln.

Soll ich APCA oder WCAG 2.x verwenden?

Beides, für unterschiedliche Zwecke. WCAG 2.x ist heute das Maß für Konformität, also ist es das, was Sie melden. APCA sagt besser voraus, ob etwas wirklich lesbar ist, und es ist die Richtung, in die der Standard geht. Wo beide auseinanderliegen – meist bei hellem Grau auf Weiß oder bei Mitteltönen auf Dunkel –, ist APCA die Zahl, der Sie vertrauen sollten.

Gilt Kontrast auch für deaktivierte Schaltflächen und Platzhaltertext?

Deaktivierte Steuerelemente sind von WCAG 1.4.3 vollständig ausgenommen. Platzhaltertext nicht: Er ist Text, trägt Informationen und braucht 4.5:1 wie jeder andere Fließtext. Der verbreitete graue Platzhaltertext mit rund 2.5:1 fällt durch – und zwar genau bei den Leuten, die den Hinweis am dringendsten bräuchten.

Funktioniert das auch bei einer Farbe mit Transparenz?

Ja. Geben Sie einen 8-stelligen Hexwert oder einen rgba-Wert ein, und der Vordergrund wird auf den Hintergrund gerechnet, bevor das Verhältnis berechnet wird – genau das, was der Browser zeichnet. Die verrechnete Farbe wird angezeigt, damit Sie sehen, worauf sich das Verhältnis tatsächlich bezieht.

ToolsByUs-Team · Wie wir unsere Tools prüfen