Farbschreibweisen und Kontrast

Auf dem Bildschirm ist jede Farbe eine Mischung aus Rot, Grün und Blau, jeweils von 0 bis 255: das ist RGB, und HEX ist dasselbe hexadezimal, zwei Ziffern pro Kanal. HSL und HSV beschreiben dieselbe Farbe anschaulicher, als Farbton auf dem Farbkreis, Sättigung und Helligkeit, und werden deshalb für hellere oder dunklere Varianten genutzt.

Der Druck arbeitet umgekehrt: Er beginnt beim weißen Papier und nimmt mit Cyan, Magenta, Gelb und Schwarz Licht weg, CMYK. Die genaue Umrechnung hängt von Papier und Maschine ab; die hier gezeigte ist die theoretische, gut für einen Eindruck, nicht für eine Druckdatei.

Der WCAG-Kontrast misst, wie gut sich Text vom Hintergrund abhebt, von 1:1 bis 21:1, anhand der relativen Leuchtdichte, die Grün viel stärker gewichtet als Blau, wie das Auge. Die Richtlinien verlangen mindestens 4,5:1 für normalen und 3:1 für großen Text; 7:1 ist Stufe AAA.

Häufige Fehler

  • Die Textfarbe nach Gefühl wählen: Ein kräftiges Gelb wirkt stark, ist aber sehr hell, und weißer Text darauf ist unlesbar.
  • Erwarten, dass das berechnete CMYK wie am Bildschirm gedruckt wird: Viele leuchtende RGB-Farben sind nicht druckbar.
  • Die Transparenz vergessen: Eine Farbe mit Alpha ändert Aussehen und Kontrast je nach Untergrund.

Häufige Fragen

Welcher Kontrast ist für Barrierefreiheit nötig?

WCAG 2 verlangt 4,5:1 für normalen Text (Stufe AA), 3:1 für großen Text ab 24 px oder 19 px fett und 7:1 für Stufe AAA.

Was ist der Unterschied zwischen HSL und HSV?

Beide nutzen Farbton und Sättigung. Bei HSL ist 100 % Helligkeit immer Weiß und 50 % die reine Farbe; bei HSV ist 100 % Hellwert die reine Farbe in voller Leuchtkraft.

Wie schreibt man eine transparente Farbe?

Mit einem Alphakanal: #185FA580 als achtstelliges HEX oder rgba(24, 95, 165, 0.5). Alpha reicht von 0, durchsichtig, bis 1, deckend.

So funktioniert diese Berechnung

HEX #RRGGBB: jedes Paar ist ein Kanal von 00 bis FF. HSL: mit Maximum und Minimum der normierten Kanäle ist L = (max + min) / 2, S = (max − min) / (1 − |2L − 1|), H aus dem Winkel des dominanten Kanals. CMYK: K = 1 − max, C = (1 − R − K) / (1 − K) und so weiter. Kontrast = (L1 + 0,05) / (L2 + 0,05), mit Leuchtdichte L = 0,2126 R + 0,7152 G + 0,0722 B auf den linearisierten Kanälen.