色覚シミュレーターとは？

色覚シミュレーターは、様々なタイプの色覚異常を持つ人々がどのように画像やカラーパレットを見ているかを再現するツールです。第一色盲（プロタノピア）・第二色盲（デューテラノピア）・第三色盲（トリタノピア）・全色盲（アクロマトプシア）をテストして、それぞれで見分けにくくなる色を見つけられます。

Brettel と Machado の色覚モデルに基づくマトリクスを各ピクセルに掛けて、八種類の代表的な色覚特性での見え方を近似します。「全タイプ比較」モードは原画と並べてすべての種類を一気に表示するので、UI モックや図表を点検するときに切り替えるよりずっと速いです。

使い方

1. アクセシビリティをテストしたい画像をアップロードするか、色を入力します。
2. 色覚タイプを選び、区切り線をドラッグして元画像とシミュレーションを切り替えます。軽度の異常三色覚を再現するときは強さスライダーで調整できます。
3. すべてのシミュレーションタイプを一括比較し、ドキュメント用にシミュレーション画像をダウンロードします。

使用するタイミング

• UX レビュー前にダッシュボードのステータスバッジを確認する。
• 図表の赤と緑のハイライトがまだ判別できるかを確かめる。
• 読者層が幅広い公開レポートでチャートの配色を選ぶ。

結果

UIデザイナーがアプリのダッシュボードのスクリーンショットをアップロードしたところ、赤・緑のステータスインジケーターが第二色盲では区別できないことが判明。色に加えてアイコン形状も追加して問題を解決しました。

よくある質問

実際の色覚特性者の見え方とどれくらい近いですか?

Brettel と Machado のマトリクスは実用的な近似で、完全一致ではありません。実際の見え方は照明や個人差にも左右されるので、明らかな問題を見つける用途に使い、医療的な根拠としては使わないでください。

1型2色覚(protanopia)と1型3色覚(protanomaly)の違いは?

Protanopia は赤錐体が機能せず、赤が大きく暗くなります。Protanomaly は赤の感度が弱いだけで、画像は似ていますが変化はやや穏やかです。緑(deutera)と青(trita)系にも同じく「全色覚」と「色弱」の区別があります。

デザイン時にどのタイプを優先すべきですか?

Deuteranomaly(緑色弱)は男性の約 5% に見られ、赤緑系で最多のタイプです。Protanopia と deuteranopia 合計でおよそ 2%。青系や全色盲は稀です。広いアクセシビリティを狙うなら緑色弱を最優先に。

画像をアップロードせずに個別の色を確認できますか？

できます。「カラー」タブに切り替えて好きな16進数コードを入力すると、7つの視覚タイプそれぞれの見え方が横に並んで表示されるので、スクリーンショットなしでブランドパレットやUIトークンを点検できます。画像全体には「色補正」ボタンがさらに踏み込み、色覚に特性のある人でも色味を実際に区別できるように画像を塗り直します。

アップロードした画像はサーバーに送られますか?

いいえ。画像はブラウザタブ内の canvas にデコードされ、マトリクスはローカルで適用され、結果はその場で描画されます。何もページの外に出ず、タブを閉じれば全部破棄されます。

関連ツール