Farbpaletten-Generator
Harmonische Farbpaletten erzeugen und den Kontrast nach WCAG prüfen.
Farbpaletten aus einer Grundfarbe erzeugen (komplementär, analog, triadisch) und den Kontrast nach WCAG AA und AAA prüfen, in HEX, RGB und HSL.
Farbpaletten und lesbare Kontraste
Auf einen Blick
- Für normalen Text verlangen die Web-Richtlinien WCAG 2.1 auf Stufe AA ein Kontrastverhältnis von mindestens 4,5 zu 1, für große Schrift 3 zu 1.
- Stufe AAA verlangt 7 zu 1 für normalen und 4,5 zu 1 für großen Text.
- Schwarz auf Weiß hat das höchste mögliche Verhältnis von 21 zu 1; das Grau #767676 auf Weiß erreicht gerade 4,5 zu 1.
- Seit dem 28. Juni 2025 gilt in Deutschland das Barrierefreiheitsstärkungsgesetz, das für viele Online-Shops und digitale Dienste Stufe AA fordert.
Stand: Oktober 2026. Quelle: Web Content Accessibility Guidelines (WCAG) 2.1, Erfolgskriterien 1.4.3 und 1.4.6; Barrierefreiheitsstärkungsgesetz (BFSG).
Wie Farbharmonien entstehen
Der Generator geht von einer Grundfarbe aus und dreht sie auf dem Farbkreis weiter. Komplementärfarben liegen sich gegenüber (180 Grad) und erzeugen den stärksten Gegensatz, etwa für eine Schaltfläche, die auffallen soll. Analoge Farben liegen auf dem Farbkreis nebeneinander und wirken ruhig und zusammenhängend. Eine Triade verteilt drei Farben im Abstand von 120 Grad und wirkt lebhaft, verlangt aber eine klare Hauptfarbe, damit die Gestaltung nicht unruhig wird.
Jede Farbe gibt das Werkzeug in drei Schreibweisen aus: HEX (#1E6F5C) für HTML und CSS, RGB für Bildbearbeitung und HSL, in dem sich Helligkeit und Sättigung besonders einfach anpassen lassen.
Wie der Kontrast berechnet wird
Grundlage ist die relative Leuchtdichte beider Farben, also wie hell das Auge sie wahrnimmt. Das Verhältnis ergibt sich aus (hellere Leuchtdichte + 0,05) geteilt durch (dunklere Leuchtdichte + 0,05). Gelb und Grün erscheinen dem Auge viel heller als Blau; ein gesättigtes Blau auf Schwarz ist deshalb oft schlechter lesbar, als es auf den ersten Blick scheint.
Beispiel: graue Schrift auf weißem Grund
Das helle Grau #999999 auf Weiß erreicht nur 2,8 zu 1 und fällt für Fließtext durch. #767676 schafft 4,5 zu 1 und erfüllt Stufe AA. Für Stufe AAA muss das Grau bis etwa #595959 abgedunkelt werden.
Was „große Schrift“ bedeutet
Als groß gilt Text ab 18 Punkt (rund 24 Pixel) oder ab 14 Punkt (rund 18,7 Pixel) in Fettschrift. Für Bedienelemente wie Rahmen von Eingabefeldern und Symbole verlangt WCAG 2.1 zusätzlich einen Kontrast von 3 zu 1 zur Umgebung. Farbe allein darf nie die einzige Information sein: Ein Pflichtfeld nur rot zu markieren, reicht für Menschen mit Rot-Grün-Sehschwäche nicht aus.