グラフの凡例やステータス表示を色だけで区別すると、色覚特性によっては見分けられないことがあります。このツールは、入力した配色が3つの型でどう見えるかを並べ、判別しにくくなる組み合わせを指摘します。
色覚特性の種類
日本人男性のおよそ20人に1人、女性のおよそ500人に1人が、いずれかの色覚特性を持つとされています。100人が見るページなら、数人は違う見え方をしている計算になります。
| 型 | 特徴 | 日本での割合の目安 |
|---|---|---|
| P型（1型） | 赤を感じにくい。赤と黒、赤と緑が近く見える | 男性の約1.5% |
| D型（2型） | 緑を感じにくい。赤と緑、緑と茶が近く見える | 男性の約3.5% |
| T型（3型） | 青を感じにくい。青と緑が近く見える | きわめてまれ |
つまずきやすい配色
特に「赤字＝マイナス、緑＝プラス」のような表現は、D型では両方が近い色に見えます。数値の前に記号を付ける、太さを変えるなど、色以外の手がかりを添えてください。
- 赤と緑の組み合わせ（成功・エラーの表示、グラフの増減）
- オレンジと黄緑
- 青と紫
- 彩度だけが違う同系色
- 細い線や小さな文字を色だけで区別させる表示
色に頼らない設計にする
- 形で区別する：折れ線グラフはマーカーの形を変える、面グラフはハッチング（模様）を入れる
- ラベルを直接置く：凡例を離れた場所に置かず、要素の近くに文字で書く
- 明度差をつける：色相が近くても、明るさが違えば区別できます
- 文字を添える：エラー表示は赤色だけでなく「エラー」の文字とアイコンを併記する
- 下線を残す：本文中のリンクは色だけでなく下線で示す
コントラスト比とあわせて確認する
色覚特性への配慮と、コントラスト比（明るさの差）の確保は別の話です。どちらも満たして初めて読みやすくなります。文字色と背景色の関係は、WCAGの基準（通常の文字で4.5:1以上）で確認してください。
明度差を十分に取っておくと、色の見え方が変わっても情報が失われにくくなります。配色を作る段階から、グレースケールにしても区別できるかを確かめる方法が有効です。
※ 一般的な近似モデルによるシミュレーションです。見え方には個人差があり、実際の見え方を正確に再現するものではありません。
※ 割合の数値は一般に知られている目安であり、調査により幅があります。
よくある質問
Q シミュレーションはどう計算していますか？
色覚特性の研究で用いられる一般的な変換行列を使った近似です。厳密な再現ではなく、傾向を確認するためのものです。
Q 何色まで確認できますか？
2〜8色まで入力できます。グラフの系列色やUIのステータス色をまとめて確認できます。
Q 赤と緑は使ってはいけませんか？
使えないわけではありません。明度差をつける、形やラベルを併用するなど、色以外の手がかりを添えれば伝わります。
Q 画像もシミュレーションできますか？
本ツールは配色（色コード）が対象です。画像全体の確認には専用のツールをご利用ください。