HEX・RGB・HSL はひとつの色の三つの表し方
HEX は赤・緑・青をそれぞれ十六進法の二桁で書きます。#8B5CF6 は R が139、G が92、B が246という意味で、RGB の値そのものです。三桁の略記 #F00 は各桁を二重にしたもので、#FF0000 と同じです。
HSL は色を色相・彩度・明度に分けます。色相は色環上の角度なので0度と360度は同じ赤です。彩度は灰色からの距離、明度は黒と白の間の位置です。同じ色の明るい版がほしいときに HSL が扱いやすいのは、このためです。
コントラスト比は二色の相対輝度を比べたもので、1:1から21:1までの値を取ります。各チャンネルをガンマ補正し、0.2126・0.7152・0.0722で重みづけして足し、明るいほうにも暗いほうにも0.05を加えてから割ります。緑の重みがいちばん大きいのは、人の目が緑に最も敏感だからです。
色を選ぶときに見落とされること
デザイナーの画面できれいに見える組み合わせが、読めないことはよくあります。ウェブアクセシビリティの指針は本文に4.5:1、18ポイント以上の大きな文字や太字に3:1を求めます。淡い灰色の文字はモックアップでは洗練されて見えますが、この基準をくり返し下回ります。
明るさだけでコントラストを判断すると誤ります。白地の黄色はどちらも明るいのでほとんど差がなく、黒地の青はどちらも暗いのでやはり差がありません。色環上で遠いことがコントラストを作るのではなく、輝度の差が作るのです。
色だけで情報を伝えると、色の見分けがつきにくい読者を締め出します。上昇と下落を示す赤と緑には矢印か符号を添えてください。慣行そのものも国で違い、米国や欧州の市場は上昇を緑で、日本・韓国・中国は赤で示します。