Farbpalette + WCAG-Checker

Prüfe Kontrastverhältnisse, AA-/AAA-Konformität, generiere Palettenvarianten und exportiere CSS- oder Tailwind-v4-Farb-Tokens lokal.

Alle Farbberechnungen laufen lokal in deinem Browser. Keine Uploads, keine Konten, und keine Designdaten verlassen dein Gerät.

Vordergrundfarbe

Hintergrundfarbe

Kontrastverhältnis 4.51:1
AA Fließtext Bestanden
AAA Fließtext Nicht bestanden
AA großer Text Bestanden

Primärfarben-Umrechnungen

HEX #1A73E8
RGB rgb(26, 115, 232)
HSL hsl(214 82% 51%)
OKLCH oklch(0.574 0.195 257.9)

Generierte Palette

Primär
Komplementär
Analog links
Analog rechts
Dunkelton
Aufhellung

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.