Zum Inhalt springen
Tools

Kostenloser Kontrastprüfer

Mach jede Farbkombination leichter lesbar.

Prüfe Text- und Oberflächenfarben nach WCAG und korrigiere ein Ergebnis, ohne seinen Charakter zu verlieren.

  • Exaktes Kontrastverhältnis
  • Barrierefreie Korrektur
  • Funktioniert in diesem Browser

Farben wählen

Vorder- und Hintergrund testen

Gib einen drei- oder sechsstelligen HEX-Wert ein oder nutze die Farbauswahl.

Der Farbton wählt die Farbfamilie. Die Farbintensität reicht von neutralem Grau bis zu kräftiger Farbe. Die Helligkeit verschiebt das Ergebnis zu Schwarz oder Weiß. Alle drei Einstellungen ergeben zusammen die endgültige Farbe.

{{ t('checker.picker', { label: t('checker.foreground') }) }}

{{ pickerHint('foreground') }}

{{ t('checker.picker', { label: t('checker.background') }) }}

{{ pickerHint('background') }}

Kontrastverhältnis {{ ratioText }}:1 {{ t('score.summary', { passed: passedCount, total: resultRows.length }) }} Ergebnisdetails
Kontrastverhältnis {{ ratioText }}:1 von maximal 21:1

Das Verhältnis misst den Hell-Dunkel-Unterschied: 1:1 bedeutet keinen Kontrast, höhere Werte sind leichter zu unterscheiden. AA ist das übliche Ziel; AAA ist strenger.

  • {{ result.title }}{{ result.hint }} {{ result.pass ? t('results.pass') : t('results.fail') }}

Live-Vorschau

Sieh die Kombination im Kontext

Beispiel für großen Text

Guter Kontrast sorgt auf verschiedenen Bildschirmen und unter unterschiedlichen Bedingungen für angenehmes Lesen.

Barrierefreie Korrektur

Farbe behalten, Kontrast korrigieren

Zuerst ändert sich die Helligkeit. Farbton und Intensität bleiben so nah wie im darstellbaren Bereich möglich.

Vordergrund korrigieren

Diese Farbe erfüllt das gewählte Ziel bereits.

Nur diese Farbe zu ändern reicht für das gewählte Ziel nicht aus.

Hintergrund korrigieren

Diese Farbe erfüllt das gewählte Ziel bereits.

Nur diese Farbe zu ändern reicht für das gewählte Ziel nicht aus.

{{ toast }}