色覚シミュレーター

使い方

1. 「確かめ方」で「画像で確かめる」か「色の組み合わせで確かめる」を選びます
2. 画像のときは、画像をドロップするか、クリックして選びます。コピーした画像を Ctrl+V（Mac は ⌘+V）で貼り付けることもできます。手元に画像がなければ「サンプル画像で試す」で、グラフと色相の帯の画像を作って試せます
3. 読み込むとすぐに、元の画像と、1型・2型・3型・1色覚の4つの見え方が一覧で並びます
4. 「1つを大きく比べる」を押すと、選んだ見え方を元の画像と並べて大きく表示します。「境目を動かして重ねる」では、1枚の画像の左側が元の画像、右側がシミュレーションになり、スライダーで境目を動かせます
5. 「保存」を押すと、その見え方の画像を元の大きさで保存します。JPEG はその形式のまま、WebP は対応しているブラウザではその形式のまま、それ以外は PNG で保存します
6. 色の組み合わせのときは、1行に1色ずつ HEX（#e60012）か rgb(230, 0, 18) を書きます。後ろに名前を書くと表に出ます。色ごとの見え方の表と、見分けにくくなる組み合わせが表示されます
7. 「強さ」のスライダーで、見え方の強さを10〜100%で変えられます。画像と色の組み合わせの両方に使われます

色覚の型と見え方

人の目には、主に赤・緑・青の光に反応する3種類の錐体（L・M・S錐体）があります。どの錐体がはたらかないか、または感じ方がずれているかによって、色の見え方が変わります。このアプリでは、日本眼科学会の用語を主にし、カラーユニバーサルデザインでよく使われる P型・D型・T型・A型の呼び方を添えています。

• 1型色覚（P型） — L錐体（赤）の違いによるものです。赤が暗く見え、赤と緑・茶、青と紫、ピンクと灰色などが近く見えます
• 2型色覚（D型） — M錐体（緑）の違いによるものです。赤と緑、オレンジと黄緑、青と紫などが近く見えます
• 3型色覚（T型） — S錐体（青）の違いによるものです。青と緑、黄色と白・ピンクなどが近く見えます。まれです
• 1色覚（A型） — 色みを感じず、明るさの違いだけで見分けます。きわめてまれです

1型〜3型にはそれぞれ、錐体がはたらかない「2色覚」と、はたらくが感じ方がずれている「異常3色覚」（いわゆる色弱）があります。たとえば1型なら1型2色覚（P型強度）と1型3色覚（P型弱度）です。強さ100%が2色覚、100%未満が異常3色覚の目安です。日本では、男性の約5%、女性の約0.2%が1型か2型の色覚（先天赤緑色覚異常）とされます。男性ではおよそ20人に1人の割合です。

計算方法

• 1型・2型・3型は、Brettel・Viénot・Mollon（1997年）の方法で計算します。色を錐体の反応（LMS）に直し、はたらかない錐体の反応を補って、一般色覚と2色覚とで同じ色に見えることが分かっている色（灰色と、青・黄色、または赤・青緑）を含む面に写します。係数は、sRGB の規格と Smith・Pokorny（1975年）の錐体の感度を使って求めたもので、パブリックドメインの libDaltonLens と同じ値です
• 計算は光の強さ（リニア RGB）で行います。画像の sRGB の値をいったん光の強さに直し、計算した後で sRGB に戻します
• 強さ100%未満は、計算した色と元の色を光の強さで混ぜます（強さ60%なら、シミュレーション60%・元の色40%）。異常3色覚の見え方の簡易的な近似で、錐体の感度のずれを計算するものではありません。元の色が混ざるぶん色の差が大きく出るので、色弱の人にも見分けやすいかは、強さ100%でも確かめてください
• 1色覚は、sRGB の規格の明るさ（輝度）の式 0.2126R + 0.7152G + 0.0722B で灰色にします。一般色覚の昼間の明るさの感じ方を使った目安で、1色覚の人の多くは赤をこれより暗く感じます
• 画面の一覧は縮小したコピー（長い辺が720px、大きく比べるときは1600px）で計算します。保存するときは元の大きさの画像全体を計算し直します
• 透明な部分は透明なまま残します。JPEG で保存するときだけ、透明な部分を白にします

見分けにくい組み合わせの判定

色の組み合わせで確かめるときは、入力したすべての色の組について、それぞれの見え方での色の差を CIEDE2000（人の目の感じ方に近づけた色差の式）で計算します。

• 一般色覚では差が10以上あるのに、シミュレーションで10未満になる組を「見分けにくい組み合わせ」として、差の小さい順に出します
• 一般色覚でも差が10未満の組は、どの型でも見分けにくいので「一般色覚でも近い組み合わせ」に分けて出します
• 10は、グラフの凡例や地図の塗り分けのように、色だけで区別する場面を想定した目安です。細い線や小さな文字では、差が10を超えていても見分けにくいことがあります

たとえば「よくある凡例の色」（赤 #e60012・緑 #2ca02c・オレンジ #ff7f0e・茶 #8c564b・青 #1f77b4・紫 #9467bd）を強さ100%で確かめると、次のようになります。

• 1型：緑とオレンジ（差 1.8）、青と紫（差 2.7）
• 2型：赤と緑（差 4.8）、青と紫（差 5.9）
• 3型：緑と青（差 9.5）
• 1色覚：赤と青（差 0.0）をはじめ10組

色覚に配慮した配色として知られる「Okabe–Ito の配色」では、1型・2型で見分けにくい組み合わせはなくなります。それでも1色覚では、オレンジと空色のように明るさが同じ色どうしが見分けにくく出ます。

見分けやすくする工夫

• 色だけで区別せず、文字のラベル、線の種類（実線・点線）、マーカーの形、模様を組み合わせます
• 赤と緑、青と紫のように近く見えやすい組を隣り合わせにしないようにし、明るさにも差をつけます
• 赤は、黄みのある朱色やオレンジ寄りの赤にすると、1型の人にも暗くなりにくくなります
• 凡例はグラフから離さず、線や棒のすぐ近くに名前を書きます

FAQ

シミュレーションの通りに見えているのですか？

いいえ。あくまで目安です。同じ型でも見え方には個人差があり、錐体の感じ方のずれの大きさも人によって違います。また、2色覚の人が実際にどう見えているかを直接確かめる方法はなく、片目だけが2色覚の人の報告などをもとにしたモデルです。色覚の検査や診断には使えません。

他のシミュレーターと結果が少し違うのはなぜですか？

計算の方法が複数あるためです。このアプリが使う Brettel らの方法のほかに、Viénot ら（1999年）や Machado ら（2009年）の方法があり、結果はわずかに、色によっては大きくずれます。また、強さ100%未満の表し方もツールによって違います。

画像はサーバーに送られますか？

送られません。画像の読み込み・計算・保存はすべてブラウザの中で行い、入力した色も含めて保存しません。ページを閉じると消えます。

写真の向きが変わりませんか？

スマートフォンの写真に記録された向き（Exif の向き）を反映して表示・保存します。保存した画像には Exif などの撮影情報は入りません。

大きな画像は使えますか？

JPEG・PNG・WebP・GIF・SVG などの、50MB以下、5000万画素以下の画像を読み込めます。アニメーション GIF は最初のコマだけを使います。大きさの指定がない SVG は読み込めないことがあります。保存のときは元の大きさで計算するため、画素数の多い画像では数秒かかり、変換の進み具合を表示します。端末のメモリが足りないと保存できないことがあります。