色覚シミュレーター
色覚多様性を持つユーザーの見え方をシミュレートし、アクセシブルな配色設計を支援するオンラインツールです。1型・2型・3型色覚や全色盲など7種類の色覚タイプに対応し、カラーパレットや画像をアップロードして実際の見え方を確認できます。WCAGコントラスト比チェックと組み合わせることで、より多くのユーザーに読みやすいWebデザインやアプリUIを設計できます。
最終更新:
使い方
使い方を開く使い方を閉じる
- 1
モードを選択
カラーパレットモードで前景色・背景色を入力するか、画像モードで画像をアップロードします
- 2
シミュレーション結果を確認
7種類の色覚タイプでの見え方とWCAGコントラスト比を確認します
- 3
配色を改善
コントラスト比が不足している場合は配色を調整し、すべてのユーザーにアクセシブルなデザインにします
コントラスト比: 17.06:1
1型色覚（P型）Protanopia
2型色覚（D型）Deuteranopia
3型色覚（T型）Tritanopia
全色盲Achromatopsia
1型色弱Protanomaly
2型色弱Deuteranomaly
3型色弱Tritanomaly
色覚シミュレーターについて
色覚多様性（色覚異常）を持つユーザーの見え方を科学的にシミュレートするツールです。Brettel (1997) 法に基づく正確なシミュレーションで、Webデザインやアプリ開発におけるアクセシビリティ対応を支援します。1型色覚（Protanopia）・2型色覚（Deuteranopia）・3型色覚（Tritanopia）・全色盲（Achromatopsia）、および各色弱タイプの計7種類に対応しています。カラーパレットモードでは前景色と背景色を指定してWCAGコントラスト比を同時確認でき、画像モードでは実際のUI画面やグラフ画像をアップロードしてシミュレーション結果を比較できます。アクセシブルなデザインの実現に向けた実践的な配色改善に役立てることができます。
主な機能
- Brettel法による科学的な色覚シミュレーション（7種類対応）
- カラーパレットモードでWCAGコントラスト比を同時確認
- 画像アップロードによるビジュアルシミュレーション
- Brettel法による科学的なシミュレーション（JavaScriptでブラウザ内のみで処理）
活用シーン
- Webサイトやアプリの配色アクセシビリティチェック
- プレゼン資料やグラフの色分けの確認
- UIデザインのカラーパレット検証
- 色覚多様性への理解と教育
よくある質問
色覚多様性とは何ですか？
色覚多様性（色覚異常）とは、特定の色の区別が困難な状態です。日本では男性の約5%、女性の約0.2%が該当します。赤と緑の区別が困難な1型・2型が最も多く、全人口の約8%に影響があります。
Brettel法とは何ですか？
Brettel et al. (1997) が提案した色覚シミュレーション手法です。人間の視覚系のLMS錐体応答モデルに基づき、色覚特性に応じた射影変換を行います。現在最も広く使われている科学的なシミュレーション手法の一つです。
画像データは安全ですか？
はい、処理はブラウザ内のJavaScriptで行われます。画像データが外部に送信されることはありません。
コントラスト比の基準は？
WCAG 2.1では、通常テキストに4.5:1以上、大きいテキスト（18pt以上または14pt太字以上）に3:1以上のコントラスト比を要求しています（AA基準）。より厳格なAAA基準では、通常テキストに7:1以上が要求されます。
すべての画像形式に対応していますか？
JPEG、PNG、WebPの画像形式に対応しています。ファイルサイズは最大10MBまでご利用いただけます。GIFやBMP形式は対応していません。シミュレーション結果の画像はPNG形式でダウンロードできます。