色覚シミュレーター
色を 2 つ入力すると、8 種類の色覚でどう見えるか、そして互いに区別できるかがわかります。計算はブラウザ内で完結します。
左が色 A、右が色 B です。値をクリックするとコピーされます。
タイプ別の見え方
タイプごとに 2 色の色差（ΔE）を計算します。値が小さいほど似て見えます。ここでは 25 以上を「区別できる」、10 未満を「ほぼ同じ」としています — CIE76 に基づく実務的な目安で、規格ではありません。
長波長（赤）錐体がありません。赤が暗く見え、緑と混ざります。
赤錐体の感度がずれており、赤と緑の区別が弱くなります。
中波長（緑）錐体がありません。赤と緑の区別が困難です。
最も多いタイプです。赤緑の区別は弱まりますが明るさの差は残ります。
短波長（青）錐体がありません。青と緑、黄とピンクが混ざります。
青錐体の感度が低く、青と黄の区別が弱くなります。
色をまったく区別できず、明るさのみを知覚します。
色が大きく薄れて見えます。
紛らわしくなる CSS カラー名の組み合わせ
一般色覚では十分に違うのに、2型2色覚では近づく組み合わせを計算して抽出しました。並べて使うときは明るさや形でも区別できるようにしてください。
| 組み合わせ | 一般 ΔE | 2型2色覚 ΔE |
|---|---|---|
| Limegreen +Tomato | 126.3 |
5.8 |
| Crimson +Forestgreen | 121.1 |
3.0 |
| Crimson +Green | 123.7 |
8.9 |
| Deepskyblue +Fuchsia | 118.0 |
8.5 |
| Deepskyblue +Magenta | 118.0 |
8.5 |
| Coral +Limegreen | 113.5 |
4.4 |
| Firebrick +Green | 108.5 |
2.9 |
| Lime +Orange | 110.9 |
7.8 |
| Lightsalmon +Springgreen | 110.0 |
9.3 |
| Firebrick +Forestgreen | 106.4 |
6.3 |
計算のしくみ
2色覚は Brettel・Viénot・Mollon（1997）の方式です。色を LMS 空間に移し、欠けている錐体の軸に沿って 2 つの半平面のうち近い方へ投影します。よく使われる単一平面の簡易法は、3型で青がほとんど変化しないため採用していません。
「弱」タイプ（異常3色覚）は、一般色覚と2色覚の結果を混ぜた近似です。実際の程度には個人差が大きくあります。
⚠️ シミュレーションは確認用の道具です。「こう見える」ではなく「この組み合わせは危ないかもしれない」と読み、色だけで情報を伝えない設計（形・ラベル・パターンの併用）を優先してください。
よくある質問
色覚特性はどのくらいの割合ですか？
北欧系では男性の約 8%、女性の約 0.5% とされ、集団によって異なります。多くは赤緑系で、中でも2型3色覚が最も多いタイプです。青黄系と1色覚はさらにまれです。
色を変えればアクセシビリティは十分ですか？
いいえ。WCAG 1.4.1 は色を唯一の伝達手段にしないことを求めています。グラフの系列には形やパターンを、リンクには下線を、状態表示にはアイコンや文言を添えてください。コントラスト比は別途確認が必要です。