Kontrastprüfer: WCAG-Kontrastverhältnis-Rechner

Berechnen Sie das WCAG-Kontrastverhältnis zwischen zwei Farben mit dem Kontrastprüfer. Erhalten Sie Echtzeitergebnisse und bewerten Sie Ihren Farbkontrast.

Colors

Foreground (Text)

Background

Preview & Results

Sample Text

The quick brown fox jumps over the lazy dog.

21.00

Contrast Ratio

AAA

WCAG Grade

AA (normal text, 4.5:1)

AA Large (3:1)

AAA (7:1)

Kontrastprüfer: WCAG-Kontrastverhältnis-Rechner

Schnelle Zusammenfassung: Der Kontrastprüfer ist ein Webtool, das das WCAG-Kontrastverhältnis zwischen zwei Farben berechnet, Echtzeitergebnisse liefert und Ihren Farbkontrast bewertet.

Was dieses Tool leistet & Hauptfunktionen

Der Kontrastprüfer ist ein Webtool, das Ihnen hilft, das WCAG-Kontrastverhältnis zwischen zwei Farben zu berechnen. Es liefert Echtzeitergebnisse und bewertet Ihren Farbkontrast gemäß den WCAG-Standards (AA, AA Large, AAA).

Schritt-für-Schritt-Anleitung zur Verwendung

Öffnen Sie das Kontrastprüfer-Tool.
Wählen Sie die Vordergrundfarbe (Textfarbe) aus, indem Sie den Farbwähler anklicken oder den Hex-Code in das Textfeld eingeben.
Wählen Sie die Hintergrundfarbe aus, indem Sie den Farbwähler anklicken oder den Hex-Code in das Textfeld eingeben.
Sehen Sie sich das Kontrastverhältnis und die Bewertung in Echtzeit an.

UndeGrundformel / Technische Logik Das Kontrastverhältnis wird mit der folgenden Formel berechnet:

Kontrastverhältnis = (L1 + 0,05) / (L2 + 0,05)

Dabei sind L1 und L2 die relativen Luminanzwerte der Vordergrund- und Hintergrundfarben. Praktische Beispiele aus der Praxis

Beispiel 1: Vordergrund: #000000 (Schwarz), Hintergrund: #ffffff (Weiß) Kontrastverhältnis: 21,00, Grad: AAA
Beispiel 2: Vordergrund: #ffffff (Weiß), Hintergrund: #000000 (Schwarz) Kontrastverhältnis: 21,00, Grad: AAA
Beispiel 3: Vordergrund: #808080 (Grau), Hintergrund: #ffffff (Weiß) Kontrastverhältnis: 4,50, Grad: AA

Vergleichs- oder Entscheidungsmatrix / Checkliste

Kontrastverhältnis	WCAG-Grad
≥ 7,00	AAA
≥ 4,50	AA
≥ 3,00	AA Groß

Häufige Fehler & Wie man sie vermeidet

Fehler: Verwendung von Farben mit geringen Kontrastverhältnissen. Vermeidung: Überprüfen Sie immer das Kontrastverhältnis und die Bewertung, bevor Sie Farben in Ihren Designs verwenden.
Fehler: Ignorieren der WCAG-Richtlinien für Farbkontrast. Vermeidung: Verwenden Sie den Kontrastprüfer (Contrast Checker), um sicherzustellen, dass Ihre Designs den WCAG-Standards für Barrierefreiheit entsprechen.

Häufig gestellte Fragen

Wie berechnet der Kontrastprüfer das Kontrastverhältnis?

Der Kontrastprüfer berechnet das Kontrastverhältnis mithilfe der Formel (L1 + 0,05) / (L2 + 0,05), wobei L1 und L2 die relativen Leuchtwerte der Vordergrund- und Hintergrundfarben sind.

Was ist der Unterschied zwischen den Klassen AA, AA Large und AAA?

Die Klasse AA erfordert ein Kontrastverhältnis von ≥ 4,50, AA LaDie AA-Bewertung erfordert ein Kontrastverhältnis von ≥ 3,00, und die AAA-Bewertung erfordert ein Kontrastverhältnis von ≥ 7,00.

Wie kann ich den Contrast Checker nutzen, um die Barrierefreiheit meiner Website zu verbessern?

Nutzen Sie den Contrast Checker, um das Kontrastverhältnis zwischen Ihrem Text und den Hintergrundfarben zu berechnen und sicherzustellen, dass es die WCAG-Standards (AA, AA Large, AAA) erfüllt. Dies wird die Barrierefreiheit Ihrer Website für Nutzer mit Sehbehinderungen verbessern.