Wie wähle ich Farben, die zusammenpassen?
Eine Harmonie ist eine Regel über Positionen auf dem Farbkreis, mehr Geheimnis steckt nicht dahinter. Man geht von einem Farbton aus und leitet die übrigen über einen festen Winkel ab. Das ist reproduzierbar — und genau das tut dieses Werkzeug.
Die gewählte Harmonie bestimmt die Wirkung: zwei gegenüberliegende Farben knallen, fünf benachbarte beruhigen. Die sechs angebotenen Regeln:
| Harmonie | Winkel auf dem Farbkreis | Wirkung |
|---|---|---|
| Komplementär | 180° | maximaler Kontrast, ideal für einen Aktionsbutton |
| Analog | ±20° und ±40° | weich und stimmig, ohne Spannungspunkt |
| Triade | 120° | lebendig und ausgewogen, drei gleich starke Pole |
| Tetrade | 90° | reich, aber schwierig: eine Farbe muss dominieren |
| Geteilt komplementär | 150° und 210° | die Kraft des Komplementären, ohne die Härte |
| Monochrom | 0°, wechselnde Helligkeit | ein einziger Farbton, kein Risiko danebenzugreifen |
Warum kann eine schöne Palette unlesbar sein?
Weil das Auge über Harmonie urteilt, nicht über Lesbarkeit. Zwei Farben können nebeneinander wunderbar aussehen und trotzdem einen Text ergeben, den niemand lesen kann. Das Kriterium ist nicht ästhetisch, es ist eine Zahl: das Kontrastverhältnis nach WCAG 2.1.
Es reicht von 1:1 (zwei identische Farben) bis 21:1 (Schwarz auf Weiß). Die offiziellen Schwellen:
| Verwendung | Stufe AA | Stufe AAA |
|---|---|---|
| Normaler Text | 4,5:1 | 7:1 |
| Großer Text (18 pt oder 14 pt fett) | 3:1 | 4,5:1 |
| Bedienelemente, Symbole | 3:1 | — |
Muss man sich wirklich um Barrierefreiheit kümmern?
In Deutschland und der EU ist es eine rechtliche Pflicht, nicht bloß guter Stil. Die EU-Richtlinie 2016/2102 schreibt Barrierefreiheit für Websites öffentlicher Stellen vor, und das Barrierefreiheitsstärkungsgesetz (BFSG) weitet die Pflicht ab Juni 2025 auf viele private Angebote aus. Der Textkontrast gehört dazu.
Unabhängig von der Vorschrift entscheidet der Kontrast darüber, ob dein Text auf einem Handydisplay in praller Sonne noch lesbar ist. Das betrifft keine Minderheit, sondern früher oder später alle.
Was sieht ein farbenblinder Mensch von deiner Palette?
Etwa 8 % der Männer und 0,5 % der Frauen haben eine Farbsehschwäche. Die häufigste, die Deuteranopie, macht Rot und Grün schwer unterscheidbar — genau das Paar, das alle Welt für „Fehler“ und „Erfolg“ benutzt.
Das Werkzeug simuliert die drei Hauptformen mit den Matrizen von Machado, Oliveira und Fernandes (2009), angewendet im linearen RGB-Raum. Wenn deine Farben in einer dieser Ansichten gleich aussehen, geht die allein über Farbe transportierte Information verloren: es braucht ein zweites Signal, ein Symbol oder ein Wort.
Wie bekomme ich die Palette in meinen Code?
Vier Formate mit einem Klick: CSS-Variablen, SCSS-Variablen, eine Tailwind-Konfiguration und JSON. Fertiger Text zum Einfügen, ohne Konto und ohne Download.
Ein Rat, der viel Nacharbeit spart: benenne deine Farben nach ihrer Funktion (Hintergrund, Akzent, Warnung), nicht nach ihrem Farbton. Eine Variable namens „blau“, die ein halbes Jahr später grün ist, ist eine Falle, in die jeder einmal tappt.
Häufige Fragen
Was ist ein Kontrastverhältnis genau?
Eine Zahl zwischen 1 und 21, die die relative Leuchtdichte zweier Farben vergleicht. Die Formel stammt aus der WCAG-2.1-Spezifikation: sie korrigiert jeden Kanal per Gamma und gewichtet dann Rot, Grün und Blau nach der Empfindlichkeit des Auges (Grün zählt 71 %).
Warum ergeben mein Rot und mein Grün schlechten Kontrast, obwohl sie so verschieden sind?
Weil der WCAG-Kontrast die Helligkeit misst, nicht den Farbton. Ein Rot und ein Grün gleicher Helligkeit liegen nahe bei 1:1: in Graustufen sind sie nicht zu unterscheiden — und für viele farbenblinde Menschen ebenso wenig.
Werden meine Farben irgendwohin gesendet?
Nein. Alle Berechnungen laufen in deinem Browser. Nichts wird übertragen, nichts gespeichert.
Kann ich von einer Farbe aus dem Corporate Design ausgehen?
Ja, das ist der Hauptzweck: trage deine Markenfarbe als Grundfarbe ein, und das Werkzeug baut den Rest darum herum auf.
Ist die Farbenblindheits-Simulation exakt?
Sie ist eine anerkannte Näherung, keine medizinische Darstellung. Sie reicht völlig aus, um zwei Farben zu erkennen, die verwechselt werden; einen Test mit echten Menschen ersetzt sie nicht.