Farbe und Gestaltung
Design beginnt hier mit Farbe: wie das Auge Licht in Farbe verwandelt, wie ein Bildschirm sie als drei Zahlen schreibt und wie du prüfst, ob ein Text gut lesbar bleibt.
Sieben Einheiten an einem Farbkörper
Das Fach hat bisher einen Kurs, Farbenlehre, mit sieben Einheiten. Die erste erklärt, wie wir Farben sehen. Die nächsten beiden behandeln RGB mit Hex-Codes und danach Farbton, Sättigung und Helligkeit. In der vierten baust du Farbharmonien, die fünfte vergleicht das Mischen von Licht mit dem Mischen von Druckfarbe, und die letzten beiden befassen sich mit Kontrast und mit Farbe in einem echten Design. Die meisten Einheiten nutzen dasselbe Modell, das du mit der Maus drehen kannst: einen RGB-Würfel aus 512 kleinen Blöcken oder dieselben Farben, umgeordnet zu einem HSL-Zylinder. Klick auf einen Punkt, und das Feld darunter zeigt seinen Hex-Code, seine HSL-Werte, seine Harmoniefarben und sein Kontrastverhältnis zu einem Hintergrund deiner Wahl.
Zapfen, Prismen und der RGB-Würfel
Ein roter Apfel enthält kein Rot. Er schluckt die kurzen und mittleren Wellenlängen des Sonnenlichts und wirft die langen zurück. Die Netzhaut hat etwa 6 Millionen Zapfen in drei Arten, und Farbe entsteht, wenn das Gehirn sie miteinander vergleicht. Deshalb können reines gelbes Licht und eine Mischung aus rotem und grünem Licht genau gleich aussehen. Newton zerlegte in den 1660er-Jahren Sonnenlicht mit Prismen und zeichnete 1704 in Opticks einen der ersten Farbkreise. Im Web reicht jeder Kanal von 0 bis 255, also ist rgb(0 0 0) Schwarz und rgb(255 255 255) Weiß. Ein Hex-Code besteht aus drei Paaren von Ziffern im Sechzehnersystem (Basis 16): In #2273c3 bedeutet das Paar c3 den Wert 12 × 16 + 3 = 195.
Winkel auf dem Farbkreis
HSL gibt den Farbton als Winkel an: 0deg ist Rot, 120deg Grün und 240deg Blau. Bei 0% Sättigung spielt der Farbton keine Rolle, und 50% Helligkeit ergibt die kräftigste Form eines Farbtons. Die Grenze dieses Modells wird offen benannt: Gelb und Blau mit derselben Helligkeit von 50% haben Leuchtdichten von 0.9278 und 0.0722. Sobald die Farben auf dem Kreis liegen, ist eine Harmonie eine Gruppe von Winkeln. Komplementäre Farbtöne liegen 180 Grad auseinander, eine Triade besteht aus drei Farbtönen im Abstand von 120 Grad, und ein geteilt komplementäres Schema nutzt 150 und 210 Grad. Achtung: Der Lichtfarbkreis setzt Blau gegenüber von Gelb, der Malerfarbkreis dagegen gegenüber von Orange. Druckfarben arbeiten umgekehrt wie Licht: Cyan nimmt Rot weg, Magenta nimmt Grün weg, Gelb nimmt Blau weg, und Druckereien geben Schwarz dazu, weil echte Druckfarben nur ein trübes Braun ergeben.
Das Verhältnis, das über die Lesbarkeit entscheidet
Ob ein Text lesbar ist, wird gemessen und nicht nach Augenmaß beurteilt. Die relative Leuchtdichte nach WCAG gewichtet die linearisierten Kanäle mit 0.2126 für Rot, 0.7152 für Grün und 0.0722 für Blau, und das Kontrastverhältnis ist (L1 + 0.05) / (L2 + 0.05), von 1:1 bis 21:1. Stufe AA verlangt 4.5:1 für Fließtext und 3:1 für großen Text und Bedienelemente; AAA verlangt 7:1. Grau #767676 auf Weiß erreicht 4.54:1 und besteht, während Rot #ff0000 nur 4.00:1 erreicht und für Fließtext durchfällt. Die letzte Einheit ergänzt WCAG 1.4.1: Farbe darf nie das einzige Mittel sein, um eine Information zu vermitteln, denn eine Rot-Grün-Sehschwäche betrifft etwa 8% der Männer. Plane zuerst die Helligkeitsstufen und dann die Farbtöne; im Modell erreichen das Markenorange und sein komplementäres Blau nur 1.06:1.
Fragen zu diesem Fach
Was bedeuten die Zahlen einer RGB-Farbe?
Sie bestimmen Rot-, Grün- und Blaukanal, im Webcode meist jeweils von null bis 255. Null schaltet einen Kanal aus, 255 ganz ein. Alle Kanäle auf null ergeben Schwarz, alle auf 255 Weiß. Hexfarben schreiben dieselben drei Kanäle als drei Paare von Ziffern zur Basis sechzehn und nutzen keine anderen Farben. Farbenlehre
Warum wirken zwei HSL-Farben mit gleicher Helligkeit unterschiedlich hell?
HSL-Helligkeit ist eine Modellkoordinate, kein direktes Maß der wahrgenommenen Helligkeit. Voll gesättigtes Gelb und Blau haben beide fünfzig Prozent HSL-Helligkeit, doch Gelb wirkt viel heller. Die relativen WCAG-Leuchtdichten sind 0.9278 und 0.0722. Gleiche HSL-Zahlen allein belegen daher keinen ausreichenden Text-Hintergrund-Kontrast. Farbenlehre
Warum bewirkt ein anderer Farbton bei null Sättigung nichts?
Bei null Sättigung liegt die Farbe auf der Grauachse des HSL-Modells. Der Farbton wirkt nicht mehr: Rot- und Cyanwinkel ergeben bei fünfzig Prozent Helligkeit dasselbe Grau. Die Helligkeit bleibt wichtig. Null Prozent erzeugen Schwarz, hundert Prozent Weiß, unabhängig vom Winkel im Farbkreis. Farbenlehre
Warum nutzt Druck zusätzlich Schwarz statt nur drei gemischte Farben?
Echte Cyan-, Magenta- und Gelbtinten sind unvollkommene Filter. Zusammen können sie ein schmutziges Dunkelbraun statt sauberes Schwarz ergeben. Drei Farbschichten nur für schwarzen Text zu drucken dauert außerdem lange und führt zu einem nassen Druckbild. CMYK ergänzt daher eine eigene schwarze Tinte. Echte Malfarben verhalten sich noch komplexer, weil Pigmente Licht auch streuen, nicht nur absorbieren. Farbenlehre
Welchen Kontrast braucht normaler Text für WCAG AA?
Normaler Text braucht mindestens 4.5:1, entsprechend großer Text 3:1. Das Verhältnis vergleicht relative Leuchtdichten von Vorder- und Hintergrund, nicht bloß Farbtöne. Rot #ff0000 auf Weiß ergibt 4.00:1. Das reicht für großen, nicht für normalen Text, obwohl die Farbwahl kräftig und deutlich wirkt. Farbenlehre