# Farbpalette + WCAG-Checker

> Kostenloser Farbpaletten-Generator mit WCAG-AA-/AAA-Kontrastprüfungen, Vorschlägen für bestehende Farben, CSS-Variablen, Tailwind-v4-Export und PNG-Farbmustern.

- **Category:** Entwickler
- **URL:** https://www.teafun.cyou/tools/color-palette-wcag/
- **Privacy:** Runs entirely in your browser — no uploads, no account, no tracking.
- **Also known as:** wcag contrast, color contrast, palette checker, color picker, colour picker, color palette, contrast checker, accessibility contrast
- **Related tools:** [Farbenblindheitstest](https://www.teafun.cyou/tools/colorblind/), [Bildschirm-Bildwiederholfrequenz](https://www.teafun.cyou/tools/monitor/), [Grundriss-Tool](https://www.teafun.cyou/tools/floor-plan/)
- **Tags:** Color, Design, Display

## About

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

## 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.

_SEO title: WCAG-Farbpaletten-Checker – Barrierefreies Farbtool | TeaFun_

## FAQ

### 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.