Webで薄い色を使う時の覚書

　吹き出しや注釈などで薄い色の文字やボックスを使いたいけど、色弱者に対する配慮からW3Cではコントラストの最低値を3.0:1(小さな文字は4.5:1)必要としているらしい。しかし健常者から見ると3.0:1でも色が濃すぎてWebデザインの幅が制限されてしまうので対策を考えてみる。（注意：強度の色弱者には7:1以上必要だが支援技術を使用してるので3.0:1以上となってるとの事）

---

　コントラストは明るい部分と暗い部分の2つの色の対比。ディスプレイでは最大の白から黒の比率は21:1で、自分と同じ色の場合は1:1になる。

---

　コントラスト3.0:1や4.5:1がどの程度か白背景と灰色で表してみる。

1.5+:1 (#a5a5a5)

3.0+:1 (#4c4c4c)

4.5+:1 (#2e2e2e)

3.0や4.5は濃いです。1.5でも薄い色とは言えません。
　(数値の後ろにプラスって書いてあるのは数値より少し大きいと言う意味)

---

薄い色と言うと一般的には下記のようなコントラスト低い色となるが、これは色弱者は見分ける事ができない。

1.1+:1 (#e6e6e6)

1.2+:1(#d0d0d0)

1.3+:1 (#c1c1c1)

---

対策として
・アクセントのために色を付けているだけで、色が見えなくても問題無いのであれば、コントラスト3.0以下にしても良いと思われる。
・薄い色で区域を分けたい場合は、ボーターラインや影などを付ければ色弱者でも境界を判断できるようになる。（コントラストは「背景色・薄い色・境界線の差」「文字色と薄い色の差」は3.1:1(細線の時は4.5:1)以上確保する事）
などが考えられる。

1.1+:#e6e6e6/ボーター1px 2e2e2e

1.1+:#e6e6e6/ボーター2px 4c4c4c

　Webデザインには制限が多い。