Kontrast-Checker (WCAG 2.1)
Überprüfen Sie den Kontrast zwischen Text und Hintergrund nach WCAG-Standards.
Schlägt automatisch passende Farben vor und erstellt Konformitätszertifikate.
🔤 Textfarbe
🎨 Hintergrundfarbe
Vorschau: Normaler Text (16px)
Vorschau: Fetter Text (16px fett)
Vorschau: Großer Text (24px)
Vorschau: Großer fetter Text (18px fett)
Kontrastverhältnis
12.63 : 1
AA Normaler Text
≥ 4.5:1
AA Großer Text
≥ 3:1
AAA Normaler Text
≥ 7:1
AAA Großer Text
≥ 4.5:1
💡 Empfohlene Farben, um den AA-Standard zu erfüllen:
Textfarbe anpassen:
Hintergrundfarbe anpassen:
🏆 WCAG AA-Konformitätszertifikat
* Wenn Sie auf 'Auf 𝕏 teilen' klicken, wird das Zertifikat automatisch gespeichert.
📋 CSS-Code
Über
Ein kostenloses Tool zur sofortigen Überprüfung, ob die Farbkombinationen Ihrer Website oder App den WCAG 2.1-Kontraststandards entsprechen. Bei ungenügendem Kontrast ist Text für Menschen mit Sehbehinderung extrem schwer lesbar.
Wenn Ihre Farben durchfallen, schlägt das Tool automatisch die nächstgelegene passende Farbe vor und hilft Ihnen so, die Barrierefreiheit zu verbessern, ohne Ihr Design drastisch zu ändern.
Sobald Sie den AA-Standard erreicht haben, können Sie ein offizielles WCAG AA-Konformitätszertifikat speichern und teilen.
Bedienungsanleitung
Farben eingeben
Klicken Sie auf den Farbwähler oder geben Sie einen HEX-/RGB-Code direkt ein.
Ergebnisse prüfen
Das Kontrastverhältnis und der WCAG AA/AAA-Status werden in Echtzeit aktualisiert.
Zertifikat ausstellen
Wenn Sie den AA-Standard erreichen, können Sie ein Zertifikat speichern.
Glossar
- Kontrastverhältnis
- Ein numerischer Wert, der den Helligkeitsunterschied zwischen Vorder- und Hintergrundfarbe angibt. (1:1 bis 21:1).
- WCAG (Web Content Accessibility Guidelines)
- Internationale Standards des W3C. Regierungen weltweit verpflichten sich der Einhaltung dieser Vorgaben.
- AA-Standard
- Das Standard-Ziel für den Kontrast (4,5:1 für normalen Text, 3:1 für großen Text). Zumeist gesetzlicher Standard.
- AAA-Standard
- Der strengste WCAG-Standard (7:1 für normalen Text, 4,5:1 für großen Text). Häufig nur für bestimmte staatliche Angebote verpflichtend.
- Relative Leuchtdichte
- Die relative Helligkeit eines Punktes im Farbraum auf einer Skala von 0 bis 1.
- Barrierefreiheit (a11y)
- Die Praxis der Gestaltung nutzbarer Umgebungen für Menschen mit Behinderungen.
FAQ
- F.Welches Kontrastverhältnis wird für Webtext empfohlen?
- Nach den WCAG AA-Standards erfordert normaler Text ein Mindestverhältnis von 4,5:1. Für größeren Text (typischerweise 18pt oder 14pt fett) reicht 3:1 aus.
- F.Simuliert dieses Tool Farbenblindheit?
- Nein, diese Version konzentriert sich ausschließlich auf die mathematische Überprüfung von Kontrastverhältnissen. Bitte verwenden Sie für Farbenblindheit spezielle Simulationssoftware.
- F.Wie berechnet der Algorithmus das Verhältnis?
- Er wendet die exakte WCAG-Formel an, indem die relative Leuchtdichte beider Farben berechnet und gemäß der Skala (L1 + 0,05) / (L2 + 0,05) verglichen wird.
- F.Sollte ich AA- oder AAA-Konformität anstreben?
- Der globale Industriestandard und die gesetzliche Vorgabe für die meisten kommerziellen Anwendungen ist das AA-Level. AAA ist sehr restriktiv und wird meist nur für spezielle Regierungsseiten gefordert.
- F.Werden meine Markenfarbdaten an einen Server gesendet?
- Niemals. Alle Analysen und Zertifikatserstellungen erfolgen lokal in Ihrem Browser. Ihre Daten bleiben privat.
- F.Kann ich Farben in anderen Formaten als HEX eingeben?
- Ja, Sie können nicht nur HEX-Codes (wie #ffffff) eingeben, sondern Farben auch visuell über den Farbwähler auswählen oder RGB-Werte verwenden.
- F.Ist das generierte Zertifikat rechtsverbindlich?
- Es ist ein zuverlässiger mathematischer Nachweis für Ihre Kombinationen gemäß den W3C-Formeln, ersetzt jedoch kein umfassendes Zertifikat von Drittanbietern.
Anwendungsfälle
Webdesign-Validierung
Kontrast während des Entwurfs prüfen, um Inklusivität sicherzustellen.
Mobile-App-UI-Review
Die Lesbarkeit von Schaltflächentexten verifizieren.
Barrierefreiheits-Konformität
Websites prüfen, um ADA oder WCAG rechtmäßig zu erfüllen.
Präsentationen
Sicherstellen, dass Folien und Textfarben immer gut lesbar sind.