jquery.app
Deutsch
EnglishDeutschFrancaisEspanol日本語Nederlands

CSS-Tools

Kostenlose 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?

Das WCAG-Kontrastverhaltnis misst den Helligkeitsunterschied zwischen zwei Farben. Ein Verhaltnis von 4,5:1 erfullt den AA-Standard fur normalen Text, und 7:1 erfullt AAA. Diese Schwellenwerte helfen sicherzustellen, dass Menschen mit Sehschwache, Farbenfehlsichtigkeit oder die auf einem Bildschirm bei schwieriger Beleuchtung lesen, den Inhalt dennoch lesen konnen. Dieses Tool berechnet das genaue Verhaltnis aus den eingegebenen Hex-Werten und zeigt, ob die Kombination das benotigte Niveau erfullt, und hilft Designern und Entwicklern, Farbkombinationen vor der Veroffentlichung zu prufen.

Kurze Antwort

Prufen Sie, ob zwei Farbkombinationen die WCAG-Kontraststandards vor der Veroffentlichung erfullen. Das Tool berechnet das genaue Verhaltnis und zeigt Ihnen, ob normaler Text, groBer Text und UI-Komponenten die AA- oder AAA-Niveaus bestehen.

Last updated: 2026-06-11

Einschränkungen

  • Die Farbauswahl gibt nur Hex-Werte zuruck. Sie unterstutzt keine direkten RGB-, HSL- oder benannten Farbeingaben.
  • Das Tool pruft solide Farbpaare. Es bewertet keinen Kontrast bei Verlaufs-, Textschatten- oder Hintergrundbildern, bei denen die Leuchtdichte uber das Element variiert.
  • Kontrastverhaltnisse werden aus den eingegebenen Farben berechnet. Wenn eine der Farben transparent ist, spiegelt das Ergebnis nicht den tatsachlichen sichtbaren Kontrast gegen den zugrunde liegenden Seitenhintergrund wider.

Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub

So nutzt du dieses Tool

  1. Geben Sie die Vordergrundfarbe mit einem Hex-Code, RGB-Wert oder der Farbauswahl ein.
  2. Geben Sie die Hintergrundfarbe auf die gleiche Weise ein.
  3. Lesen Sie das Kontrastverhaltnis-Ergebnis und die WCAG-AA- und AAA-Bestanden/Nicht-Bestanden-Indikatoren fur normalen und groBen Text.
  4. Passen Sie eine der Farben an, bis das Verhaltnis Ihr Ziel-Barrierefreiheitsniveau erreicht.

Wofür du es nutzen kannst

  • Prufen, ob FlieBtext auf hellem Hintergrund die WCAG-AA-Lesbarkeitsstandards erfullt.
  • Markenfarbkombinationen uber Schaltflachen, Badges und UI-Komponenten validieren.
  • Zugangliche Designspezifikationen vorbereiten, bevor sie an die Entwicklung ubergeben werden.

Anwendungsfalle

Praxisbeispiele

Beispiel

Schaltflachentext auf Markenfarbe

Ein Designer wahlt einen blauen Markenhintergrund fur eine primare Schaltflache und benotigt weiBen Text. Das Tool bestatigt das Kontrastverhaltnis fur AA bei normalem Text oder schlagt einen dunkleren Farbton vor, falls nicht.

Beispiel

FlieBtext auf benutzerdefiniertem Hintergrund

Eine Landingpage verwendet einen hellgrauen Abschnittshintergrund. Das Tool pruft, ob der standardmaBige dunkelgraue FlieBtext auf AA-Niveau lesbar bleibt.

Haufige Fehler

  • Sich auf das visuelle Urteil anstatt auf ein gemessenes Verhaltnis zu verlassen, was Kontrastprobleme ubersehen kann.
  • Nur auf einem hellen Bildschirm in einem gut beleuchteten Raum zu testen, wo Text mit geringem Kontrast akzeptabel aussehen kann.
  • Zu vergessen, dass groBer Text WCAG AA bei einem niedrigeren Verhaltnis (3:1) besteht als normaler Text (4,5:1).

Überprüfung

  1. Testen Sie das endgultige Farbpaar in einem Browser, indem Sie zoomen, um zu bestatigen, dass der Text in kleinen GroBen lesbar ist.
  2. Vergleichen Sie das Tool-Ergebnis mit dem WCAG-Kontrastprufer im Chrome-Entwicklertools-Bereich Barrierefreiheit fur eine zweite Meinung.

FAQ

Fragen zu CSS-Farbkontrast-Prüfer

Was ist ein gutes Kontrastverhaltnis?

Fur normalen Text streben Sie mindestens 4,5:1 (WCAG AA) oder 7:1 (WCAG AAA) an. Fur groBen Text uber 18px oder 14px fett erfullt 3:1 AA.

Gilt WCAG fur dekorativen Text?

WCAG gilt fur informationstragenden Text. Rein dekorativer Text, der keine Bedeutung tragt und nicht Teil eines Benutzeroberflachenelements ist, muss keine Kontrastschwellenwerte erfullen.

Welche Farbformate akzeptiert dieses Tool?

Das Tool akzeptiert Hex-Farbcodes und bietet eine Farbauswahl. Geben Sie Farben als sechsstellige Hex-Werte wie #333333 oder #ffffff ein. Die Farbauswahl gibt nur Hex-Werte zuruck.

Verwandte Tools

Weitere css-tools

Css

CSS Carousel Generator

Generate native CSS carousel markup with scroll-snap, scroll buttons, scroll markers, and accessible list structure. No JavaScript required.

Tool öffnen

Auch ausprobieren

Auch ausprobieren