Guide
Der Kurs „Farben und Kontrast“ ist ein interaktives Tutorial mit 17 Lektionen, das dir beibringt, jede Farbnotation aus Design-Dateien und CSS zu lesen und mit einem messbaren Maßstab zu beurteilen, ob „diese beiden Farben zusammen lesbar sind“. Jede Lektion gibt dir ein bis drei Farbwähler und ein konkretes Ziel – die Helligkeit auf einen Wert bringen, den Kontrast über 4,5:1 heben, drei Farbtöne im Abstand von 120° finden, ein für Farbsehschwäche schwer unterscheidbares Paar unterscheidbar machen. Du ziehst einen Regler oder gibst einen Farbwert ein, und die Zahlenwerte, das Kontrast-Badge, das Farbrad und die Simulationstabelle aktualisieren sich in Echtzeit, während die Prüfung dir sagt, was noch fehlt.
Aktualisiert am 2026-09-094 sources13 min read
Der Kurs „Farben und Kontrast“ ist ein interaktives Tutorial mit 17 Lektionen, das dir beibringt, jede Farbnotation aus Design-Dateien und CSS zu lesen und mit einem messbaren Maßstab zu beurteilen, ob „diese beiden Farben zusammen lesbar sind“. Jede Lektion gibt dir ein bis drei Farbwähler und ein konkretes Ziel – die Helligkeit auf einen Wert bringen, den Kontrast über 4,5:1 heben, drei Farbtöne im Abstand von 120° finden, ein für Farbsehschwäche schwer unterscheidbares Paar unterscheidbar machen. Du ziehst einen Regler oder gibst einen Farbwert ein, und die Zahlenwerte, das Kontrast-Badge, das Farbrad und die Simulationstabelle aktualisieren sich in Echtzeit, während die Prüfung dir sagt, was noch fehlt.
Der Kurs besteht aus vier Abschnitten: Farbmodelle (was die Komponenten von RGB, HEX, HSL, HSV und OKLCH jeweils steuern und warum HSL-„Helligkeit“ nicht die wahrgenommene Helligkeit ist); Kontrast und WCAG (die Formel für die relative Leuchtdichte und was die drei Schwellen 4,5:1 / 3:1 / 7:1 jeweils regeln); Farbharmonien (komplementär, triadisch und analog als die drei Beziehungen am Farbrad); Barrierefreiheit in der Praxis (wie die Welt mit Rot-Grün-Sehschwäche aussieht, wie man ein farbfehlsicheres Schema wählt und wie man die Hauptfarben aus einem Logo zählt). Die letzte Lektion verlangt, alles zusammenzuführen und ein Drei-Farben-Set abzugeben, das alle Prüfungen besteht.
Etwa 45 Minuten bis zum Durcharbeiten. Für Frontend-Entwickler, Designer und alle, die Farben für Folien, Diagramme oder Plakate auswählen müssen; künstlerische Vorkenntnisse sind nicht nötig.
#RRGGBB / rgb() / hsl() akzeptieren.?lesson=n.Der Kurs selbst steht oben auf dieser Seite: links das Inhaltsverzeichnis, in der Mitte Regler ziehen oder Farbwerte eingeben, die Prüfung erscheint sofort.
Lektion 8 „WCAG AA: Fließtext braucht mindestens 4,5:1“ legt den Hintergrund auf Weiß fest und verlangt, dass du die Textfarbe auf einen Kontrast ≥ 4,5 bringst, ohne reines Schwarz zu verwenden. Hier ein Versuchsprotokoll:
Hintergrund (fest) #FFFFFF relative Leuchtdichte L = 1.000
Versuch 1 #3B82F6 L = 0.228 Kontrast = 1.05 / 0.278 = 3.68:1
Prüfung ✓ AA großer Text (≥ 3) ✕ AA Fließtext (≥ 4.5)
Versuch 2 #2563EB L = 0.153 Kontrast = 1.05 / 0.203 = 5.17:1
Prüfung ✓ AA großer Text ✓ AA Fließtext ✕ AAA Fließtext (≥ 7) → bestandenLektion 15 „Farbfehlsicher“ nimmt Orange #E76F51 als Referenz, die zweite Farbe startet als Grün #8AB17D: Bei normalem Sehen liegt ΔE bei etwa 0,20, die beiden sind auf einen Blick unterscheidbar; in der Deuteranopie-Simulation fällt der Wert auf 0,056 und die Farben liegen fast übereinander. Änderst du die zweite Farbe zu einem mittelhellen Blau (etwa #2563EB), steigt das simulierte ΔE wieder über 0,15, und beide Farben erreichen gegen Weiß mindestens 3:1 – das besteht die Lektion.
Jeder Pixel auf dem Bildschirm besteht aus roten, grünen und blauen Subpixeln, und rgb(37 99 235) ist die Intensität der drei Lichtquellen, 0 heißt aus, 255 volle Helligkeit. Alle drei auf 0 ergibt Schwarz, alle drei auf 255 Weiß, gleiche Werte ergeben Grau. HEX ist dieselbe Zahlenmenge in hexadezimaler Kurzschrift: In #2563EB steht 25 für 37, 63 für 99 und EB für 235, zwei Zeichen pro Kanal; die dreistellige Form #FFF wiederholt jede Stelle. Diese Notation heißt sRGB und ist der Standard-Farbraum des Webs und der allermeisten Displays; zwischen den Zahlen und der physikalischen Lichtintensität liegt außerdem eine Gammakurve, die bei der späteren Kontrastberechnung wichtig wird.
RGB ist bequem für Maschinen und unanschaulich für Menschen: Um ein Blau „heller“ zu machen, musst du drei Kanäle gleichzeitig ändern. HSL verwendet andere Koordinaten: Farbton H ist ein Winkel auf dem Farbrad (0° Rot, 120° Grün, 240° Blau, bei 360° zurück zu Rot), Sättigung S beschreibt, wie rein die Farbe ist (0 % Grau, 100 % am kräftigsten), und Helligkeit L, wie hell sie ist (0 % Schwarz, 50 % die reine Farbe, 100 % Weiß). Heller machen heißt L erhöhen, Pastellfarben haben niedriges S und hohes L – in Lektion 4 mischst du selbst eine. In CSS schreibst du hsl(221 83% 53%), dieselbe Farbe wie #2563EB.
In HSV (auch HSB genannt) ist V „der größte der drei Kanäle“: Bei V = 100 % ist die Farbe am kräftigsten oder hellsten, und S auf 0 ergibt Weiß statt Grau. In HSL ist L = 100 % immer Weiß. Design-Software bietet meist einen HSV-Wähler (ein Quadrat plus Farbtonstreifen), CSS unterstützt nur HSL; die beiden lassen sich verlustfrei ineinander umrechnen, aber die Komponenten bedeuten Unterschiedliches – HSV-Zahlen gehören nicht direkt in hsl().
hsl(60 100% 50%) ist reines Gelb, hsl(240 100% 50%) reines Blau, beide haben L = 50 %, doch Gelb wirkt deutlich heller. Der Grund: HSL ist nur eine geometrische Umsortierung der RGB-Werte und hat mit menschlicher Wahrnehmung nichts zu tun. OKLab / OKLCH (Ottosson, 2020) wurde an experimentelle Wahrnehmungsdaten angepasst, sodass gleiches L auch gleich hell bedeutet und Änderungen von C (Chroma) und h (Farbton) gleichmäßiger wirken. CSS Color 4 hat oklch() in den Standard aufgenommen, alle gängigen Browser unterstützen es. Lektion 6 verlangt, allein anhand der OKLCH-Werte eine Farbe auf Helligkeit L zwischen 0,68 und 0,72 und einen Farbton im Orangebereich zu bringen – du wirst sehen, dass HSL-L nicht dazu passt. Für Verläufe, Helligkeitsstufen desselben Farbtons und „gleich helle“ Farben über verschiedene Farbtöne hinweg ist OKLCH deutlich stabiler.
Der von WCAG definierte Kontrast ist nicht die Differenz zweier Zahlen, sondern das Verhältnis der relativen Leuchtdichten:
dabei ist und 0,05 bildet die Reflexion von Umgebungslicht nach. Die relative Leuchtdichte entsteht aus den drei sRGB-Kanälen nach Gammadekodierung und Gewichtung:
Grün wiegt am schwersten (0,7152), deshalb wirkt Grün gleicher Zahl viel heller als Blau; der Kontrast zwischen Schwarz und Weiß ist mit 21:1 die Obergrenze. In Lektion 7 rechnest du einmal an den Werten nach, danach übernimmt jede Lektion die Berechnung.
WCAG 2.2 verlangt in 1.4.3 (Stufe AA) für Fließtext einen Kontrast ≥ 4,5:1, für großen Text (etwa 24 px normal oder 18,5 px fett) ≥ 3:1; 1.4.11 verlangt auch für „Nicht-Text-Inhalte“ wie Symbole, Rahmen und Diagramme ≥ 3:1; 1.4.6 (Stufe AAA) hebt Fließtext auf ≥ 7:1. Das sind keine Geschmacksurteile, sondern Erfahrungswerte, mit denen auch Menschen mit mittlerer Sehschwäche noch lesen können – und in vielen Ländern die Grundlage von Vorschriften.
Lektion 9 verlangt ausdrücklich „über 7:1, aber nicht in reinem Schwarz“: #000 auf #FFF ergibt 21:1 und ist unproblematisch, doch große reine Schwarz-Weiß-Flächen blenden leicht; im Design nimmt man deshalb dunkle Grautöne wie #1A1A1A oder #24292F, die 7:1 mühelos übertreffen. Umgekehrt kommt hellgrauer Platzhaltertext #9CA3AF auf Weiß nur auf 2,5:1 – an dieser Stelle sind viele Websites nicht konform.
Der grundlegendste Teil der Farbenlehre sind die Winkelbeziehungen zwischen Farbtönen:
Das Farbrad des Kurses markiert diese drei Positionen zur aktuellen Farbe; die Prüfung schaut nur auf die Winkelabstände (kleine Abweichungen erlaubt), Sättigung und Helligkeit sind frei wählbar – in echten Paletten sind sie oft wichtiger als der Farbton.
Etwa 8 % der Männer und 0,5 % der Frauen haben eine Form von Farbsehschwäche; am häufigsten ist die Rot-Grün-Schwäche (Protanopie ohne Rot, Deuteranopie ohne Grün), die Blau-Gelb-Schwäche (Tritanopie) ist selten, vollständige Farbenblindheit sehr selten. Der Kurs simuliert mit dem physiologischen Modell von Machado et al. aus dem Jahr 2009: Die Farbe wird auf die Zapfenantworten der Betroffenen projiziert und zurück nach sRGB gerechnet. Gleichzeitig quantifiziert der euklidische Abstand ΔE im OKLab-Raum, wie weit zwei Farben auseinanderliegen: unter etwa 0,02 praktisch nicht unterscheidbar, ab 0,15 auf einen Blick zu trennen.
Lektion 14 lässt dich unter drei Farbpaaren das für Deuteranopen schwerste finden – Orange #E76F51 und Grün #8AB17D haben simuliert nur noch ΔE 0,056, während Rot und Cyan sowie Dunkelblau und Gelb wegen des großen Helligkeitsunterschieds klar bleiben; Lektion 15 lässt dich das Paar reparieren. Zwei Mittel helfen: Helligkeit auseinanderziehen (die Sehschwäche kostet vor allem Farbtoninformation, der Helligkeitsunterschied bleibt sichtbar) oder den Farbton wechseln (Rot/Grün zu Blau/Orange). Diagramme sollten zusätzlich Formen, Muster oder direkt Zahlen tragen und Informationen nicht allein über Farbe transportieren – das verlangt WCAG 1.4.1.
Der naive Weg, aus einem Bild die „Hauptfarbe“ zu ziehen, ist Pixelstatistik: Jeden Kanal des Pixels auf 16 Stufen quantisieren (4096 Körbe), zählen, sortieren und den Mittelwert der vordersten Körbe nehmen. Der Kurs zeichnet ein Beispiel-Logo auf ein Canvas, zählt aus und liefert eine nach Anteil sortierte Palette, aus der du ein Feld anklickst oder direkt im Bild pickst. Echte Werkzeuge (etwa Vibrant.js oder die dynamische Farbwahl von Material You) clustern zusätzlich, verwerfen fast weiße und fast schwarze Werte und gewichten nach Sättigung – das Prinzip ist dasselbe.
Die letzte Lektion führt alles zusammen: Gib drei Farben ab, deren Kontrast gegen Weiß jeweils ≥ 4,5:1 ist (direkt als Text oder Buttonbeschriftung nutzbar), deren Farbtonabstand untereinander ≥ 60° beträgt (unterscheidbar) und deren OKLCH-Helligkeit möglichst ähnlich liegt (einheitlich). Farbentscheidungen in echten Projekten sind ungefähr die Schnittmenge dieser drei Anforderungen: lesbar, unterscheidbar, einheitlich.
#F00 und reines Grün #0F0 liegen 120° auseinander und erreichen doch nur 2,9:1 – und Rot-Grün-Blinde können sie kaum trennen.Trage Text- und Hintergrundfarbe aus dem Design in die Farbwähler von Lektion 8 ein und du weißt sofort, ob AA erreicht wird; Platzhaltertexte, deaktivierte Zustände und Hilfstexte sind die häufigsten Problemstellen.
Die Simulationstabelle aus den Lektionen 14–15 prüft direkt, ob ein Satz Kategoriefarben für Rot-Grün-Blinde noch unterscheidbar ist; wenn nicht, Farbton wechseln oder Helligkeitsunterschied ergänzen und dazu Formen und Beschriftungen einbauen.
Hauptfarbe aus dem Logo ziehen (der Ansatz aus Lektion 16), mit den Farbrad-Beziehungen aus den Lektionen 11–13 eine Akzentfarbe finden und mit der Kontrastlektion die Textfarbe aussuchen – Lektion 17 ist die Übung zu genau diesem Ablauf.
oklch(0.7 0.15 250) ist kein Rätsel mehr: Du kennst die drei Zahlen als Wahrnehmungshelligkeit, Chroma und Farbton und weißt, warum Verläufe damit weicher sind als mit HSL.
Der Kontrast hängt an der relativen Leuchtdichte; gesättigte Blau-, Violett- oder Rottöne wirken „dunkel“, können aber eine hohe Leuchtdichte haben, und gegen Weiß verschiebt der +0,05-Term das Verhältnis. Schau auf den Kontrastwert unter „Zahlenwerte“ und senke HSL-L so weit, bis es reicht.
Nein. Alle Lektionen prüfen Wertebereiche (Kontrastschwelle, Farbtonabstand, ΔE-Schwelle); jede Farbe, die die Bedingungen erfüllt, besteht die Lektion.
Figma und Sketch setzen im Farbwähler noch überwiegend auf HSB, aber CSS kennt oklch() direkt; das Panel „Zahlenwerte“ zeigt alle fünf Schreibweisen – kopiere einfach die Zeile, die du brauchst.
Machado 2009 ist eines der Modelle, das Forschung und gängige Werkzeuge (Chrome DevTools, Color Oracle) verwenden, und für die Vollausprägung eine verlässliche Näherung; individuelle Unterschiede und schwächere Ausprägungen lassen sich mit einer einzelnen Matrix nicht abbilden.
Nein, der Fortschritt liegt nur im localStorage des aktuellen Browsers; mit „Diese Lektion teilen“ kannst du per Link an derselben Lektion weiterarbeiten, die abgeschlossenen Lektionen wandern aber nicht mit.
Der Kurs läuft vollständig lokal im Browser: Farbumrechnung, Kontrast, Farbsehschwäche-Simulation und Pixelstatistik sind reine Berechnungen auf der Seite und fragen keinen Server; das Beispiel-Logo zeichnet die Seite selbst auf einem Canvas, es werden keine externen Bilder geladen; der Fortschritt liegt im lokalen localStorage.
hsl() und oklch(): https://www.w3.org/TR/css-color-4/(abgerufen am 2026-09-09)Aktualisiert am 2026-09-09
17 Stationen: Bedeutung von RGB, HEX, HSL, HSV und OKLCH, WCAG-Kontrast, Komplementär-, Triaden- und Analogfarben, Farbsehsimulation und Markenfarben-Extraktion, Regler mit Sofortprüfung
Dieses Werkzeug ist noch nicht vollständig übersetzt; einige Inhalte nutzen die Ausgangssprache oder die Rückfallsprache.
ZielZiehen Sie die Schieberegler R, G und B, um orange #FF8000 (R=255, G=128, B=0) zu erhalten.
Bildschirme mischen rotes, grünes und blaues Licht (additiv): Alle drei eingeschalteten LEDs sind weiß, alle ausgeschalteten LEDs sind schwarz. Jeder Kanal läuft von 0 bis 255, was 256³ ≈ 16,7 Millionen Farben ergibt. #FF8000 bedeutet Rot voll, Grün halb, Blau aus – Orange. Bei der Beurteilung wird der Wahrnehmungsabstand ΔE (OKLab) verwendet, sodass Sie nicht jede Ziffer genau treffen müssen. mit bloßem Auge nicht erkennbar ist, gilt als Pass.