色覚シミュレーター

画像や配色が、1型(P)・2型(D)・3型(T)色覚や1色覚の人にどう見えるかを近似で表示します。グラフや資料の色分けが伝わるかの確認に使えます。

表示はあくまで近似です。実際の見え方には個人差があり、程度(強さ)によっても変わります。色だけに頼らず、ラベル・模様・明るさの差でも区別できるかを確かめてください。

① 画像で確かめる

画像を選ぶ
ここに画像をドラッグ&ドロップしても読み込めます(画像は外部に送信されません)

② 色見本で見分けやすさを確かめる

色元の色1型
P
2型
D
3型
T
1色覚

見分けやすさは、変換後の色どうしの距離(OKLab色空間の差)で判定しています。目安として差0.05未満を「見分けにくい」、0.08未満を「やや見分けにくい」としています。

変換は sRGB を線形RGBに戻してから、Machado ほか(2009)の色覚シミュレーション行列(程度 1.0)をかけて求めています。1色覚は輝度(Rec.709 の係数)だけのグレーで近似しています。日本では男性の約5%(20人に1人)、女性の約0.2%が先天的に P型・D型の色覚といわれ、T型や1色覚はまれです。画像の読み込みと変換はすべてブラウザ内で行います。

色覚シミュレーターでできること

グラフ・スライド・ポスター・Webの配色が、1型(P)・2型(D)・3型(T)色覚や1色覚の人にどう見えるかを近似で確かめるツールです。画像を並べて比べられ、色見本どうしが見分けにくくなる組み合わせを警告します。

使い方

  1. 「① 画像で確かめる」で「画像を選ぶ」を押すか、枠に画像をドラッグ&ドロップします。最初は赤・緑・オレンジ・青・紫を使ったサンプル図が表示されています。
  2. 元の画像・1型(P)・2型(D)・3型(T)・1色覚の5つが並ぶので、色分けが伝わるかを見比べます。
  3. それぞれの「保存」でPNGを、「比較画像を保存」で5つを並べた1枚の画像を保存できます。
  4. 「② 色見本で見分けやすさを確かめる」で、使う色を色の選択欄かHEX(#RRGGBB)で入れます。「色を追加」で12色まで増やせます。
  5. 表で見え方を確かめ、下の一覧に「見分けにくい」「やや見分けにくい」と出た組み合わせは、明るさを変える・ラベルや模様を足すなどで区別できるようにします。

計算の仕組みと注意点

よくある質問

赤と緑のグラフは色覚によって見分けにくい?

2型(D)や1型(P)では、赤と緑がどちらも黄土色〜茶色に近く見え、差が小さくなりやすい組み合わせです。②の初期配色(赤・緑・オレンジ・青・紫)でも、2型で赤と緑、1型で緑とオレンジが警告されます。明るさに差をつけるか、凡例を棒の横に直接書くと伝わりやすくなります。

P型・D型・T型の違いは?

P型(1型)は赤を感じる錐体、D型(2型)は緑、T型(3型)は青の錐体の働きが弱いか、ない色覚です。日本では男性の約5%、女性の約0.2%がP型・D型といわれ、T型はまれです。画面では3つの見え方を並べて比べられます。

自分の資料の画像で試せますか?

はい。「画像を選ぶ」からPNG・JPEGなどを読み込むと、5つの見え方に変換されます。画像は外部に送られず、ブラウザの中だけで処理されます。「比較画像を保存」で並べた画像をPNGで保存できます。

見分けにくいと出たらどう直せばいい?

色相だけでなく明るさの差をつける、線の種類や模様・記号を変える、凡例をデータの近くに書く、といった方法があります。色を変えたら②のHEXを書き換えて、警告が消えるかを確かめてください。1色覚の列は明るさだけの見え方なので、明るさの差の確認にも使えます。