ZenovayTools

Farbkontrast-Prüfer

Überprüfen Sie WCAG-2.1-Farbkontrastverhältnisse für Text und Hintergründe. Überprüfen Sie die AA- und AAA-Konformität für normalen und großen Text.

So verwenden Sie Farbkontrast-Prüfer

  1. 1Geben Sie Ihre Vordergrundfarbe (Text), RGB oder benannte Farbe ein.
  2. 2Geben Sie Ihre Hintergrundfarbe ein.
  3. 3Sehen Sie das Kontrastverhältnis und die WCAG-2.1-AA-/AAA-Konformität für normalen und großen Text.
  4. 4Passen Sie die Farben an, bis Ihr Design die Anforderungen an die Barrierefreiheit erfüllt.
ZenovayAnalytics

Analytics, für Gründer gebaut.

  • Besucher-Tracking in Echtzeit
  • Datenschutz zuerst, kein Cookie-Banner
  • In zwei Minuten eingerichtet
Zenovay entdecken

Verwandte Tools

JSON-Formatter und Validator
Formatieren, validieren und verschönern Sie JSON-Daten mit Syntaxhervorhebung und Fehlererkennung.
JWT-Decoder
Dekodieren und inspizieren Sie JWT-Token. Zeigen Sie Header, Payload und überprüfen Sie Signaturen.
Base64 Encode/Decode
Kodieren Sie Text in Base64 oder dekodieren Sie Base64 zurück in Text. Unterstützt UTF-8 und Binärdaten.
URL Codierungstool
Codieren oder decodieren Sie URL-Komponenten. Verarbeiten Sie Sonderzeichen, Abfragezeichenfolgen und vollständige URLs.

Häufig gestellte Fragen

Was ist WCAG-Farbkontrast?▾
WCAG (Web Content Accessibility Guidelines) erfordert ausreichenden Farbkontrast zwischen Text und seinem Hintergrund, damit Menschen mit niedriger Sehkraft oder Farbblindheit Inhalte lesen können. Das Kontrastverhältnis wird von 1:1 (kein Kontrast) bis 21:1 (schwarz auf weiß) gemessen.
Was ist WCAG AA vs. AAA-Konformität?▾
WCAG AA erfordert ein Kontrastverhältnis von 4,5:1 für normalen Text und 3:1 für großen Text (18pt+ oder 14pt+ Fett). AAA erfordert 7:1 für normalen Text und 4,5:1 für großen Text. AA ist das gesetzliche Minimum für die meisten Barrierefreiheitsgesetze (ADA, EN 301 549). AAA ist der Goldstandard.
Was gilt als großer Text in WCAG?▾
Großer Text ist definiert als 18pt (24px) oder größer für normalgewichtigen Text oder 14pt (ungefähr 18,67px) oder größer für Fettdruck. Großer Text hat niedrigere Anforderungen an den Kontrast, da er bei niedrigerem Kontrast leichter zu lesen ist.
Warum ist Farbkontrast wichtig für SEO?▾
Text mit niedrigem Kontrast erhöht die Absprungrate (Benutzer verlassen), verkürzt die Zeit auf der Seite und schadet den Core Web Vitals-Scores. Google nutzt Engagement-Signale beim Ranking. Barrierefreie Websites werden auch besser eingestuft, da sie mehr Benutzer effektiv bedienen.
Wie behebe ich niedrigen Kontrast?▾
Verdunkeln Sie die Textfarbe oder hellen Sie den Hintergrund auf (für helle Themen). Kleine schrittweise Anpassungen von 10-20% Helligkeit reichen oft aus. Verwenden Sie ein Farbrad, um Ihren Markenfarbe zu beibehalten, während Sie die Helligkeit anpassen.
Welche Farbformate akzeptiert dieses Tool?▾
Dieses Tool akzeptiert Hex-Farben (#fff, #ffffff), RGB (rgb(255,255,255)), benannte CSS-Farben (white, red) und HSL (hsl(0, 0%, 100%)). Hex ist das zuverlässigste Format.
Gilt WCAG-Kontrast für Icons und Grafiken?▾
WCAG 1.4.11 (Non-text Contrast, Level AA) erfordert ein Kontrastverhältnis von 3:1 für UI-Komponenten (Icons, Buttons, Formularsteuerelemente) und Informationsgrafiken. Dieses Tool konzentriert sich auf Text-Kontrast (WCAG 1.4.3 und 1.4.6).