Farbpalette + WCAG-Checker
Prüfe Kontrastverhältnisse, AA-/AAA-Konformität, generiere Palettenvarianten und exportiere CSS- oder Tailwind-v4-Farb-Tokens lokal.
Vordergrundfarbe
Hintergrundfarbe
Primärfarben-Umrechnungen
#1A73E8rgb(26, 115, 232)hsl(214 82% 51%)oklch(0.574 0.195 257.9)Generierte Palette
CSS-Variablen
:root {
}Tailwind v4 @theme
@theme {
}Du hast gerade Farbpalette + WCAG-Checker getestet — Probiere als Nächstes Farbenblindheitstest →
Was ist ein WCAG-Farbkontrast-Prüfer?
Die Color Palette + WCAG Checker berechnet das Kontrastverhältnis der relativen Leuchtkraft zwischen zwei sRGB-Farben und bewertet es nach den Web Content Accessibility Guidelines (WCAG). Die Formel ist festgelegt: Jeden Kanal von sRGB in lineares Licht linearisieren (L = R*0.2126 + G*0.7152 + B*0.0722 nach Gamma-Dekodierung), dann (L_lighter + 0.05) / (L_darker + 0.05) berechnen. Das Ergebnis ist das Kontrastverhältnis, das von 1,0 (identische Farben) bis 21,0 (reines Schwarz auf Weiß) reicht. WCAG 2.1 legt drei Schwellenwerte fest: 4,5:1 für normalen Fließtext (AA), 3:1 für großen Text ≥18pt oder 14pt Fettdruck (AA) und 7:1 / 4,5:1 für strengere AAA-Stufen. WCAG 2.2 (veröffentlicht Oktober 2023) fügt eine 3:1-Anforderung für UI-Komponenten und Fokus-sichtbare Gliederungen hinzu, die es in 2.1 nicht gab. Neben der Bewertung generiert das Tool eine koordinierte Palette — komplementär, analog, Schatten, Tönung — aus einer einzelnen Seed-Farbe im OKLCH-Raum (perziell gleichmäßig im Gegensatz zu HSL) und exportiert das Ergebnis als CSS-Custom-Properties oder Tailwind v4 @theme-Token. Ein PNG-Farbmuster-Blatt wird zur Design-Übergabe mitgeliefert.
So nutzt du den WCAG-Farbprüfer
Geben Sie eine Vordergrund- und Hintergrundfarbe als HEX-Wert ein (#1A73E8 auf #FFFFFF) — das Kontrastverhältnis und die Bestanden/Nicht bestanden-Abzeichen für AA normal (4,5:1), AAA normal (7:1), AA groß (3:1) und AA UI (3:1, WCAG 2.2) werden sofort angezeigt. Wenn ein Paar fehlschlägt, wird die Vordergrundfarbe entlang der OKLCH-Leuchtkraftachse dunkler oder heller angepasst, während Farbton und Sättigung erhalten bleiben, damit die Markenfarbenidentität intakt bleibt. Klicken Sie auf „Vorgeschlagene Farbe verwenden", um diese anzuwenden. Der klassische Testfehler: weißer Text auf reinem Gelb #ffff00 (#ffffff Vordergrund) — das Verhältnis ist 1,07:1, weit unter 3:1, obwohl es dem bloßen Auge „hochkontrast" erscheint. Schwarz auf Gelb ist 19,55:1, deutlich bestanden. Unterhalb des Prüfers zeigt das Palettenfeld komplementäre und analoge Varianten, die aus Ihrer Eingabe generiert wurden. Kopieren Sie CSS-Variablen, kopieren Sie Tailwind 4-Theme-Token oder laden Sie das PNG-Farbmuster herunter.
Warum WCAG-Farbkontrast-Konformität wichtig ist
WCAG-Kontrastkonformität ist eine durchsetzbare Rechtsvorschrift nach dem ADA in den USA, dem ab Juni 2025 geltenden Europäischen Barrierefreiheitsgesetz (EAA) für in der EU verkaufte Produkte und Dienstleistungen sowie EN 301 549 für öffentliche Beschaffung. Bußgelder nach dem EAA erreichen je nach Gerichtsbarkeit €30 000 bis €500 000. Jenseits der rechtlichen Haftung entspricht der Schwellenwert von 4,5:1 ungefähr dem Kontrast, den eine Person mit 20/40 Sehschärfe zum bequemen Lesen von Fließtext benötigt — das ist kein grenzwertiges Behinderungsszenario, das sind die meisten Leser über 40 nach natürlicher Linsenvergilbung. Das Entwerfen von Token mit WCAG-Konformität von Anfang an vermeidet die Kosten für die Nachrüstung von Markenfarbkorrekturen durch jede Komponente. Eine häufige Falle ist die Beurteilung des Kontrasts mit dem bloßen Auge: Markenrosa und blasse Blaugrüntöne „sehen lesbar aus" für Designer mit 20/20 Sehschärfe unter Studioleuchten und schlagen um das 2×-fache unter Leuchtstoffbeleuchtung im Büro fehl. Den Quotient frühzeitig berechnen — in der Token-Definitionsphase, nicht beim Komponenten-Aufbau — löst die Frage mit Arithmetik statt Meinung.
Häufig gestellte Fragen
Wie funktioniert der bestehende Vorschlag?
TeaFun hält Farbton und Sättigung so nah wie möglich an deiner gewählten Vordergrundfarbe und passt dann die Helligkeit an, bis das Paar mindestens WCAG AA für Fließtext erreicht.
Verwendet der Tailwind-Export das neue v4-Format?
Ja. Der Export nutzt `@theme`-Tokens mit `oklch()`-Werten, sodass du sie direkt in ein Tailwind-v4-Projekt einfügen kannst.
Kann ich dies für Kundenarbeit nutzen?
Ja. Der Checker ist rein browserbasiert, sodass du Markenfarben testen, Tokens exportieren und PNG-Farbmuster generieren kannst, ohne etwas an einen Drittanbieter zu senden.
Dieses Tool in einem größeren Ablauf nutzen
Diese Sammlungen bündeln die Folge-Tools und Guides, die oft zum selben Job gehören.
Gleiche Tags durchsuchen
Springe zu anderen Tools mit demselben Ablauf, Format oder Anwendungsfall.