CSS-Tools

CSS-Farbkontrast-Prüfer

Prüfe das Kontrastverhaltnis zwischen zwei Farben gegenüber den WCAG-Richtlinien.

Tool wird geladen...

Was ist CSS-Farbkontrast-Prüfer?

CSS-Farbkontrast-Prüfer ist ein Browser-Tool für diese Aufgabe: Prüfe das Kontrastverhaltnis zwischen zwei Farben gegenüber den WCAG-Richtlinien. Die Ausgabe bleibt lesbar, damit du sie vor dem Einbau in eine Live-Seite prüfen kannst.

Quick answer

Check whether two color combinations meet WCAG contrast standards before publishing. The tool calculates the precise ratio and tells you whether normal text, large text, and UI components pass AA or AAA levels.

Limitations

  • The color picker returns hex values only. It does not support RGB, HSL, or named color inputs directly.
  • The tool checks solid color pairs. It does not evaluate contrast on gradient text, box-shadow text, or background images where luminance varies across the element.
  • Contrast ratios are calculated from the colors you enter. If either color is transparent the result will not reflect the actual visible contrast against the underlying page background.

So nutzt du dieses Tool

  1. Öffne das Tool und trage die relevanten Werte ein.
  2. Prüfe die erzeugte Ausgabe im Ergebnisfeld.
  3. Kopiere nur den Teil, der zu deiner Seite passt.
  4. Teste die Änderung im Browser, bevor du sie veröffentlichst.

Wofür du es nutzen kannst

  • Wiederkehrende Publishing-Aufgaben schneller erledigen.
  • Markup, CSS oder Checklisten vor einem Launch vorbereiten.
  • Kleine Fehler vermeiden, die bei statischen Websites leicht übersehen werden.

Haufige Fehler

  • Ausgabe ungepruft in Produktion kopieren.
  • Lokale URLs statt finaler öffentlich erreichbarer URLs verwenden.
  • Nach dem Build nicht prüfen, ob die Datei im veröffentlichten Ordner liegt.

Verification

  1. Test the final color pair in a browser by zooming to confirm text is readable at small sizes.
  2. Compare the tool result against the WCAG contrast checker in Chrome DevTools Accessibility panel for a second opinion.

FAQ

Fragen zu CSS-Farbkontrast-Prüfer

Lauft CSS-Farbkontrast-Prüfer lokal im Browser?

Ja. Die aktuellen Tools sind auf Browserausgabe und kopierbare Ergebnisse ausgelegt.

Muss ich die Ausgabe testen?

Ja. Prüfe die Ausgabe immer in deinem eigenen Template, Browser und Hosting-Setup.

Verwandte Tools

Weitere css-tools

Auch ausprobieren

Auch ausprobieren