Kontrastprüfer

WCAG-Farbkontrastprüfer zur Berechnung des Textkontrastverhältnisses.

Kontrast-Verhältnis 21:1

Normaler Text

WCAG AA: Pass

WCAG AAA: Pass

Beispiel für normalen Text - 16px

Großer Text

WCAG AA: Pass

WCAG AAA: Pass

Beispiel großer Text 18pt/24px

Graphische Objekte und Benutzeroberflächenkomponenten

WCAG AA: Pass

Berechnet das Kontrastverhältnis für die normale Textgröße.
Berechnet das Kontrastverhältnis für große Textgrößen.
Berechnet das Kontrastverhältnis für Benutzeroberflächenkomponenten.
Wählen Sie eine Farbe aus dem Farbwähler
Stellen Sie die Farbhelligkeit ein

Wie benutzt man Contrast Checker

Wählen Sie die Hintergrundfarbe
Vordergrundfarbe wählen
Passen Sie die Helligkeit bei Bedarf an
Überprüfen Sie das Audit auf normalen und großen Text

FAQ

Wie funktioniert der Kontrastprüfer?

Sie müssen die Farbe des Textes und des Hintergrunds bewerten. Gemäß den WCAG 2.1-Richtlinien sind dies: Großer Text — Text mit einer Mindestgröße von 18 Pixeln erfordert ein Kontrastverhältnis von 3:1; Kleiner Text — Text mit einer Größe von weniger als 18 Pixeln erfordert ein Kontrastverhältnis von 4, 5:1.

Warum sollte meine Website einen ausreichenden Farbkontrast haben?

Text auf einem Hintergrund mit einem niedrigen Kontrastverhältnis ist oft schwer zu lesen. Dies wirkt sich nicht nur negativ auf Menschen mit Sehbehinderungen aus, es ist auch ein Nachteil für alle Benutzer. Ein Beispiel ist das Lesen von Text auf einem Handy draußen an einem sonnigen Tag.

Was bedeutet Barrierefreiheit von Websites?

Eine barrierefreie Website ist eine Website, die so gestaltet ist, dass Menschen mit Seh- oder Hörbehinderungen sie ohne Einschränkungen nutzen können. Dies stellt beispielsweise sicher, dass alle Seitenelemente einen ausreichenden Farbkontrast haben, d. h. die Textfarbe unterscheidet sich stark von der Hintergrundfarbe.

Müssen Bilder und Videos den WCAG-Farbkontrastanforderungen entsprechen?

Bestimmte Grafik- und Schnittstellenkomponenten erfordern ein Kontrastverhältnis von mindestens 3:1. Dies gilt jedoch nicht für Logos, dekorative Bilder oder allgemeine Mediendateien.

Produkte

Webseiten

Über

Language

User Name

Kontrastprüfer

WCAG-Farbkontrastprüfer zur Berechnung des Textkontrastverhältnisses.

Normaler Text

Großer Text

Graphische Objekte und Benutzeroberflächenkomponenten

Wie benutzt man Contrast Checker

FAQ

Wie funktioniert der Kontrastprüfer?

Warum sollte meine Website einen ausreichenden Farbkontrast haben?

Was bedeutet Barrierefreiheit von Websites?

Müssen Bilder und Videos den WCAG-Farbkontrastanforderungen entsprechen?