誰にでも読める色
男性型の生物学的特徴を持つ人のおよそ12人に1人、女性型では200人に1人が、色を異なって見ています。そして日なたでは誰もがうまく見えません。読みやすい色とは、つまるところ色相だけに頼らないことです。
#1f2937
#ffffff
#5576ff
#facc15
#b91c1c
測れるコントラスト
コントラスト比は二色の明るさを比べた値で、1:1(見えない)から21:1(白地に黒)までの幅があります。WCAGは本文に4.5:1、大きな文字に3:1、境界線やアイコンなどのUI要素に3:1を求めます。これは意見ではなく測定できる値であり、「うちのブランドカラーで問題ない」という議論はたいてい、数値を画面に出した時点で終わります。
色相だけに頼らない
二つの状態の違いが赤と緑だけなら、一部の利用者には一つの状態しか見えていません。アイコン、ラベル、模様、位置——二つ目の手がかりを足してください。グラフでも同じで、隣り合う系列は色相だけでなく明度も変えます。フォームの検証では、枠線の色よりもメッセージのほうが大切です。
二つの習慣
一つ目は、文字色を目分量ではなく測って選ぶこと。数秒で済み、議論がなくなります。二つ目は、公開前にグレースケールで眺めること。それでも成立していれば——ボタンと背景が見分けられ、グラフの線どうしが区別できれば——色覚の違いにも、安価な画面にも、直射日光にも耐えます。
覚えておきたいこと
コントラストを測り、大事なことを色相だけに背負わせないこと。
コントラストチェッカーで組み合わせを試す