👁️ 色覚シミュレーター
🔒 画像・色はすべてブラウザ内で処理しており、弊社サーバーへ送信・保存することは一切ありません。
1. 使い方を選ぶ
HEXを入力して、各色覚型での見え方をスウォッチで比べます。
2. 色を入力する
3. 各色覚での見え方
スウォッチをクリックするとHEXをコピーできます。
元の色（一般色覚・C型）
P型（1型・protanopia）
D型（2型・deuteranopia）
T型（3型・tritanopia）
元の色（一般色覚・C型）
P型（1型・protanopia）
D型（2型・deuteranopia）
T型（3型・tritanopia）
元の色（一般色覚・C型）
P型（1型・protanopia）
D型（2型・deuteranopia）
T型（3型・tritanopia）
4. 一覧をコピー
タブ区切りなので、そのまま表計算ソフトに貼り付けられます。
色覚のタイプについて
日本では先天色覚異常の人が男性の約5%（20人に1人）、女性の約0.2%いるとされ、全国でおよそ300万人以上と言われています。 男女比に差があるのは、原因となる遺伝子がX染色体上にあるためです。 クラス40人の学級なら男子の中に1人はいる計算で、Webサイトの訪問者にも当然含まれます。
P型（1型・protanopia）
L錐体（赤）が働かない
赤の感度が下がり、赤が暗く沈んで見えます。赤と緑、赤と黒、ピンクと灰色などが紛らわしくなります。
D型（2型・deuteranopia）
M錐体（緑）が働かない
先天色覚異常のなかで最も多い型です。赤と緑、緑と茶、青と紫などが似た色に見えます。
T型（3型・tritanopia）
S錐体（青）が働かない
きわめて稀な型です。青と緑、黄と紫、水色とピンクなどの区別がつきにくくなります。
Webデザインで気をつけること
- 色だけで情報を伝えない。「赤の項目が必須です」ではなく、記号やラベル、アイコンを添える。WCAG 2.2 の達成基準 1.4.1「色の使用」にあたります。
- 明度差（コントラスト）をつける。色相だけで分けた2色は特定の型で潰れますが、明るさの差はどの型でも残ります。本文は4.5:1以上が目安です。
- 赤と緑を隣り合わせにしない。グラフの系列や信号的な表現で最も事故が起きやすい組み合わせです。青とオレンジに置き換えると多くの型で安全になります。
- グラフは形でも区別する。線種（実線・破線）、マーカーの形、直接ラベルを使えば、凡例の色だけに頼らずに読めます。
- リンクに下線を残す。色だけで本文と区別されたリンクは、見つけられない人がいます。
- エラーは色＋文言＋アイコンで。赤枠だけの入力エラー表示は伝わらないことがあります。
※ 画像・色はすべてブラウザ内で処理しており、弊社サーバーへ送信・保存することは一切ありません。
※ 変換は sRGB → linear RGB → LMS色空間 → 各型の変換行列 → sRGB の順で計算しています。P型・D型は Viénot ほか(1999)、T型は Brettel ほか(1997) の手法にもとづきます。
※ シミュレーションは2色覚（その錐体がまったく働かない状態）を想定した計算です。実際には程度の軽い「異常3色覚」の方も多く、見え方には個人差があります。結果は目安としてお使いください。
※ 長辺が1600pxを超える画像は、処理時間を抑えるため縮小してから変換します。
※ アニメーションGIFは最初の1コマのみを変換します。
色の見え方は人によって違います。このツールは、P型（1型）・D型（2型）・T型（3型）の色覚で、あなたの選んだ色や画像がどう見えるかをシミュレートします。 サイトやグラフ、資料の配色が「特定の人にだけ見分けられない」状態になっていないか、公開前に確認できます。