Geben Sie Textfarbe und Hintergrundfarbe ein. Der Kontrast Checker berechnet das Kontrastverhältnis nach WCAG 2.2 und zeigt sofort, ob es für normalen Text (4,5 : 1), großen Text (3 : 1) sowie Symbole und Bedienelemente (3 : 1) reicht. Besteht eine Farbe nicht, schlagen wir die nächstgelegene Farbe vor, die besteht – mit möglichst wenig Änderung am Farbton.
Ergebnis
Geben Sie eine gültige Farbe ein, um das Ergebnis zu sehen.
Kontrastverhältnis:
| Was | Ergebnis | Kriterium | Mindestens |
|---|---|---|---|
| Normaler Text (Ihr Text) | 1.4.3 AA | 4,5 : 1 | |
| Großer Text (Ihr Text) | 1.4.3 AA | 3 : 1 | |
| Normaler Text, erhöht (Ihr Text) | 1.4.6 AAA | 7 : 1 | |
| Großer Text, erhöht (Ihr Text) | 1.4.6 AAA | 4,5 : 1 | |
| Symbole, Rahmen, Fokusanzeigen (Ihr Text) | 1.4.11 AA | 3 : 1 |
| Was | Ergebnis | Kontrastverhältnis | Mindestens |
|---|---|---|---|
| Link auf dem Hintergrund | |||
| Fließtext auf dem Hintergrund | |||
| Link gegen den Fließtext (G183) |
Bei 3 : 1 zum Fließtext ist zusätzlich eine Hervorhebung bei Hover und Fokus nötig – oder einfach unterstreichen.
Nächste passende Farbe
Farbsehschwäche simulieren
Simulation (Näherung): der Durchschnitt jeder Form bei voller Ausprägung, nach Machado et al. (2009). So sieht niemand genau, und es ist kein Prüfkriterium.
Als CSS
Welche Werte gelten? Die Grenzwerte auf einen Blick
| Was | WCAG-Kriterium | Stufe | Mindestkontrast |
|---|---|---|---|
| Normaler Text | 1.4.3 Kontrast (Minimum) | AA | 4,5 : 1 |
| Großer Text (ab 24 px, fett ab ca. 18,7 px) | 1.4.3 | AA | 3 : 1 |
| Symbole, Rahmen von Eingabefeldern, Fokus- und Zustandsanzeigen, Diagramme | 1.4.11 Nicht-Text-Kontrast | AA | 3 : 1 |
| Normaler Text, erhöht | 1.4.6 Kontrast (erhöht) | AAA | 7 : 1 |
| Großer Text, erhöht | 1.4.6 | AAA | 4,5 : 1 |
Maßgeblich ist Stufe AA: Sie verlangt die Norm EN 301 549, auf die sich die BITV 2.0 stützt und an der sich auch die Prüfung nach dem BFSG orientiert. AAA ist ein gutes Ziel für Fließtext, aber keine Pflicht.
Großer Text heißt in WCAG mindestens 18 Punkt oder 14 Punkt fett. Im Browser entspricht das 24 CSS-Pixeln beziehungsweise etwa 18,7 CSS-Pixeln bei fetter Schrift (font-weight 700 oder mehr). Der Checker erkennt das automatisch, wenn Sie Größe und Stärke angeben.
Ausgenommen sind Text in Logos und Markennamen, rein dekorativer Text, Text, der nicht sichtbar ist, und inaktive Bedienelemente (z. B. ein deaktivierter Button).
So wird das Kontrastverhältnis berechnet
Grundlage ist die relative Leuchtdichte jeder Farbe. Für jeden Farbkanal (R, G, B) wird der 8-Bit-Wert durch 255 geteilt und linearisiert: Werte bis 0,04045 werden durch 12,92 geteilt, größere Werte werden mit ((Wert + 0,055) / 1,055)^2,4 umgerechnet. Die Leuchtdichte ist dann L = 0,2126 · R + 0,7152 · G + 0,0722 · B [1].
Das Kontrastverhältnis ist (L1 + 0,05) / (L2 + 0,05), wobei L1 die hellere Farbe ist. Es reicht von 1 : 1 (gleiche Farbe) bis 21 : 1 (Schwarz auf Weiß).
Wichtig: nicht runden. WCAG verlangt „mindestens 4,5 : 1“. Grau #777777 auf Weiß ergibt 4,478 : 1 – auf eine Nachkommastelle gerundet wären das 4,5, trotzdem besteht es nicht. Das eine Stufe dunklere #767676 erreicht 4,54 : 1 und besteht. Unser Checker zeigt zwei Nachkommastellen und entscheidet mit dem ungerundeten Wert.
Links: Kontrast zum Hintergrund und zum Text daneben
Ein Link im Fließtext muss zweierlei leisten. Er braucht genug Kontrast zum Hintergrund (4,5 : 1), und man muss ihn vom umgebenden Text unterscheiden können – ohne Farben sehen zu müssen (1.4.1 Benutzung von Farbe).
Am einfachsten ist eine Unterstreichung. Wenn Links nur durch die Farbe erkennbar sind, beschreibt das W3C einen Weg: mindestens 3 : 1 Kontrast zwischen Link- und Textfarbe plus eine zusätzliche Hervorhebung bei Mausberührung und Tastaturfokus (Technik G183) [4].
Ein Beispiel: Blau #0066cc auf Weiß erreicht 5,56 : 1 – gut. Neben dunkelgrauem Fließtext #333333 sind es aber nur 2,26 : 1. Ohne Unterstreichung ist dieser Link für viele Menschen nicht als Link erkennbar. Aktivieren Sie im Checker „Link prüfen“, um beide Werte gleichzeitig zu sehen.
Nicht-Text-Kontrast: Icons, Eingabefelder, Fokus
Seit WCAG 2.1 gilt 3 : 1 auch für alles, was man erkennen muss, um eine Seite zu bedienen oder zu verstehen:
- Rahmen von Eingabefeldern, wenn nur der Rahmen zeigt, wo man tippen kann. Ein hellgrauer Rahmen
#ccccccauf Weiß hat 1,60 : 1 – das Feld ist für viele Menschen unsichtbar. - Icons ohne Text, etwa Lupe, Warenkorb oder Schließen-Kreuz.
- Zustände: ausgewählte Checkbox, aktiver Tab, ein- und ausgeschalteter Schalter.
- Fokusanzeige: Die Markierung, die bei Tastaturbedienung zeigt, wo man ist (2.4.7 Fokus sichtbar).
- Diagramme: Linien, Balken und Flächen, die man zum Verständnis braucht.
Gemessen wird gegen die angrenzende Farbe – meist den Hintergrund, bei einem Button-Icon den Button selbst.
Nächste passende Farbe finden
Besteht eine Kombination nicht, verändert der Checker die Helligkeit Ihrer Farbe im wahrnehmungsgleichen Farbraum OKLCH [7] und behält Farbton und Sättigung möglichst bei. So bleibt Ihr Markenorange orange: #ff8800 auf Weiß hat 2,39 : 1. Für großen Text reicht #ea7400 (3,00 : 1), für normalen Text #c65300 (4,52 : 1). Sie können wählen, ob die Text- oder die Hintergrundfarbe angepasst wird.
Tipp für Designsysteme: Legen Sie für jede Markenfarbe eine „Textvariante“ an, die auf Weiß 4,5 : 1 erreicht, und eine für dunkle Flächen. Dann muss niemand im Einzelfall rechnen.
Farbsehschwäche simulieren
Die Vorschau zeigt Ihre Farben so, wie Menschen mit Protanopie, Deuteranopie, Tritanopie oder vollständiger Farbenblindheit sie ungefähr sehen – nach dem Modell von Machado und Kollegen [8]. Das ist eine Simulation, kein Prüfkriterium: Sie hilft zu erkennen, wo Informationen nur über Farbe vermittelt werden – zum Beispiel ein roter und ein grüner Status, die für viele gleich aussehen.
Wenn ein Checker nicht reicht
Ein Kontrast-Checker prüft zwei Farben. Auf echten Seiten liegt Text über Verläufen, Fotos, halbtransparenten Flächen – und Zustände wie Hover oder Fokus sieht man erst bei der Bedienung. Der kostenlose Barrierefreiheitstest misst den Kontrast jedes Textes auf der gerenderten Seite. In der Plattform läuft diese Prüfung regelmäßig über alle Seiten, die gecrawlt werden – und wo sie über einem Bild nicht sicher entscheiden kann, landet die Stelle als „mögliches Problem“ in einer eigenen Liste statt als bestanden.
Kontrast der ganzen Seite prüfen WCAG-2.2-Checkliste ansehen