Farbkontrastprüfer

Überprüfen Sie den Vordergrund-/Hintergrundkontrast anhand von WCAG AA und AAA. Sehen Sie sich die Verhältnisaktualisierung an, während Sie Farben auswählen.

Color Contrast Checker

Live

Foreground (text)

Background

17.85:1

Contrast ratio

AA normal: PassAA large: PassAAA normal: PassAAA large: Pass

Readable headline sample

Body text at normal size should stay clear against this background. Adjust colors until WCAG targets pass.

Small caption text for density checks.

CSS output

color: #0f172a;
background-color: #ffffff;
/* contrast ratio: 17.85:1 */

Key capabilities

Überprüfen Sie den Vordergrund-/Hintergrundkontrast anhand der AA- und AAA-Richtlinien der WCAG.
Läuft in Ihrem Browser
Kostenlose Nutzung

Anleitung

Wählen Sie Text- (Vordergrund) und Hintergrundfarben aus.
Lesen Sie das Kontrastverhältnis und die AA/AAA-Ergebnisse ab.
Passen Sie an, bis Sie Ihr Zielniveau erreicht haben.

How this tool works

Wählen Sie Text- (Vordergrund) und Hintergrundfarben aus.
Lesen Sie das Kontrastverhältnis und die AA/AAA-Ergebnisse ab.
Passen Sie an, bis Sie Ihr Zielniveau erreicht haben.

Recommended settings

Verwenden Sie zunächst die Standardoptionen und passen Sie sie dann bei Bedarf an

Supported formats

Text / on-page input

File size and limits

Sehr komplexe mehrschichtige Vorschauen wirken sich auf älteren Telefonen möglicherweise langsamer aus.

Privacy

Farb- und CSS-Generatoren laufen vollständig in Ihrem Browser. Vorschauen und Konvertierungen laden Ihre Stile niemals hoch.

Common use cases

Verwenden Sie den Color Contrast Checker, wann immer Sie ihn benötigen: Überprüfen Sie den Vordergrund-/Hintergrundkontrast anhand der WCAG AA- und AAA-Richtlinien.

Troubleshooting

Die Vorschau sieht nach dem Einfügen anders aus

Überprüfen Sie Ihre Seite auf konkurrierendes CSS (Zurücksetzungen, geerbte Farben). Kopieren Sie die generierte Regel zunächst in ein isoliertes Stylesheet.

FAQ

Lädt dies mein CSS hoch?

Nein. Generatoren und Konverter laufen in Ihrem Browser mit Live-Vorschau.

Brauche ich ein Konto?

Nein. Öffnen Sie das Tool, passen Sie die Steuerelemente an und kopieren Sie das CSS.