HEX, RGB und HSL beschreiben eine Farbe auf drei Arten
HEX schreibt Rot, Grün und Blau als je zwei Hexadezimalziffern. #8B5CF6 bedeutet R = 139, G = 92 und B = 246, genau die RGB-Werte. Die dreistellige Kurzform #F00 verdoppelt jede Ziffer und ist damit identisch mit #FF0000.
HSL zerlegt eine Farbe in Farbton, Sättigung und Helligkeit. Der Farbton ist ein Winkel auf dem Farbkreis, 0 und 360 Grad sind also dasselbe Rot; die Sättigung ist der Abstand von Grau und die Helligkeit die Position zwischen Schwarz und Weiß. Deshalb ist HSL praktischer, wenn Sie eine hellere Variante derselben Farbe möchten.
Das Kontrastverhältnis vergleicht die relative Leuchtdichte zweier Farben und reicht von 1:1 bis 21:1. Jeder Kanal wird gammakorrigiert, mit 0,2126, 0,7152 und 0,0722 gewichtet und aufsummiert; vor dem Teilen wird zum helleren und zum dunkleren Wert jeweils 0,05 addiert. Grün hat das größte Gewicht, weil das menschliche Auge dafür am empfindlichsten ist.
Was bei der Farbwahl übersehen wird
Eine Kombination, die auf dem Bildschirm eines Designers gut aussieht, ist oft schlecht lesbar. Die Richtlinien zur Barrierefreiheit im Web verlangen 4,5:1 für Fließtext und 3:1 für großen oder fetten Text ab 18 pt. Hellgraue Schrift wirkt im Entwurf edel und fällt regelmäßig durch diese Schwelle.
Kontrast allein nach dem Helligkeitseindruck zu beurteilen, führt in die Irre. Gelb auf Weiß hat fast keinen Kontrast, weil beide hell sind, und Blau auf Schwarz fast keinen, weil beide dunkel sind. Ein großer Abstand auf dem Farbkreis erzeugt keinen Kontrast; ein Unterschied in der Leuchtdichte schon.
Wer Informationen allein über Farbe transportiert, schließt farbenblinde Leser aus. Wenn Rot und Grün einen Anstieg und einen Rückgang markieren, gehört ein Pfeil oder Vorzeichen daneben, und selbst die Konvention unterscheidet sich: Märkte in den USA und Europa zeigen Anstiege in Grün, Korea, Japan und China dagegen in Rot.