Farbkontrast-Checker
Geben Sie zwei Farben ein und sehen Sie sofort das WCAG-Kontrastverhältnis mit AA- und AAA-Hinweisen.
Geben Sie Vordergrund- und Hintergrundfarben in Hex oder RGB ein, um sofort das WCAG-Kontrastverhältnis zu berechnen, AA/AAA-Ergebnisse zu sehen, Text vorzuschauen und optionale Anpassungsvorschläge zu erhalten.
So nutzen Sie diesen Farbkontrast-Checker
Geben Sie eine Vordergrund- und Hintergrundfarbe ein oder fügen Sie sie ein. Das Tool normalisiert gültige Eingaben zu Großbuchstaben-Hex, berechnet sofort das WCAG-Kontrastverhältnis und zeigt Bestanden/Nicht bestanden für AA- und AAA-Schwellen. Nutzen Sie Korrektur vorschlagen, teilen Sie Ergebnisse per URL oder setzen Sie zurück.
WCAG-Kontrastverhältnis-Schwellen
WCAG 2.x verlangt mindestens 4,5:1 für normalen Text (AA), 3:1 für großen Text (AA), 7:1 für normalen Text (AAA) und 4,5:1 für großen Text (AAA). Dieses Tool zeigt immer alle vier Ergebnisse zum direkten Vergleich.
Unterstützte Farbformate
Geben Sie #RGB, #RRGGBB, rgb(r,g,b) oder kommagetrennte r,g,b-Werte ein. Kanäle müssen ganze Zahlen von 0 bis 255 sein. Alpha-Transparenz, 8-stelliges Hex, HSL/HSLA und CSS-Farbnamen werden in v1 nicht unterstützt.
Was Bestanden und Nicht bestanden bedeuten
Bestanden bedeutet, dass das berechnete Verhältnis die angegebene Schwelle für diese Stufe erreicht oder überschreitet. Nicht bestanden bedeutet das Gegenteil. Beschriftungen und Symbole ergänzen die Farbe, damit Ergebnisse nicht nur über Farbe verständlich sind.
Häufig Gestellte Fragen
Warum werden Alpha und Verläufe nicht unterstützt?
Version 1 bewertet nur vollständig deckende sRGB-Farben. Alpha-Mischung und Verläufe erfordern Kompositionsregeln, die dieses Tool noch nicht modelliert; rgba(), 8-stelliges Hex und Verlaufsanalyse liegen daher außerhalb des MVP.
Wie wird das Kontrastverhältnis berechnet?
Der Checker nutzt die WCAG-Formel für relative Luminanz bei deckenden sRGB-Farben: Kanäle linearisieren, Luminanz berechnen, dann (heller + 0,05) / (dunkler + 0,05). Angezeigte Verhältnisse werden auf zwei Dezimalstellen gerundet; Schwellenprüfungen nutzen den vollen Wert.
Was macht Korrektur vorschlagen?
Es verschiebt die gewählte Vordergrund- oder Hintergrundfarbe deterministisch entlang eines Helligkeitspfads zu Schwarz oder Weiß, bis die gewählte WCAG-Stufe erreicht ist, und liefert den nächsten konformen Hex-Wert und das Ergebnisverhältnis, sofern vorhanden.
Kann ich ein bestimmtes Farbpaar teilen?
Ja. Gültige Werte für Vordergrund, Hintergrund und Textgröße werden in URL-Parametern synchronisiert (z. B. ?fg=000000&bg=FFFFFF&size=normal), damit Sie direkt auf ein Ergebnis verlinken können.
Speichert die Seite meine Farben?
Berechnungen laufen vollständig in Ihrem Browser. Das letzte gültige Farbpaar kann zur Bequemlichkeit in localStorage auf Ihrem Gerät gespeichert werden; mit Zurücksetzen löschen Sie Eingaben, URL-Parameter und gespeicherten Zustand.