Color Contrast Checker

WCAG-AA- und AAA-Kontrastverhältnis zwischen Vorder- und Hintergrundfarbe prüfen

Beispiel ausprobieren

Vordergrundfarbe (Text)

Hintergrundfarbe

Großtextbeispiel (18px fett)

Normaltextbeispiel — so sieht der Fließtext gegen die gewählte Hintergrundfarbe aus.

Kontrastverhältnis

14.63:1

WCAG-Konformität

Bestanden

Normal AA

Bestanden

Normal AAA

Bestanden

Groß AA

Bestanden

Groß AAA

WCAG AANormaltext: 4.5:1, Großtext (18px+ oder 14px fett): 3:1

WCAG AAANormaltext: 7:1, Großtext (18px+ oder 14px fett): 4.5:1

Was ist Farbkontrastprüfung?

Farbkontrastprüfung misst den Luminanzunterschied zwischen einer Vordergrundfarbe (typischerweise Text) und einer Hintergrundfarbe und drückt das Ergebnis als Verhältnis aus. Ein Verhältnis von 1:1 bedeutet, dass die Farben identisch sind; 21:1 ist das Maximum und steht für Schwarz auf Weiß oder umgekehrt. Die Web Content Accessibility Guidelines (WCAG) des W3C legen Mindestkontrastverhältnisse fest, die Text erfüllen muss, damit Menschen mit eingeschränktem Sehvermögen oder Farbfehlsichtigkeit ihn lesen können.

Die Kontrastverhältnisformel stammt aus WCAG 2.x und basiert auf relativer Luminanz — einem Maß dafür, wie hell eine Farbe dem menschlichen Auge erscheint. Relative Luminanz wird berechnet, indem jeder sRGB-Kanal linearisiert (Gamma entfernt) und nach den ITU-R BT.709-Koeffizienten gewichtet wird: 0,2126 für Rot, 0,7152 für Grün und 0,0722 für Blau. Grün trägt am meisten bei, weil das menschliche Auge am empfindlichsten auf grünes Licht reagiert. Das Verhältnis ergibt sich dann aus (L1 + 0,05) / (L2 + 0,05), wobei L1 die Luminanz der helleren Farbe ist.

WCAG definiert zwei Konformitätsstufen. Stufe AA erfordert ein Kontrastverhältnis von mindestens 4,5:1 für normalen Text und 3:1 für Großtext (18px oder mehr, oder 14px fett). Stufe AAA erhöht die Anforderungen auf 7:1 bzw. 4,5:1. WCAG 2.1 führte außerdem Erfolgskriterium 1.4.11 ein, das ein 3:1-Verhältnis für Nicht-Text-UI-Komponenten wie Rahmen, Icons und Fokusindikatoren vorschreibt.

Warum diesen Contrast Checker verwenden?

Kontrast mit dem Auge zu beurteilen ist unzuverlässig. Farben, die auf einem kalibrierten Monitor deutlich unterschiedlich wirken, können auf einem minderwertigen Laptop-Display, im direkten Sonnenlicht oder für Menschen mit Deuteranopie verschwimmen. Ein numerisches Verhältnis beseitigt das Rätselraten und liefert ein eindeutiges Bestanden/Nicht-bestanden-Urteil gegenüber dem WCAG-Standard.

Sofortige Verhältnisberechnung
Zwei Farben auswählen oder eingeben — das Kontrastverhältnis aktualisiert sich in Echtzeit. Kein Formular, kein Seitenneustart.
🔒
Verarbeitung im Browser
Die Luminanzberechnung läuft vollständig im Browser. Keine Farbwerte verlassen den Rechner, und keine Cookies oder Analytics verfolgen die Auswahl.
🎯
AA- und AAA-Urteile
Die Ergebnisse zeigen den Bestanden/Nicht-bestanden-Status für WCAG AA und AAA — jeweils für Normal- und Großtext — damit klar ersichtlich ist, welche Schwellenwerte erfüllt werden.
📋
Kein Konto erforderlich
Seite öffnen und loslegen. Keine Registrierung, keine Ratenbegrenzung. Das Tool funktioniert offline, sobald die Seite geladen ist.

Anwendungsfälle für den Contrast Checker

Frontend-Entwicklung
Vor dem Ausliefern einer UI-Änderung die Textfarbe und den Hintergrund aus dem CSS in den Checker einfügen und prüfen, ob das Paar WCAG AA erfüllt. So werden Kontrastfehler abgefangen, bevor sie Code-Review oder automatisierte Audits erreichen.
Design-Übergabe
Designer können jedes Farbpaar in einer Figma-Datei prüfen, bevor die Spezifikationen an Entwickler übergeben werden. Kontrastprobleme in der Designphase zu beheben ist deutlich günstiger als nach der Implementierung.
Accessibility-Audit
QA-Engineers, die ein WCAG-Audit durchführen, können spezifische Farbkombinationen, die automatisierte Tools wie Lighthouse oder axe gemeldet haben, gezielt prüfen. Der Checker bestätigt das genaue Verhältnis und welche Stufen bestanden oder nicht bestanden wurden.
Design-System-Token
Beim Definieren von Farb-Token für ein Design-System jedes Vordergrund/Hintergrund-Paar testen, um sicherzustellen, dass die Token-Palette mindestens AA erfüllt. Die Verhältnisse neben den Token dokumentieren, damit nachgelagerte Teams den Entscheidungen vertrauen.
E-Mail-Template-Tests
E-Mail-Clients entfernen CSS-Funktionen wie Opacity und Blend-Modes, sodass die tatsächlich gerenderten Farben von der Quelle abweichen können. Die finalen Vorder- und Hintergrundwerte, die im Posteingang ankommen, testen, um die Lesbarkeit zu gewährleisten.
Accessibility-Standards verstehen
Wer WCAG lernt, kann mit verschiedenen Farbpaaren experimentieren und sofort sehen, wie sich das Verhältnis ändert. Das schrittweise Anpassen einzelner Kanäle vermittelt ein praktisches Verständnis dafür, wie Luminanz mit wahrgenommenem Kontrast zusammenhängt.

WCAG-Kontrastverhältnisanforderungen

Die folgende Tabelle fasst die von WCAG 2.1 geforderten Mindestkontrastverhältnisse für verschiedene Inhaltstypen und Konformitätsstufen zusammen. Großtext ist definiert als 18px (24 CSS-Pixel) oder mehr bei normalem Gewicht, oder 14px (18,66 CSS-Pixel) oder mehr bei fettem Gewicht.

StufeMindestverhältnisGilt fürHinweis
AA Normal text4.5 : 1Body text, paragraphs, labelsMinimum for most UI text
AA Large text3.0 : 1Text >= 18px, or >= 14px boldMinimum for headings
AA UI components3.0 : 1Borders, icons, focus indicatorsNon-text contrast (WCAG 1.4.11)
AAA Normal text7.0 : 1Body text at highest standardEnhanced readability
AAA Large text4.5 : 1Large text at highest standardEnhanced for headings

Luminanz, AA und AAA erklärt

Die Kontrastverhältnisberechnung hat drei Stufen: Luminanz für jede Farbe berechnen, das Verhältnis ableiten und mit den WCAG-Schwellenwerten vergleichen.

Relative Luminanz
Eine einzelne Zahl von 0 (Schwarz) bis 1 (Weiß), die angibt, wie hell eine Farbe erscheint. Sie berücksichtigt die nichtlineare sRGB-Gammakurve und die ungleiche Empfindlichkeit des menschlichen Auges für Rot, Grün und Blau. Reines Grün (#00FF00) hat eine Luminanz von 0,7152, während reines Blau (#0000FF) nur 0,0722 erreicht.
WCAG AA
Die Basis-Accessibility-Stufe, die von den meisten gesetzlichen Standards gefordert wird — darunter der European Accessibility Act (EAA) der EU und Section 508 in den USA. AA verlangt ein 4,5:1-Verhältnis für Normaltext und 3:1 für Großtext. Die meisten Design-Systeme setzen AA als Minimum für alle Textelemente an.
WCAG AAA
Die erweiterte Stufe für Inhalte, die für ein möglichst breites Publikum lesbar sein müssen — einschließlich Nutzern mit erheblicher Sehbeeinträchtigung. AAA verlangt 7:1 für Normaltext und 4,5:1 für Großtext. Nur wenige vollständige Websites erreichen AAA auf allen Seiten, aber kritische Inhalte wie Rechtstexte und medizinische Informationen werden häufig darauf ausgerichtet.

Code-Beispiele

WCAG-Kontrastverhältnisse programmatisch berechnen. Jedes Beispiel implementiert die relative Luminanzformel aus WCAG 2.x und die Kontrastverhältnisberechnung. Die gleichen Schwarz-auf-Weiß- und Indigo-auf-Weiß-Paare werden zum Vergleich getestet.

JavaScript
// Calculate relative luminance per WCAG 2.x (sRGB)
function luminance(r, g, b) {
  const [rs, gs, bs] = [r, g, b].map(c => {
    c /= 255
    return c <= 0.04045 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4)
  })
  return 0.2126 * rs + 0.7152 * gs + 0.0722 * bs
}

// Contrast ratio between two RGB colors
function contrastRatio(fg, bg) {
  const l1 = luminance(...fg)
  const l2 = luminance(...bg)
  const lighter = Math.max(l1, l2)
  const darker  = Math.min(l1, l2)
  return (lighter + 0.05) / (darker + 0.05)
}

contrastRatio([0, 0, 0], [255, 255, 255])  // -> 21.0
contrastRatio([99, 102, 241], [255, 255, 255]) // -> 3.95
contrastRatio([29, 78, 216], [255, 255, 255])  // -> 6.06 (AA pass)
Python
def luminance(r: int, g: int, b: int) -> float:
    """Relative luminance per WCAG 2.x, ITU-R BT.709 coefficients."""
    channels = []
    for c in (r, g, b):
        c /= 255
        channels.append(c / 12.92 if c <= 0.04045 else ((c + 0.055) / 1.055) ** 2.4)
    return 0.2126 * channels[0] + 0.7152 * channels[1] + 0.0722 * channels[2]

def contrast_ratio(fg: tuple, bg: tuple) -> float:
    l1 = luminance(*fg)
    l2 = luminance(*bg)
    lighter, darker = max(l1, l2), min(l1, l2)
    return (lighter + 0.05) / (darker + 0.05)

print(f"{contrast_ratio((0, 0, 0), (255, 255, 255)):.2f}")  # -> 21.00
print(f"{contrast_ratio((99, 102, 241), (255, 255, 255)):.2f}")  # -> 3.95

# Check WCAG AA for normal text
ratio = contrast_ratio((29, 78, 216), (255, 255, 255))
print(f"{ratio:.2f} — {'AA pass' if ratio >= 4.5 else 'AA fail'}")  # -> 6.06 — AA pass
Go
package main

import (
	"fmt"
	"math"
)

func linearize(c float64) float64 {
	c /= 255
	if c <= 0.04045 {
		return c / 12.92
	}
	return math.Pow((c+0.055)/1.055, 2.4)
}

func luminance(r, g, b int) float64 {
	return 0.2126*linearize(float64(r)) +
		0.7152*linearize(float64(g)) +
		0.0722*linearize(float64(b))
}

func contrastRatio(fgR, fgG, fgB, bgR, bgG, bgB int) float64 {
	l1 := luminance(fgR, fgG, fgB)
	l2 := luminance(bgR, bgG, bgB)
	lighter := math.Max(l1, l2)
	darker := math.Min(l1, l2)
	return (lighter + 0.05) / (darker + 0.05)
}

func main() {
	ratio := contrastRatio(0, 0, 0, 255, 255, 255)
	fmt.Printf("%.2f\n", ratio) // -> 21.00

	ratio = contrastRatio(29, 78, 216, 255, 255, 255)
	fmt.Printf("%.2f\n", ratio) // -> 6.06 (AA pass for normal text)
}
CSS
/* WCAG-safe color pairs — tested contrast ratios */

/* 12.63:1 — passes AAA normal text */
.high-contrast {
  color: #1e293b;          /* slate-800 */
  background: #f8fafc;     /* slate-50  */
}

/* 7.07:1 — passes AAA normal text */
.dark-theme-text {
  color: #e2e8f0;          /* slate-200 */
  background: #0f172a;     /* slate-900 */
}

/* 4.57:1 — passes AA normal, fails AAA */
.accent-on-white {
  color: #1d4ed8;          /* blue-700  */
  background: #ffffff;
}

/* 2.14:1 — fails AA for text, but passes 3:1 for large text */
.muted-heading {
  color: #94a3b8;          /* slate-400 */
  background: #ffffff;
}

Häufig gestellte Fragen

Was ist ein gutes Kontrastverhältnis für Text?
Für Fließtext im Web mindestens 4,5:1 (WCAG AA) anstreben. Verhältnisse über 7:1 erfüllen WCAG AAA und sind für längeres Lesen komfortabler. Schwarz auf Weiß ergibt das maximale Verhältnis von 21:1, aber ein sehr dunkles Grau (#1e293b) auf Weiß liefert noch immer etwa 12,6:1 — deutlich über AAA.
Was gilt in WCAG als Großtext?
WCAG definiert Großtext als 18px (24 CSS-Pixel) bei normalem Gewicht oder 14px (18,66 CSS-Pixel) bei fettem Gewicht. Großtext erhält einen niedrigeren Kontrastschwellenwert, weil größere Buchstabenformen leichter wahrnehmbar sind. In CSS entspricht 1px 0,75pt, also entsprechen 18pt 24px.
Ist WCAG AA gesetzlich vorgeschrieben?
In vielen Rechtsordnungen ja. Der European Accessibility Act (EAA), der ab Juni 2025 gilt, verweist auf WCAG 2.1 AA. Section 508 des US Rehabilitation Act verpflichtet Bundesbehörden zur Einhaltung von WCAG 2.0 AA. Der Americans with Disabilities Act (ADA) wurde von US-Gerichten dahingehend ausgelegt, barrierefreie Websites zu fordern — mit WCAG AA als Standard. Kanada, Australien und das Vereinigte Königreich haben ähnliche Vorschriften.
Wie wird relative Luminanz berechnet?
Jeder sRGB-Kanalwert (0–255) wird durch 255 dividiert und dann linearisiert: Werte bis einschließlich 0,04045 werden durch 12,92 geteilt, Werte darüber werden mit ((c + 0,055) / 1,055) ^ 2,4 transformiert. Die drei linearisierten Kanäle werden mit den ITU-R BT.709-Koeffizienten (0,2126 R, 0,7152 G, 0,0722 B) gewichtet und summiert. Das Ergebnis ist eine Zahl zwischen 0 und 1.
Warum verwendet WCAG einen 0,05-Offset in der Kontrastformel?
Der 0,05-Offset verhindert eine Division durch null, wenn eine der Farben reines Schwarz ist (Luminanz = 0). Er berücksichtigt auch Umgebungslicht und Bildschirmreflexionen, die die wahrgenommene Luminanz selbst der dunkelsten Pixel leicht anheben. Ohne diesen Offset würde Schwarz auf einer beliebigen dunklen Farbe ein unendliches oder irreführend hohes Verhältnis ergeben.
Können zwei Farben AA bestehen und trotzdem schwer lesbar sein?
Ja. WCAG-Kontrastverhältnisse messen Luminanzunterschiede, nicht Farbtonunterschiede. Ein gesättigtes Rot auf gesättigtem Grün kann den Verhältnisschwellenwert technisch erfüllen und gleichzeitig für manche Betrachter — insbesondere für Menschen mit Rot-Grün-Farbsehschwäche — unangenehm zu lesen sein. Farbpaare, die sich sowohl in Luminanz als auch im Farbton unterscheiden, ergeben in der Regel angenehmere Ergebnisse.
Was ist der Unterschied zwischen WCAG-2.x-Kontrast und APCA?
WCAG 2.x verwendet ein einfaches Luminanzverhältnis, das Vordergrund und Hintergrund symmetrisch behandelt. APCA (Advanced Perceptual Contrast Algorithm), vorgeschlagen für WCAG 3.0, verwendet ein Modell der wahrgenommenen Helligkeit, das die Polarität berücksichtigt: Dunkler Text auf hellem Hintergrund hat bei gleichem Luminanzunterschied einen anderen wahrgenommenen Kontrast als heller Text auf dunklem Hintergrund. APCA ist noch ein Arbeitsentwurf und hat die WCAG-2.x-Methode in keiner Rechtsvorschrift ersetzt.