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 {
--color-primary: #1A73E8;
--color-background: #FFFFFF;
--color-accessible: #1A73E8;
--color-complementary: #E88F1A;
--color-analogous-left: #1ADAE8;
--color-analogous-right: #281AE8;
--color-shade: #0F4A97;
--color-tint: #6DA6F0;
}Tailwind v4 @theme
@theme {
--color-primary: oklch(0.574 0.195 257.9);
--color-background: oklch(1.000 0.000 89.9);
--color-accessible: oklch(0.574 0.195 257.9);
--color-complementary: oklch(0.727 0.156 65.4);
--color-analogous-left: oklch(0.811 0.135 203.2);
--color-analogous-right: oklch(0.443 0.276 269.2);
--color-shade: oklch(0.421 0.139 257.6);
--color-tint: oklch(0.717 0.124 255.4);
}Was ist ein WCAG-Farbkontrast-Prüfer?
Der Farbpaletten- und WCAG-Prüfer bewertet Vordergrund-/Hintergrund-Farbpaare gegen die Kontrastanforderungen der Web Content Accessibility Guidelines (WCAG 2.1). Er meldet das genaue Kontrastverhältnis, Bestanden/Nicht-bestanden-Status für AA- und AAA-Konformität bei Fließtext und großem Text und schlägt die nächste passende Farbe vor, wenn dein Paar durchfällt. Über die Kontrastprüfung hinaus generiert das Werkzeug eine komplette Farbpalette — komplementäre, analoge, Schatten- und Tönungsvarianten — aus deiner Primärfarbe und exportiert sie als CSS-Custom-Properties oder Tailwind-v4-@theme-Tokens mit oklch()-Werten. Du kannst auch ein PNG-Farbmusterblatt für die Designübergabe herunterladen. Die gesamte Berechnung läuft lokal ohne Drittanbieter-Service.
So nutzt du den WCAG-Farbprüfer
Gib eine Vordergrund- und Hintergrundfarbe als HEX-Werte ein (z. B. #1A73E8 auf #FFFFFF). Der Prüfer zeigt sofort das Kontrastverhältnis und Bestanden/Nicht-bestanden-Abzeichen für WCAG-AA-Fließtext (4,5:1), AAA-Fließtext (7:1) und AA-Großtext (3:1). Wenn das Paar durchfällt, schlägt das Werkzeug die nächste passende Vordergrundfarbe vor, die deinen ursprünglichen Farbton und deine Sättigung erhält. Klicke auf „Vorgeschlagene Farbe verwenden“, um sie anzuwenden. Unterhalb des Prüfers kannst du die generierten Palettenvarianten durchsuchen, CSS-Variablen oder Tailwind-v4-Theme-Tokens kopieren und ein PNG-Farbmuster zum Teilen mit Designern herunterladen.
Warum WCAG-Farbkontrast-Konformität wichtig ist
WCAG-2.1-Kontrastanforderungen sind keine optionalen Richtlinien — sie sind in vielen Rechtsordnungen unter ADA (USA), EAA (EU) und EN 301 549 (Europa) gesetzlich vorgeschrieben. Die AA-Kontrastverhältnisse nicht zu erfüllen bedeutet, dass manche Nutzer deinen Text physisch nicht lesen können, und setzt deine Organisation Barrierefreiheits-Klagen aus. Designsysteme, die WCAG-Konformität von Anfang an einbauen, vermeiden teure Nachrüstungen. Kontrast während der Design-Token-Phase zu prüfen — bevor Komponenten gebaut werden — ist weit günstiger als die Prüfung eines ausgelieferten Produkts. Konforme Tokens direkt als CSS-Variablen oder Tailwind-v4-@theme-Werte zu exportieren, überbrückt die Lücke zwischen Designabsicht und Produktionscode.
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.
Gleiche Tags durchsuchen
Springe zu anderen Tools mit demselben Ablauf, Format oder Anwendungsfall.