色覚シミュレーター
画像と色覚異常の人々がどのように色を見るかを確認します。
色覚異常の種類
1型2色覚(プロタノピア)(男性の約1%)· 赤錐体なし。赤が暗く見え、緑との区別が困難。
2型2色覚(デュータノピア)(男性の約1%)· 緑錐体なし。最も一般的な形式。緑と赤が似て見える。
3型2色覚(トリタノピア)(約0.003%)· 青錐体なし。青が緑がかって見え、黄色がピンクがかって見える。
全色盲(アクロマトプシア)(約0.003%)· 色覚なし。すべてがグレースケールに見える。
プロタノマリー / デュータノマリー / トリタノマリー · 上記の部分的なバージョン、感度が低下(消失ではない)。
男性の約8%、女性の0.5%が何らかの色覚異常を持っています。
色覚異常を考慮したデザインが重要な理由
色覚異常（CVD）は一般的だ。米国国立眼科研究所の報告によると、男性の約12人に1人が何らかのCVDを持つ。最も一般的な形態はX染色体連鎖劣性遺伝子で受け継がれるため、女性の罹患率ははるかに低い。合わせると、何らかのCVDを持つ世界人口は数億人に達する。意味を伝えるために赤と緑に頼るユーザー向けデザイン（エラーと成功のインジケーター・グラフ・ステータスバッジ・バリデーションメッセージ）は、色を他の手がかりと組み合わせない限り、多くのユーザーで失敗する。
これは正式なアクセシビリティ要件でもある。WCAG 2.2 達成基準 1.4.1（「Use of Color」）、レベルAはルールを直接述べている：「情報を伝え、動作を示し、応答を促し、または視覚的要素を区別するための唯一の視覚的手段として色を使用しない。」レベルAはWCAGの最低適合基準だ。これに失敗するとサイトはアクセシブルでないだけでなく、WCAG適合を義務付ける法律（米国Section 508・EU Accessibility Act・英国Equality Act）の下で法的に非準拠となる。
CVDの8つの形態
人間の色覚は3種類の錐体光受容体に依存している：L錐体（長波長、赤付近でピーク）・M錐体（中波長、緑付近でピーク）・S錐体（短波長、青紫付近でピーク）。CVDの各形態は、これらの錐体の1つが欠如（-アノーピア）または感度がシフト（-アノマリー）することに対応している。
| 種類 | 関与する錐体 | 視覚的影響 |
|---|---|---|
| プロタノーピア | L錐体が欠如 | 赤が暗く見える。赤と緑が混同しやすい。 |
| プロタノマリー | L錐体の感度がシフト | 赤の感度が低下。部分的な赤緑混同。 |
| デューテラノーピア | M錐体が欠如 | 緑と赤が似て見える。 |
| デューテラノマリー | M錐体の感度がシフト | CVDの最も一般的な形態。緑の感度が低下し、軽度から中程度の赤緑混同。 |
| トリタノーピア | S錐体が欠如 | 青が緑がかって見える。黄色がピンクがかって見える。非常にまれ。 |
| トリタノマリー | S錐体の感度がシフト | 青と黄の識別能力が低下。 |
| 全色覚異常 | 全錐体が欠如 | 色覚が完全に欠如。世界がグレースケールに見える。光過敏や視力低下を伴うことが多い。 |
| 不完全全色覚異常 | 全錐体が機能低下 | スペクトル全体にわたって色の識別能力が著しく低下。 |
デューテラノマリーが最も多い形態だ。なぜなら、L錐体とM錐体の光色素遺伝子はX染色体上で隣接しており、わずか数個のアミノ酸の違いだからだ。小さな変異が容易にM錐体の感度ピークをL錐体に近づけ、脳の赤と緑を識別する能力を低下させる。
男性の方が多く影響を受ける理由
L錐体（OPN1LW）とM錐体（OPN1MW）の光色素遺伝子はどちらもX染色体上にある。男性はX染色体を1本だけ（母親から）受け継ぐ。女性は2本（各親から1本ずつ）受け継ぐ。劣性の異常が発現するには、女性は両方のX染色体に異常遺伝子が必要だが、男性は1本のXに持つだけでよい。この計算により、赤緑CVDについて男女間で約10×の有病率の差が生じる。S錐体遺伝子は第7染色体にあり常染色体性で、トリタノーピアとトリタノマリーは男女でほぼ同率で発症するが、どちらも元々非常にまれだ。
WCAGコントラスト要件も適用される
SC 1.4.1を超えて、WCAGはテキストとUIコンポーネントに最低コントラスト比も課している。すべて実際に見える色のペアに対して測定する：
- SC 1.4.3 コントラスト（最小）、レベルAA：通常の本文テキストで4.5:1以上、大きいまたは太字テキストで3:1以上。
- SC 1.4.6 コントラスト（強化）、レベルAAA：通常のテキストで7:1、大きいテキストで4.5:1。
- SC 1.4.11 非テキストコントラスト、レベルAA：UIコンポーネントとグラフィックオブジェクト（ボタンの枠・フォーカスインジケーター・アイコンのアウトライン）で3:1。
このシミュレーターをコントラストチェッカーと並行して使う。2つの色が通常視でちょうど4.5:1のコントラスト比を持っていても、デューテラノープには区別できない場合がある。このシミュレーターは純粋なコントラストチェックが見逃す2つ目の失敗モードを発見する。
よくあるデザインの落とし穴と修正方法
- 成功対エラーの赤/緑ステータスインジケーター。アイコン（✗ / ✓）・テキストラベル・または異なる形状と組み合わせる。色相だけに頼らない。
- アンダーラインのない色付きリンク。多くのCVDユーザーは色付きリンクと周囲の本文テキストを区別できない。アンダーライン・フォントウェイトの変更、またはその両方を追加する。
- カテゴリーのみで色分けされた棒グラフ。パターン・直接ラベル、またはCVD安全なパレット（Viridis・Cividis・Magma・Okabe-Ito・ColorBrewerのCVDセーフセット）を追加する。
- 赤→緑グラデーションのヒートマップ。知覚的に均一なパレットに切り替える。MatplotlibのViridis（2017年からデフォルト）とCividis（Nuñez他、2018年、CVD視聴者向けに設計）はどちらも安全だ。
- 赤テキストのみによるフォームバリデーション。アイコン・明示的なエラーメッセージ・可視のフィールドアウトライン変更と組み合わせる。
- 「緑のボタンをクリック」という指示。色ではなく位置またはラベルを参照する。
- 類似した色相のマップキー。赤橙黄のスケールを持つコロプレスマップはデューテラノーピアの下で2つの区別できない色に崩壊する可能性がある。単一色相スケール（薄いから濃い青）またはCVDセーフな発散パレットを使う。
- ゲームデザインの色コード。初期のポケモンクリスタルのアプリコットや、ポケモンGOオリジナルの色分けされたポケストップは、多くのCVDプレイヤーには解決不可能な赤緑の判断を提示していた。
CVD安全なパレット
- Viridis：2017年からのMatplotlibのデフォルト連続パレット。通常視とCVD視の両方で知覚的に均一。
- Cividis：CVD視聴者向けに設計（Nuñez・Anderton & Renslow、PLOS ONE 2018）。デューテラノーピアまたはプロタノーピアのシミュレーション下でも均一な知覚距離を維持する。
- ColorBrewer：地図製作向けのCynthia Brewerのパレット。サイトは連続・発散・定性データについてCVDセーフな変種を明示的に示している。
- Okabe-Ito：科学出版物でのアクセシビリティのためにOkabe MasatakaとIto Keiが設計した8色の定性パレット。最大8カテゴリーの分類データに推奨されるパレット。
ブラウザのDevToolsにもCVDシミュレーターがある
ChromeとEdgeのDevToolsには内蔵の「視覚障害をエミュレート」オプション（レンダリングタブ内）があり、ビューポート全体でプロタノーピア・デューテラノーピア・トリタノーピア・全色覚異常をシミュレートできる。FirefoxのAccessibility Inspectorにも同様のシミュレーターがある。これらはデザインレビュー中のページ全体の監査に最適だ。このシングルカラーツールは一度に1つのスウォッチを分離することで補完し、ページの残りの部分が比較を混乱させることなくパレット決定を行えるようにする。
聞いたことがあるかもしれない診断テスト
- 石原色覚検査表（石原忍、1917年）：数字が隠された有名な色付き点の検査表。赤緑異常のスクリーニングに臨床現場で標準的に使われる。
- Farnsworth-Munsell 100-Hueテスト：連続した色相順にキャップを並べる。CVDの有無の確認だけでなく、微妙な識別能力をテストする。
- アノマロスコープ：赤緑の混合を調整して黄色の基準に合わせる。CVDの種類と重症度の臨床分類に使われる。
このツールは診断ではない。特定の色がCVDのさまざまな形態を持つ人にどのように見えるかをシミュレートし、それをもとにデザインを改善するためのものだ。誰かの視覚をテストするものではない。
よくある間違い
- CVDをニッチな懸念として扱う。男性の12人に1人は、あらゆるコンシューマー製品のユーザーベースの意味のある割合だ。そしてそのほとんどは生涯それを回避してきたため、報告しない。
- 「ダークモード」または「ハイコントラスト」で対応できると思い込む。コントラストとCVDは独立した軸だ。ハイコントラストのパレットでも依然として失敗する赤緑の区別に頼ることがある。
- デューテラノーピアのみでテストする。デューテラノーピアは最も一般的な形態だが唯一ではない。プロタノーピア・トリタノーピア・部分的な-アノマリーの変種はすべて異なる混同を生む。すべてを順番に確認する。
- コントラストチェッカーを無視してシミュレーターのみを使う。パレットはCVD安全でありながらWCAG 1.4.3のコントラスト最小値に失敗することがある。両方のツールを使う。
- 知覚距離ではなく名前で色を選ぶ。「赤・緑・青」は十分に分離して聞こえるが、CVDでは「暗い・暗い・青」に崩壊することがある。実際のスウォッチをテストする。
よくある質問
シミュレーションはどの程度正確ですか？
CVDシミュレーションは近似であり完全なレンダリングではない。標準的なアルゴリズム（Brettel・Viénot & Mollonの1997年の手法、Viénot 1999とMachado他 2009で改良）は、LMS色空間で欠如またはシフトした錐体の「混同線」に色を投影する。結果は完全な二色型色覚者が平均的に見るものだが、実際のCVDユーザーは個人差があり、脳は静的シミュレーションが再現できない輝度・コンテキスト・経験からの手がかりで補正する。
画像や色はどこかに送信されますか？
いいえ。シミュレーションはブラウザ内でcanvas要素を使ってピクセルごとの色変換を適用することで完全に動作する。何もアップロード・ログ記録・保存されない。これはテストしている画像が未公開のデザインモックアップ・機密UIのスクリーンショット・またはサードパーティと共有したくないものである場合に重要だ。
CVDの全8形態に対応したデザインをすべきですか？
実際には、最も一般的な形態（デューテラノーピアとデューテラノマリー）に対応することが大多数のユーザーをカバーする。プロタノーピアに対するチェックを追加すると残りのほとんどをカバーできる。トリタノーピアとトリタノマリーは十分にまれで、deutan/protanテストを通過すれば通常は十分だ。ただし、色相に全く依存しないデザイン（アイコン・パターン・ラベルと組み合わせる）は自動的にすべての人をカバーする。
現在のパレットの名前に「CVDセーフ」と含まれています。それでもテストが必要ですか？
はい。「CVDセーフ」は通常、パレットのカテゴリー色がシミュレーション下で区別できることを意味するが、実際のインターフェースを構成する（色付き背景上のテキスト・塗りつぶしの上のアイコン・5%の明度シフトのホバー状態）とすぐに混同を再導入できる。ソースパレットだけでなく、構成された色のペアをテストする。
プロタノーピアとプロタノマリーの違いは何ですか？
プロタノピアはL錐体（赤）の光色素が欠如しており、影響を受けた人には機能的な赤の感度が全くない。プロタノマリーは欠如ではなくL錐体の感度ピークのシフトで、影響を受けた人は低下しているが赤の識別能力がゼロではない。deutera-/deutero-とtrita-/trito-にも同様のパターンがある：-anopiaは強い形態、-anomalyは部分的な形態だ。
色覚補正眼鏡（EnChroma）は実際に効果がありますか？
赤緑色覚異常を持つ多くの人にとって、効果がある。L錐体とM錐体の間の特定の重複する波長をフィルタリングすることで、特定の赤と緑の間の知覚されるギャップを広げる。CVDを「治癒」したり、二色型色覚者が正常な色を見えるようにするものではない。光色素の状況は変わらない。効果は個人と照明条件によって異なる。屋外の日光が最も効果を発揮する傾向がある。