色覚シミュレーター：UIの色覚異常対応をテストする

世界で約3億人が何らかの色覚異常（CVD: Color Vision Deficiency）を持っています。UIがエラー表示やチャートの系列区別、必須フィールドの表示に色だけを使っている場合、かなりの割合のユーザーが情報を見落とす可能性があります。

色覚異常の仕組み

人間の色覚は、網膜にある3種類の錐体細胞に依存しています。L錐体（赤波長に感度が高い）、M錐体（緑）、S錐体（青）です。色覚異常は、いずれかの錐体が欠損している状態（2色覚）、または感度がずれている状態（異常3色覚）で発生します。

デザインにおける実務上の影響は以下のとおりです。

2型色弱（deuteranomaly） が最も多く、男性の約5〜6%に見られます。緑と赤の区別が困難になります。信号機、成功/エラー状態、チャートの凡例などが該当します。
1型色覚（protanopia）と1型色弱（protanomaly） は赤の知覚に影響します。赤が暗く鈍い色に見え、茶色に近づきます。
3型色覚（tritanopia） はまれですが、青と黄の識別に影響します。黄色の背景上の青いリンクが見えなくなることがあります。
全色盲（achromatopsia） は極めてまれですが、色相だけで意味を伝えるUIでは検証する価値があります。

色覚シミュレーターは、入力値に対して3×3の色変換マトリクスを適用します。これらのマトリクスはViénot（1999）とBrettel（1997）の研究に基づいており、各CVDタイプの見え方を近似するようにRGBチャンネルを再マッピングします。

カラーモードでは、任意のhex値を入力すると、8タイプすべての変換結果を比較グリッドで即座に確認できます。画像モードでは、スクリーンショットやデザインモックアップをドロップすると、Canvas API を使ってブラウザ内で完全に処理され、9つのプレビューが並列表示されます。

画像データがデバイスの外に送信されることはありません。アカウント登録もアップロードもサーバー処理も不要です。

CVDテストをデザインプロセスに組み込む手順を示します。

重要な色を選定する。 シミュレーターをカラーモードで開き、エラー用の赤、成功用の緑、プライマリアクションの色、データ可視化パレットをテストします。パレット内の2色が2型色覚（deuteranopia）のシミュレーション結果で同じhex値になる場合、2型CVDのユーザー（男性の約6%）にとって区別がつきません。
UIのスクリーンショットを撮る。 画像モードに切り替え、ダッシュボード、フォームバリデーション、チャートのスクリーンショットをドロップします。まず2型と1型を確認してください。赤緑色覚異常が全症例の95%以上を占めます。
冗長性で対処する。 色を排除するのではなく、第2のチャンネルを追加します。色付きのステータスバッジにアイコンを添える。チャートセグメントにパターンやラベルを付ける。リンクに下線を引く。目標は、色が唯一の信号にならないようにすることです。
コントラストを検証する。 カラーコントラストチェッカーと併用して、調整後の色がWCAG AAの閾値（本文テキスト 4.5:1、大テキストおよびUIコンポーネント 3:1）を満たしていることを確認します。

WCAG 2.1 達成基準 1.4.1（「色の使用」）は次のように定めています。

情報の伝達、動作の指示、反応の促し、視覚的要素の区別の唯一の視覚的手段として、色を用いてはならない。

これはフォームバリデーション、テキスト内のリンク、チャートデータ、ステータスインジケーター、インタラクティブコントロールに適用されます。シミュレーターを使えば、直感に頼らず体系的に監査できます。

アクセシビリティテストの多くは「赤と緑を一緒に使わない」で止まります。大半のケースはカバーできますが、見落とされがちな問題があります。

グリッドビューを使えば全8タイプのテストは数秒で完了し、赤緑ヒューリスティックでは見逃すエッジケースを検出できます。

色覚シミュレーターを開いて、現在のプロジェクトのカラーパレットをテストしてください。まずはエラー状態の色から始めましょう。2型色覚（deuteranopia）でデフォルトのテキスト色と融合するなら、それが最初の修正ポイントです。