🛠️ Browser-Tool

Farbkontrast-Prüfer

Prüfen Sie Farbkontrastverhältnisse für die Einhaltung der Web-Barrierefreiheit. Testen Sie Text- und Hintergrundfarbkombinationen gemäß den WCAG-Richtlinien mit Echtzeit-Vorschau, Barrierefreiheitsbewertungen und Verbesserungsvorschlägen.

Farbkontrast-Prüfer

Erstellen Sie barrierefreie Farbkombinationen mit Zuversicht

#000000
#f0f4f8

Vorschau

Normaler Text

This is an example of normal body text that would appear on your website or application.

Großer Text

This is an example of large text (18pt or 14pt bold).

"Good design is accessible design. Contrast is essential for readability."

Kontrastverhältnis

19.00:1

0

PUNKTZAHL

Normaler Text

AAA

Großer Text

AAA

WCAG 2.1 Richtlinien: AA erfordert 4,5:1 für normalen Text, 3:1 für großen Text. AAA erfordert 7:1 für normalen Text, 4,5:1 für großen Text.

Tipps & Vorschläge

  • Maintain a contrast ratio of at least 4.5:1 for normal text.
  • Use 3:1 or higher for large text (18pt or 14pt bold).
  • Consider using darker text on lighter backgrounds or vice versa.
  • For full WCAG AAA compliance, aim for a ratio of 7:1.
  • Adjust brightness or saturation slightly to improve contrast.

So prüfen Sie den Farbkontrast

1

Textfarbe auswählen

Klicken Sie auf den ersten Farbwähler, um Ihre Textfarbe auszuwählen, oder geben Sie direkt einen Hex-Code ein.

2

Hintergrundfarbe wählen

Verwenden Sie den zweiten Farbwähler, um Ihre Hintergrundfarbe für den Kontrasttest auszuwählen.

3

Kontrastergebnisse prüfen

Überprüfen Sie das berechnete Kontrastverhältnis und sehen Sie die AA/AAA-Bewertungen für normalen und großen Text.

4

Ihr Design vorschauen

Sehen Sie sich die Live-Vorschau an, um zu sehen, wie Ihre Farbkombination mit echtem Textinhalt aussieht.

Hauptfunktionen

Echtzeit-Kontrastprüfung

Berechnen Sie Kontrastverhältnisse sofort, während Sie verschiedene Text- und Hintergrundfarbkombinationen auswählen.

WCAG-Konformitätsbewertungen

Erhalten Sie AA- und AAA-Bewertungen sowohl für normalen als auch für großen Text gemäß den Richtlinien für barrierefreie Webinhalte (WCAG).

Live-Vorschau-Panel

Sehen Sie genau, wie Ihre Farbkombinationen mit Beispieltext in normalen und großen Größen aussehen werden.

Visuelle Anzeige der Bewertung

Sehen Sie Ihre Kontrastleistung mit einem intuitiven Kreisdiagramm, das Bewertungen von 0-100 anzeigt.

Interaktive Farbwähler

Wählen Sie Farben einfach mit den integrierten Farbwähler-Tools für Text- und Hintergrundfarben.

Tipps zur Barrierefreiheit

Erhalten Sie praktische Vorschläge zur Verbesserung des Kontrasts und zur Einhaltung von Barrierefreiheitsstandards.

Was ist ein Farbkontrast-Prüfer?

Ein Farbkontrast-Prüfer ist ein Tool, das den Helligkeitsunterschied zwischen Text- und Hintergrundfarben misst. Er berechnet Kontrastverhältnisse gemäß den WCAG-Standards (Web Content Accessibility Guidelines), um sicherzustellen, dass Inhalte für Benutzer mit Sehbehinderungen, einschließlich Farbenblindheit und geringer Sehkraft, lesbar sind.

Warum unseren Farbkontrast-Prüfer verwenden?

1

WCAG-Konformität

Stellen Sie sicher, dass Ihre Designs internationale Barrierefreiheitsstandards mit präzisen AA- und AAA-Bewertungen erfüllen.

2

Echtzeit-Feedback

Sehen Sie sofortige Ergebnisse, während Sie Farben anpassen, was es einfach macht, konforme Kombinationen zu finden.

3

Visuelles Bewertungssystem

Verstehen Sie die Kontrastleistung auf einen Blick mit unserem intuitiven 0-100-Punktesystem.

4

Keine Installation erforderlich

Testen Sie Farbkombinationen sofort in Ihrem Browser, ohne Software herunterladen zu müssen.

Häufig gestellte Fragen

Was ist ein gutes Kontrastverhältnis?

Für normalen Text streben Sie mindestens 4,5:1 für AA-Konformität oder 7:1 für AAA an. Großer Text (18pt oder 14pt fett) benötigt 3:1 für AA oder 4,5:1 für AAA-Konformität.

Was bedeuten die AA- und AAA-Bewertungen?

AA ist die Standardstufe der Barrierefreiheitskonformität, die von den meisten Vorschriften gefordert wird. AAA ist die höchste Stufe und bietet erweiterte Barrierefreiheit für Benutzer mit stärkeren Sehbehinderungen.

Wie wird das Kontrastverhältnis berechnet?

Das Kontrastverhältnis wird anhand der relativen Luminanz von Farben berechnet, wie sie in den WCAG-Richtlinien definiert ist. Es reicht von 1:1 (kein Kontrast) bis 21:1 (maximaler Kontrast).

Was gilt als großer Text?

Großer Text ist definiert als 18 Punkt (24px) oder größer, oder 14 Punkt (18,66px) oder größer, wenn fett. Großer Text hat nachsichtigere Kontrastanforderungen.

Warum ist Farbkontrast wichtig?

Ein guter Farbkontrast stellt sicher, dass Inhalte für jeden lesbar sind, einschließlich Benutzer mit Sehbehinderungen, Farbenblindheit oder jene, die Inhalte bei hellem Sonnenlicht oder auf schlechten Bildschirmen betrachten.

Kann ich dies für jedes Farbformat verwenden?

Das Tool akzeptiert Hex-Farbcodes. Sie können andere Formate (RGB, HSL usw.) mithilfe von Online-Konvertern oder Design-Tools in Hex-Codes umwandeln.