色覚異常シミュレーター
様々なタイプの色覚異常を持つ人に色や画像がどのように見えるかシミュレートします。アクセシビリティテストに活用してください。
様々なタイプの色覚異常を持つ人に色や画像がどのように見えるか確認できます。
オリジナル（正常視力）
#FF6B35
第1色盲
#95852d
赤色錐体なし (~1%)
第2色盲
#b9a62f
緑色錐体なし (~1%)
第3色盲
#ff4760
青色錐体なし (~0.003%)
第1色弱
#c4812d
赤色錐体が弱い (~1%)
第2色弱
#d0942f
緑色錐体が弱い (~5%)
第3色弱
#ff674b
青色錐体が弱い (~0.001%)
全色盲
#a8a8a8
色覚なし (~0.003%)
全色弱
#d59083
色覚減退 (Rare)
科学的な色変換マトリクスを使用したシミュレーションです。すべての処理はブラウザでローカルに行われます。
使い方
- 1
モード選択
「カラーモード」で個別の色をテスト、「画像モード」で画像をアップロードしてシミュレートします。
- 2
色を選択またはアップロード
カラーピッカーを使うかHEXコードを入力。画像モードではPNG、JPEG、WebP画像をアップロードします。
- 3
シミュレーション確認
8種類の色覚異常で色や画像がどう見えるか確認します。
- 4
アクセシビリティ確認
結果を使って、色覚異常のユーザーにもアクセシブルなデザインかどうか確認しましょう。
よくある質問
- シミュレーションはどの程度正確ですか？
- Machado et al.とBrettel et al.のモデルを使用しており、アクセシビリティ研究で広く使われている手法です。
- 最も一般的な色覚異常は？
- 第2色弱（緑色錐体の弱化）が最も一般的で、男性の約5%に影響します。
- 画像はサーバーに送信されますか？
- いいえ。すべての処理はCanvas APIを使ってブラウザで完全に行われます。
- 色覚異常者向けデザインのコツは？
- 高いコントラストを使い、色だけで情報を伝えないようにし、パターンやラベルを併用してください。