Kontrastverhältnis-Rechner
Prüfen Sie das WCAG-Kontrastverhältnis zwischen Text- und Hintergrundfarbe, sehen Sie, welche Barrierefreiheitsstufen erfüllt sind, und erhalten Sie passende Farbvorschläge.
Aktualisiert
Ergebnis des Kontrastverhältnisses
Kontrastverhältnis
-
Geben Sie zwei Farben ein.
Beispiel für großen Text
Beispiel für normalen Fließtext, von dem die meisten Kontrastprobleme betroffen sind.
- AA, normaler Text (4.5:1)
- -
- AA, großer Text (3:1)
- -
- AAA, normaler Text (7:1)
- -
- AAA, großer Text (4.5:1)
- -
Vorgeschlagene Textfarben, die AA erfüllen
Die folgenden Farben erreichen auf Ihrem Hintergrund mindestens 4.5:1. Wählen Sie eine aus, um sie als Textfarbe auszuprobieren.
Funktionsweise
Das Kontrastverhältnis ist der Unterschied der Leuchtdichte zwischen Vorder- und Hintergrundfarbe. Es wird gemäß den WCAG-Richtlinien berechnet, indem (L1 + 0.05) durch (L2 + 0.05) geteilt wird. Dabei ist L1 die relative Leuchtdichte der helleren und L2 die der dunkleren Farbe. WCAG AA verlangt 4.5:1 für normalen Text und 3:1 für großen Text.
- Zwei Farben eingeben oder auswählen
Geben Sie einen Hex-Wert ein oder verwenden Sie die Farbauswahl.
- Verhältnis und Stufen ablesen
Für jede WCAG-Stufe wird angezeigt, ob das Verhältnis erfüllt ist.
- Farbe ausprobieren
Wählen Sie unten ein Farbfeld aus, um mit Ihrem aktuellen Hintergrund sofort AA zu erfüllen.
Die WCAG-Formel für das Kontrastverhältnis
Verhältnis = (L1 + 0.05) ÷ (L2 + 0.05)
Die relative Leuchtdichte L wird aus linearisiertem sRGB berechnet: Jeder Kanal wird mithilfe der sRGB-Transferfunktion von einem gammakorrigierten Wert zwischen 0 und 255 in lineares Licht umgerechnet. Anschließend werden die Werte mit 0.2126R + 0.7152G + 0.0722B gewichtet, entsprechend der Hellempfindlichkeit des menschlichen Auges. Das maximal mögliche Verhältnis beträgt 21:1: reines Schwarz auf reinem Weiß.
Für wen gilt die 4.5:1-Regel?
Das WCAG-Verhältnis von 4.5:1 gilt speziell für Text und Textbilder. Dekorative Bilder, Schriftzüge und rein visuelle Symbole ohne Textalternative sind davon ausgenommen. Nichttextuelle UI-Komponenten wie Schaltflächen, Formularfeldrahmen und Fokusindikatoren müssen gemäß WCAG 1.4.11 nur 3:1 erreichen. Der niedrigere Grenzwert gilt, weil feine Schriftstriche für gute Lesbarkeit mehr Kontrast benötigen als einfache Formen.
Dunkle Designs können trotz guter Lesbarkeit durchfallen
Der WCAG-Algorithmus verwendet die sRGB-linearisierte Leuchtdichte, die nicht linear zur wahrgenommenen Helligkeit verläuft. In dunklen Designs wird häufig mittelgrauer Text auf fast schwarzem Hintergrund verwendet. Dabei liegt das Verhältnis oft unter 4.5:1, obwohl der Text lesbar wirkt. Zum Beispiel erreicht #999999 auf #1A1A24 etwa 3.6:1 und erfüllt AA nicht. Mit einem helleren Textton ab etwa #ABABAB wird der Grenzwert erreicht.
Häufig gestellte Fragen
Welches Kontrastverhältnis verlangt WCAG AA für Fließtext?
WCAG 2.1, Stufe AA, verlangt mindestens 4.5:1 für normalen Text unter 18px oder fetten Text unter 14px und 3:1 für großen Text (ab 18px bei normaler Schriftstärke oder ab 14px bei fetter Schrift). Stufe AAA verlangt 7:1 für normalen Text und 4.5:1 für großen Text. Das maximal mögliche Verhältnis beträgt 21:1: reines Schwarz (#000000) auf reinem Weiß (#FFFFFF).
Wie wird das WCAG-Kontrastverhältnis berechnet?
Die Formel lautet (L1 + 0.05) geteilt durch (L2 + 0.05). Dabei ist L1 die relative Leuchtdichte der helleren und L2 die der dunkleren Farbe. Die relative Leuchtdichte ergibt sich aus linearisierten sRGB-Werten: Jeder Kanal wird mithilfe der sRGB-Transferfunktion von einem gammakorrigierten Wert zwischen 0 und 255 in lineares Licht umgerechnet. Anschließend werden die Werte entsprechend der Hellempfindlichkeit des menschlichen Auges mit 0.2126R + 0.7152G + 0.0722B gewichtet.
Ist für alle UI-Elemente ein Kontrastverhältnis von 4.5:1 erforderlich?
Nein. Das WCAG-Verhältnis von 4.5:1 gilt speziell für Text und Textbilder. Dekorative Bilder, Schriftzüge und rein visuelle Symbole ohne Textalternative sind davon ausgenommen. Nichttextuelle UI-Komponenten (Schaltflächen, Formulareingaben, Fokusindikatoren) benötigen gemäß WCAG 1.4.11 nur einen Kontrast von 3:1. Der strengere Grenzwert von 4.5:1 gilt, weil die Lesbarkeit von Text von feinen Schriftstrichen abhängt.
Warum erfüllt mein dunkles Design WCAG nicht, obwohl es gut lesbar wirkt?
Der WCAG-Algorithmus verwendet die sRGB-linearisierte Leuchtdichte, die nicht linear zur wahrgenommenen Helligkeit verläuft. In dunklen Designs steht häufig mittelgrauer Text auf fast schwarzem Hintergrund. Der wahrgenommene Kontrast wirkt dann ausreichend, doch das Leuchtdichteverhältnis liegt unter 4.5:1. Zum Beispiel erreicht #999999 auf #1A1A24 etwa 3.6:1 und erfüllt AA nicht. Wird der Text auf demselben Hintergrund auf etwa #ABABAB oder heller angepasst, wird der Grenzwert erreicht.
Gelten die Kontrastanforderungen auch für Platzhaltertext in Formularfeldern?
Ja. Gemäß WCAG 1.4.3 muss Platzhaltertext, der sinnvolle Inhalte vermittelt, ein Verhältnis von 4.5:1 erreichen. Viele Designs verwenden Platzhaltertext mit geringer Deckkraft, etwa in 40 % Grau, der diesen Grenzwert verfehlt. Erfolgskriterium 1.4.3 nimmt Platzhaltertext nicht grundsätzlich aus. Die Ausnahme gilt nur für inaktive UI-Komponenten oder reine Dekoration, nicht für erklärende Hinweistexte.