Calcoid

Farbkontrast-Checker

Prüfe den Farbkontrast nach den WCAG-Kontrastregeln für Text, große Schrift und Bedienelemente. Transparente Vordergründe werden zusammengesetzt.

Farbkontrast-Checker

Ein transparenter Vordergrund wird über dem Hintergrund zusammengesetzt. Verwende Hex, rgb(r, g, b) oder rgba(r, g, b, a).

Der Hintergrund muss vollständig deckend sein. Verwende Hex oder rgb(r, g, b).

Beispiel für normalen Text.

Beispiel für große Schrift (ab 18 pt oder ab 14 pt fett).

Beispiel für kleinen Fließtext.

Kontrastverhältnis

5,47:1Beste bestandene Stufe: AA

Vordergrund-Luminanz 0,1418, Hintergrund-Luminanz 1,0000.

Die Prüfung nach WCAG 2.1 bewertet nur diese Farben. Sie ersetzt keine vollständige Barrierefreiheitsprüfung.

Normaler Text, AA
Text unter 18 pt
≥ 4,5:1
Normaler Text, AAA
Strengste Stufe für Fließtext
≥ 7:1
Große Schrift, AA
Ab 18 pt oder 14 pt fett
≥ 3:1
Große Schrift, AAA
Strengste Stufe für große Schrift
≥ 4,5:1
Benutzeroberfläche und Grafiken
Symbole, Rahmen und Fokusringe
≥ 3:1

WCAG-Kontrastschwellen

Diese Schwellenwerte entsprechen den Kontrastverhältnissen, die der Rechner für Text, große Schrift und Bedienelemente prüft.

InhaltAA-MindestwertAAA-Mindestwert
Normaler Text4,5:17:1
Große Schrift3:14,5:1
Bedienelemente3:1Nicht definiert

Häufige Fragen

Wie berechnet der Farbkontrast-Checker das Verhältnis?
Der Rechner wandelt beide Farben in relative Luminanz nach WCAG 2.1 um. Das Kontrastverhältnis ist die hellere Luminanz plus 0,05 geteilt durch die dunklere Luminanz plus 0,05.
Welche WCAG-Schwellenwerte zeigt der Rechner?
Für normalen Text prüft er AA ab 4,5:1 und AAA ab 7:1. Für große Schrift gelten 3:1 und 4,5:1. Bedienelemente und grafische Objekte werden ab 3:1 als bestanden markiert.
Wie behandelt der Rechner einen transparenten Vordergrund?
Ein transparenter Vordergrund wird über dem gewählten Hintergrund zusammengesetzt. Danach berechnet der Rechner die Luminanz der resultierenden Farbe. So entspricht die Prüfung der sichtbaren Farbkombination.
Warum wird ein transparenter Hintergrund abgelehnt?
Ein transparenter Hintergrund hat ohne zusätzliche Leinwandfarbe keine eindeutige sichtbare Luminanz. Gib eine vollständig deckende Hintergrundfarbe ein oder berechne die Komposition vorher über der tatsächlichen Leinwand.
Ist ein bestandenes Ergebnis eine vollständige Barrierefreiheitsprüfung?
Nein. Das Ergebnis prüft nur die angegebenen Farben und die genannten WCAG-2.1-Kontrastschwellen. Schriftgröße, Schriftgewicht, Zustände, Bilder, Fokusdarstellung und weitere Anforderungen musst du separat prüfen.

Änderungsverlauf

Aktualisierungen von Farbkontrast-Checker, nach Datum gruppiert.

1 Aktualisierung
  1. Farbkontrast-Checker hinzugefügt

    • Prüfe den Farbkontrast nach den WCAG-Kontrastregeln für Text, große Schrift und Bedienelemente. Transparente Vordergründe werden zusammengesetzt.

Ähnliche Rechner

Weitere geprüfte Rechner im Themenbereich „Technik“.