Farbpaletten-Generator: Website-Farben mit geprüftem Kontrast

So entsteht das Ergebnis

Der Generator rechnet im Farbraum OKLCH aus CSS Color 4: Helligkeit, Buntheit und Farbton, ungefähr so, wie das Auge sie wahrnimmt. Gleiche Stufen wirken deshalb bei jeder Grundfarbe ähnlich hell.

Der Weg zum Ergebnis

1. Der Hex-Wert wird in OKLCH umgerechnet. Kurzformen wie #16A gelten als #1166AA.
2. Hauptfarbe: 11 Stufen von 50 bis 950 im Farbton Ihrer Grundfarbe. Die Helligkeit ist je Stufe fest, von 97,5 % bis 26,5 %. Die Buntheit ist die Ihrer Grundfarbe mal einem Faktor je Stufe, von 10 % in Stufe 50 über 100 % in den Stufen 500 und 600 bis 52 % in Stufe 950.
3. Die Stufe, deren Helligkeit Ihrer Grundfarbe am nächsten liegt, ist Ihre Grundfarbe selbst, unverändert.
4. Akzentfarbe: dieselben Stufen, der Farbton um 180°, 120° oder 30° gedreht, je nach Art.
5. Neutralfarben: dieselben Stufen im Farbton Ihrer Grundfarbe, mit 12 % ihrer Buntheit, höchstens 0,015 – ein Grau mit einem Hauch Ihrer Farbe.
6. Kann ein Bildschirm eine Stufe in sRGB nicht darstellen, senkt der Generator ihre Buntheit, bis es geht. Helligkeit und Farbton bleiben.
7. Kontrast nach WCAG 2.1: Aus jeder Farbe entsteht ihre relative Leuchtdichte L, das Verhältnis ist (L1 + 0,05) ÷ (L2 + 0,05) mit L1 der helleren Farbe. Bestanden heißt mindestens 4,5:1 für normalen Text und 3:1 für große Schrift und Bedienelemente.
8. Angezeigt wird das Verhältnis auf zwei Stellen abgerundet, damit zum Beispiel 4,499:1 nicht als bestanden erscheint. Bei „Akzent-Schaltfläche“ und „Fläche in Ihrer Grundfarbe“ wählt der Generator die besser lesbare Schrift aus Weiß und Neutralfarben 950.
9. CSS-Variablen und Hex-Liste enthalten alle Stufen aller drei Farben.

Annahmen und Grenzen

• Geprüft werden typische Paare einer Website: „Fließtext“, „Nebentext“, „Links und Überschriften“, „Hauptschaltfläche“, „Hinweisfläche“, „Akzent-Schaltfläche“, „Dunkler Bereich“, „Fläche in Ihrer Grundfarbe“, „Rahmen von Eingabefeldern“. Andere Kombinationen prüfen Sie mit denselben Grenzwerten selbst.
• Hat Ihre Grundfarbe fast keine Buntheit (unter 0,02), ist sie ein Grau ohne Farbton. Dann bleiben alle drei Reihen grau, und der Generator sagt das dazu.
• Die Werte gelten für Volltonflächen. Schrift auf Fotos, Verläufen oder halbtransparenten Flächen misst der Generator nicht; prüfen Sie dort die ungünstigste Stelle.
• Für Text in Logos und in inaktiven Bedienelementen verlangt WCAG keinen Mindestkontrast.
• Stufen von 50 bis 950 und Namen wie --color-primary-600 sind eine verbreitete Schreibweise, keine Norm. Wie eine Farbe wirkt, hängt auch vom Bildschirm ab; die Hex-Werte gelten für sRGB.

Quellen

Stand: Oktober 2026. Grenzwerte und Formeln stammen aus den Richtlinien des W3C, die Rechtslage aus dem Gesetzestext.

• W3C, Web Content Accessibility Guidelines (WCAG) 2.1: Erfolgskriterien 1.4.3 (Kontrast, Minimum) und 1.4.11 (Nicht-Text-Kontrast) sowie die Begriffe Kontrastverhältnis, relative Leuchtdichte und große Schrift. w3.org/TR/WCAG21
• W3C, WCAG 2.2: Erfolgskriterien 1.4.3 und 1.4.11 mit unverändertem Wortlaut. w3.org/TR/WCAG22
• W3C, CSS Color Module Level 4: Farbräume OKLab und OKLCH und ihre Umrechnung aus sRGB. w3.org/TR/css-color-4
• Björn Ottosson, Herleitung des Farbraums OKLab (2020) mit den Umrechnungsmatrizen, die der Generator verwendet. bottosson.github.io
• § 1 Abs. 3 Nr. 5, § 2 Nr. 17 und § 3 Abs. 3 BFSG: Anwendungsbereich, Begriff des Kleinstunternehmens und Ausnahme für Kleinstunternehmen mit Dienstleistungen. gesetze-im-internet.de
• ETSI, EN 301 549 V3.2.1 (2021-03), Abschnitte 9.1.4.3 und 9.1.4.11: Webseiten müssen die Erfolgskriterien 1.4.3 und 1.4.11 der WCAG 2.1 erfüllen. etsi.org (PDF)