Farbkontrast-Karo
Vordergrundfarbe (Textfarbe)
Hintergrundfarbe
Vorschau
Normaler Text (18px)
Großer Text (24px fett)
Teilen Sie es uns mit.
Bitte teilen Sie Ihre Erfahrungen mit.
Ähnliche Tools
Über Farbkontrast-Karo
Prüfen Sie die Einhaltung der WCAG-AA/AAA-Standards sowie die Kontrastverhältnisse für Text- und Hintergrundfarben. Kostenloses Tool zur Barrierefreiheit.
Anleitung zur Verwendung
Schritt 1
Geben Sie eine Vordergrundfarbe (Textfarbe) ein oder wählen Sie sie mithilfe des HEX-Codes oder der Farbauswahl aus.
Schritt 2
Geben Sie eine Hintergrundfarbe ein oder wählen Sie sie mithilfe des HEX-Codes oder der Farbauswahl aus.
Schritt 3
Das in Echtzeit berechnete Kontrastverhältnis anzeigen
Schritt 4
Prüfen Sie die WCAG-AA- und AAA-Konformität für normale und große Texte
Schritt 5
Visuelle Vorschau des Textes auf dem Hintergrund anzeigen
Schritt 6
Wenn der Kontrast nicht ausreicht, verwenden Sie die vorgeschlagenen Farben für eine bessere Zugänglichkeit.
Schritt 7
Verwenden Sie „Farben tauschen“, um Vorder- und Hintergrundfarbe umzukehren.
Funktionen und Vorteile
- ✅Echtzeit-Kontrastverhältnisberechnung
- ✅Überprüfung der WCAG 2.1 AA- und AAA-Konformität
- ✅Separate Prüfungen für normalen Text und großen Text
- ✅Visuelle Vorschau von Text auf Hintergrund
- ✅Farbauswahlwerkzeuge für eine einfache Farbauswahl
- ✅HEX-Farbeingabe mit Validierung
- ✅Farbtausch-Schaltfläche für schnelles Testen
- ✅Zufallsfarbgeneratoren
- ✅Automatische Vorschläge für fehlgeschlagene Kontraste
- ✅Zeigt die erforderlichen Verhältnisse (4,5:1, 3:1, 7:1, 4,5:1)
- ✅Bestanden/Nicht bestanden-Indikatoren mit Häkchen
- ✅100 % browserbasiert – kein Server-Upload
- ✅100 % kostenlos – keine Wasserzeichen, keine Anmeldung erforderlich
Häufig gestellte Fragen
Was ist das Farbkontrastverhältnis?
Das Farbkontrastverhältnis misst den Helligkeitsunterschied zwischen zwei Farben und wird als Verhältnis wie beispielsweise 4,5:1 ausgedrückt. Höhere Werte bedeuten einen besseren Kontrast. Es wird anhand der WCAG-2.1-Formel auf Basis der relativen Helligkeit jeder Farbe berechnet.
Was sind die WCAG-AA- und AAA-Standards?
Die WCAG (Web Content Accessibility Guidelines) definieren zwei Konformitätsstufen: AA (Minimum) erfordert ein Textverhältnis von 4,5:1 für normale und 3:1 für große Texte. AAA (Enhanced) erfordert ein Textverhältnis von 7:1 für normale und 4,5:1 für große Texte. Die meisten Websites streben die Einhaltung der AA-Kriterien an.
Was gilt als große Schrift?
Als große Schrift gilt eine Schriftgröße von 18 pt (24 px) oder größer, bei Fettdruck 14 pt (18,66 px) oder größer. Große Schrift hat geringere Kontrastanforderungen (3:1 für AA, 4,5:1 für AAA), da sie besser lesbar ist.
Warum schneidet mein Design bei Kontrastprüfungen nicht ab?
Häufige Gründe sind: helle Schrift auf hellem Hintergrund, dunkle Schrift auf dunklem Hintergrund oder Farben mit ähnlicher Leuchtdichte. Selbst Farben, die Ihnen unterschiedlich erscheinen, können einen geringen Kontrast aufweisen. Überprüfen Sie daher immer den Kontrast mit einem Kontrastmessgerät.
Sollte ich die AA- oder die AAA-Konformität anstreben?
WCAG AA ist die gesetzliche Anforderung für die meisten Websites und gilt als Mindeststandard. AAA wird für verbesserte Barrierefreiheit empfohlen, insbesondere für Websites, die sich an ältere Nutzer oder Menschen mit Sehbehinderungen richten. Beginnen Sie mit AA und streben Sie nach Möglichkeit AAA an.
Kann ich beliebige Farben verwenden, solange der Kontrast gut ist?
Ein guter Kontrast ist wichtig, aber nicht ausreichend. Berücksichtigen Sie außerdem Farbenblindheit (nutzen Sie unseren Farbenblinden-Simulator), vermeiden Sie es, Informationen ausschließlich über Farben zu vermitteln, und achten Sie darauf, dass die Farben in Ihrem Gesamtdesign harmonisch zusammenwirken.
Was, wenn ich mit meinen Markenfarben keinen guten Kontrast erzielen kann?
Versuchen Sie, den Farbton anzupassen (heller oder dunkler), Ihre Markenfarbe für Akzente statt für Text zu verwenden, Rahmen oder Hintergründe hinzuzufügen oder die Vorschlagsfunktion zu nutzen, um die passendste verfügbare Alternative zu finden. Markenfarben lassen sich oft leicht anpassen, ohne dass die Markenidentität verloren geht.
Muss ich jede Farbkombination überprüfen?
Prüfen Sie alle Text-auf-Hintergrund-Kombinationen, insbesondere Fließtext, Überschriften, Links, Schaltflächen und Formulareingabefelder. Achten Sie auch auf den Hover- und Fokus-Zustand. Symbole und Grafiken, die Informationen vermitteln, müssen ebenfalls die Kontrastanforderungen erfüllen.
Ist 21:1 das maximale Kontrastverhältnis?
Ja, 21:1 ist das maximal mögliche Kontrastverhältnis, das durch reines Schwarz (#000000) auf reinem Weiß (#FFFFFF) oder umgekehrt erreicht wird. Dies stellt den höchstmöglichen Kontrast dar.