Farbpaletten-Generator mit Kontrastprüfung

So nutzt du das Werkzeug

Gib oben den Farbcode deiner Marke ein, wähle eine Farbe aus oder lade dein Logo. Aus einem Bild liest das Werkzeug die Farben aus und nimmt die häufigste kräftige als Ausgang; eine andere tippst du an. Hast du noch keine Markenfarbe, findest du unter „Noch keine Markenfarbe?“ Vorschläge.

Sofort entsteht eine Beispielseite in hellen und dunklen Farben. Darüber steht in einem Satz, wofür deine Farbe taugt, etwa „als Textfarbe auf Weiß zu hell, aber als Knopf mit dunkler Schrift geeignet“. Unter „Anpassen“ wählst du eine Akzentfarbe, die Art der Grautöne, den Hintergrund und ob Links unterstrichen sind. Die Ansicht für Farbsehschwäche zeigt, wie die Seite bei Rot-, Grün- oder Blaublindheit aussehen kann.

Darunter stehen alle Farben mit ihren Kontrastwerten, die Farbstufen von 50 bis 950 und fertiger Code für CSS, Tailwind CSS und Design Tokens. Den Stand kannst du als Link teilen oder drucken. Alles läuft in deinem Browser; ein Logo wird nicht hochgeladen.

Welche Farben eine Website braucht

Viele Generatoren liefern fünf gleichrangige Farben. Offen bleibt dann, welche davon Text, Link oder Knopf wird und ob das lesbar ist. Designsysteme wie Material Design, IBM Carbon und Radix gehen anders vor: Aus jeder Farbe entsteht eine Skala von hell bis dunkel, und darauf zeigen Rollen, also feste Aufgaben auf der Website. Der dunkle Modus ist eine eigene Zuordnung der Rollen, keine Umkehrung. Material nimmt für die Hauptfarbe im Hellen zum Beispiel den Ton 40, im Dunklen den Ton 80.

Deine Markenfarbe bleibt dabei genau erhalten, als Markenfläche und, wo es reicht, als Knopf. Für Links nimmt das Werkzeug einen dunkleren Ton aus derselben Skala, im dunklen Modus einen helleren; Text steht in einem fast schwarzen Grau. So bleibt die Seite in deiner Farbwelt und trotzdem lesbar.

Kontrast: die Grenzwerte nach WCAG 2.2

Maßstab sind die Web Content Accessibility Guidelines (WCAG) 2.2 des W3C. Stufe AA ist das übliche Ziel. Die europäische Norm EN 301 549 verweist in der Fassung V4.1.1 vom 2. September 2026 auf WCAG 2.2 Stufe A und AA; ihre Zitierung im Amtsblatt der EU wird für Ende November bzw. Mitte Dezember 2026 erwartet. Die Grenzwerte für Farben ändern sich dadurch nicht.

• Nicht runden. Laut W3C erfüllt 4,499 : 1 die Grenze 4,5 : 1 nicht. Das Werkzeug zeigt die Werte deshalb abgerundet.
• Knöpfe brauchen keinen Rahmen. WCAG verlangt nicht, dass ein Knopf sich als Fläche abhebt, wenn seine Beschriftung lesbar ist. Geprüft wird die Schrift auf der Knopffläche. Im dunklen Modus wählt das Werkzeug trotzdem einen Knopfton, der sich mit 3 : 1 vom Hintergrund abhebt, damit der Knopf sichtbar bleibt.
• Logos sind ausgenommen. Für Logos und Markennamen gilt kein Mindestkontrast. Deine Markenfarbe darf also im Logo bleiben, auch wenn sie als Text zu hell wäre.
• Links ohne Unterstreichung sind nur mit wenigen Farben möglich. Bei Fließtext in Fast-Schwarz auf Weiß bleibt für den Link ein schmales Fenster der Helligkeit; schon bei einem dunklen Grau wie #333333 gibt es keine Farbe, die beide Bedingungen erfüllt. Unterstrichene Links sind der sichere Weg.

Ein technischer Befund ist keine rechtliche Bewertung. Ob deine Website die Anforderungen des Barrierefreiheitsstärkungsgesetzes (BFSG) erfüllt, hängt von viel mehr ab als von Farben. Die ganze Seite prüft der Barrierefreiheits-Check automatisch, soweit das ein Programm kann.

Farbsehschwäche: Farbe nie allein

Etwa 8 % der Männer und 0,4 % der Frauen europäischer Herkunft haben eine Rot-Grün-Schwäche (Birch 2012). Deshalb verlangt WCAG 2.2, dass Farbe nie das einzige Mittel ist, um etwas zu zeigen. Ein roter Rahmen allein reicht für einen Fehler nicht; dazu gehören ein Symbol und ein Satz.

Die Ansicht für Farbsehschwäche im Werkzeug rechnet die Farben um: Protanopie (Rotblindheit) und Deuteranopie (Grünblindheit) nach Viénot 1999, Tritanopie (Blaublindheit) nach Brettel 1997, wie es die Vergleichsstudie von DaltonLens empfiehlt. Simuliert wird jeweils die stärkste Form; bei der häufigeren Rot-Grün-Schwäche sind die Unterschiede kleiner. Das ist eine Annäherung am Bildschirm; wie ein Mensch Farben sieht, ist individuell. Liegen zwei Farben nach der Umrechnung sehr nah beieinander, etwa Fehler-Rot und Erfolgs-Grün, weist das Werkzeug darauf hin.

So rechnet das Werkzeug

Farbstufen in OKLCH. Die Stufen entstehen im Farbraum OKLCH, den auch Tailwind CSS in Version 4 und viele Designsysteme nutzen. Er ist an die Wahrnehmung angelehnt: Gleiche Helligkeit sieht annähernd gleich hell aus. In HSL ist das nicht so. Bei 50 % Helligkeit erreicht Gelb gegen Weiß nur 1,07 : 1, Blau dagegen 8,59 : 1. Farben, die ein Bildschirm nicht darstellen kann, holt das Werkzeug über weniger Buntheit zurück, statt sie abzuschneiden; so bleibt der Farbton erhalten.

Jedes Paar wird gerechnet. Auch OKLCH garantiert keinen Kontrast. Nach unserer Rechnung liegen Farben mit derselben Helligkeit von 60 % und der Buntheit 0,1 je nach Farbton zwischen 3,73 und 4,18 : 1 gegen Weiß. Faustregeln über Helligkeitsstufen sind am Rand deshalb oft knapp daneben. Das Werkzeug prüft jedes verwendete Farbpaar mit der Formel aus WCAG 2.2.

APCA nutzt das Werkzeug nicht. Das Verfahren APCA ist als Nachfolger im Gespräch, aber nirgends verbindlich. Der Arbeitsentwurf von WCAG 3.0 vom 10. September 2026 lässt das Kontrastverfahren ausdrücklich offen, und das W3C rät, jetzt WCAG 2.2 zu erfüllen.

Grenzen. Geprüft werden die Farben, die das Werkzeug vorschlägt, nicht deine fertige Website. Text auf Bildern, Verläufe, halbtransparente Flächen, sehr dünne Schriften und die Darstellung auf einzelnen Bildschirmen kann es nicht beurteilen. Die Beispielseite ist vereinfacht. Die Formate für Tailwind CSS (Versionen 3 und 4) und Design Tokens (Fassung 2025.10 der Design Tokens Community Group, kein W3C-Standard) entsprechen dem Stand vom Oktober 2026.

Stand: 27. Oktober 2026 · Nächste Prüfung: Dezember 2026 (Amtsblatt-Zitierung der EN 301 549 V4.1.1)

Häufige Fragen

Wie viele Farben braucht eine Website?

Meist eine Markenfarbe, Grautöne für Text und Flächen und die Farben für Meldungen. Eine Akzentfarbe ist freiwillig. Jede Farbe hat dabei mehrere Stufen, damit es für Text, Flächen und Rahmen jeweils einen passenden Ton gibt.

Welcher Kontrast ist Pflicht?

Nach WCAG 2.2 Stufe AA 4,5 : 1 für normalen Text, 3 : 1 für großen Text sowie für Rahmen von Eingabefeldern, Fokusrahmen und wichtige Grafiken. Ob die Regeln für deine Website rechtlich gelten, etwa über das BFSG, ist eine eigene Frage.

Warum ist meine Markenfarbe als Text zu hell?

Helle und kräftige Farben wie Gelb, Orange oder Türkis erreichen auf Weiß selten 4,5 : 1. Sie eignen sich trotzdem für Flächen und Knöpfe mit dunkler Schrift. Für Links nimmt das Werkzeug einen dunkleren Ton derselben Farbe, für Text ein fast schwarzes Grau.

Brauche ich einen dunklen Modus?

Nein, er ist freiwillig. Wenn du ihn anbietest, braucht er eigene Farben, die das Werkzeug gleich mitliefert. Der CSS-Export schaltet sie über die Einstellung des Geräts um (prefers-color-scheme) oder über einen eigenen Umschalter mit dem Attribut data-theme. Die Vorlagen für Tailwind CSS nutzen nur die Einstellung des Geräts.

Was ist OKLCH?

Eine Schreibweise für Farben aus Helligkeit (L), Buntheit (C) und Farbton (H), die alle aktuellen Browser verstehen. Sie eignet sich besser für Farbstufen als HSL. Für deine Website nimmst du am besten die Hex-Werte: Die angezeigten OKLCH-Werte sind gerundet und können um eine Stelle vom Hex-Wert abweichen.

Wird mein Logo hochgeladen?

Nein. Das Werkzeug liest die Farben aus einer verkleinerten Kopie in deinem Browser. Das Bild verlässt dein Gerät nicht, wird nicht gespeichert und steht nicht im Link.