UIと製品状態
エラー、成功、警告、無効、選択、フォーカスの各状態が、色相の差が小さくなっても伝わるか確認します。
プライベート、ブラウザ内画像ツール
色覚シミュレーター
画像の色が四つの色覚近似でどのように見えるかを探索できます。これはデザインプレビューであり、診断や特定の人物の視覚の正確なコピーではありません。
あなたの画像はこのデバイスに留まります
デコード、シミュレーション、比較、およびPNGのエクスポートはブラウザ内で行われます。画像はアップロード、保存、または分析に含まれません。
シミュレーターを試す
PNG、JPEG、またはWebP画像を1つ選ぶか、画像を貼り付けるか、サンプルから始めてください。
あなたの画像はこのデバイスに留まります
PNG、JPEG、またはWebP · 最大20 MiB · 最大16.8 MP · 各辺8192 px
クリップボードから1つの画像を貼り付けることもできます。
色覚シミュレーターとは？
色覚シミュレーターは、一般的な色覚差モデルに基づいて画像を変換します。元ファイルを変更せず、同じUI、グラフ、地図、イラスト、写真で色の関係を比較できます。
このページはデザインのための教育的な補助ツールです。視力検査や色覚タイプの判定は行わず、他者の見え方を正確に再現するものでもありません。
自分の赤緑の色認識を確認したい場合は、短い非診断スクリーニングテストをご利用ください。
色覚スクリーニングテストを受けるこのシミュレーターが役立つ場面
デザイン初期と公開前の両方で利用できます。色が状態、分類、方向、強調を伝える場面では特に有効です。
グラフとデータ可視化
系列、凡例、ヒートマップ、小さなマークで、混同しやすい色や追いにくい色を探します。
地図と図解
経路、領域、ラベル、注釈で、色だけの区別が重要な情報を隠していないか確認します。
ブランドと広告素材
ロゴ、CTA、SNS画像、広告素材を、コントラストや色以外の手掛かりと合わせて確認します。
シミュレーターの使い方
- 1サポートされている画像を選択、ドラッグ＆ドロップ、または貼り付けするか、バンドルされたサンプルを読み込んでください。
- 2プロタン、デュタン、トリタン、または固定の全色盲近似を選択してください。
- 3プロタン、デュタン、トリタンの場合、示例強度を0%から100%まで調整してください。
- 4オリジナルとシミュレーションされたビューを比較し、有用であればメタデータなしのPNGをダウンロードしてください。
シミュレーションの種類
ここでの Protan、Deutan、Tritan はモデル群の総称であり、個人の診断ではありません。確認したい色の関係に合うモードを選んでください。
プロタン
Protan は protanopia（1型2色覚）と protanomaly（1型3色覚）の総称で、L-cone（長波長錐体）の範囲に関係します。Machadoモデルによる近似です。
デュタン
Deutan は deuteranopia（2型2色覚）と deuteranomaly（2型3色覚）の総称で、M-cone（中波長錐体）の範囲に関係します。Machadoモデルによる近似です。
トリタン
Tritan は tritanopia（3型2色覚）と tritanomaly（3型3色覚）の総称で、S-cone（短波長錐体）の範囲に関係します。モデルの根拠と個人の見え方には限界があります。
全色盲（アクロマトプシア）
相対輝度を保つ固定グレースケール表示です。羞明、視力低下、眼振など、実際の症状は再現しません。
静的な比較例
オリジナル
プロタン
デュタン
トリタン
比較しやすい固定設定であり、特定の人の見え方を正確に表すものではありません。
シミュレーション結果の見方
合否ではなく、失われる区別を探します。実際に使われる大きさで、各シミュレーションを原画と比較してください。
混同する色を探す
隣り合う操作部品、グラフ系列、経路、状態色が区別しにくくなる箇所を確認します。
小さく低コントラストな要素を確認する
細線、小さい文字、アイコン、境界線、弱い状態を実寸で確認します。
観察をデザイン修正につなげる
ラベル、アイコン、パターン、形、より強いコントラストを追加し、再度確認します。
方法
Protan、Deutan、Tritanには、Machado、Oliveira、Fernandesが2009年に発表した事前計算済み行列を使います。例示強度は隣接するモデルサンプル間を補間し、色は線形光RGBで変換してalphaを保持します。Achromatopsiaは相対輝度に基づく固定グレースケール表示です。
重要な制限事項
シミュレーションは特定の人の見え方を正確に再現できません。個人差、ディスプレイ調整、カラープロファイル、周囲光、画像圧縮、モデル範囲が結果に影響します。Achromatopsia表示も羞明、視力、眼振などを再現しません。このツールは診断、個人分類、色補正を行いません。
色に配慮したデザインのチェックリスト
シミュレーションを観察の一段階として使い、次の項目でも検証してください。
- 意味や操作を色だけで伝えない。
- 状態色や分類色に文字、アイコン、形、パターン、境界線を組み合わせる。
- 想定サイズで文字と非文字のコントラストを別々に確認する。
- 細線、小さいラベル、無効状態、フォーカス、グラフ系列を確認する。
- 一つの表示ですべてをカバーすると考えず、複数のモードを試す。
- 自動・手動のアクセシビリティ確認と、色覚差のある人を含むユーザー調査を組み合わせる。
よくある質問
いいえ。シミュレーターはデザイン確認のため画像を変換します。スクリーニング検査は視標への回答を求めますが、医学的診断はできません。
モデルに基づく近似で、個人の見え方の正確な複製ではありません。視覚、画面、照明、色管理、画像自体が結果に影響します。
Protan、Deutan、Tritanのモデル群と、固定のAchromatopsiaグレースケール表示を含みます。個人の状態を判定するものではありません。
公開されたMachado行列のサンプル間を補間する例示設定です。割合は個人の臨床的な程度を測定しません。
関係するモードをすべて試してください。ProtanとDeutanは主に赤緑の区別、Tritanは別の青黄関連モデル範囲を確認します。
いいえ。画像と生成ピクセルは現在のブラウザーセッション内に留まり、リセット、差し替え、移動、終了時に解放されます。
固定の輝度保持グレースケール表示だけを使い、単色視の程度、羞明、視力、眼振などはモデル化しないためです。
いいえ。コントラストと色以外の手掛かりも確認し、自動・手動検査と実際の利用者によるテストを組み合わせてください。
方法とアクセシビリティの情報源
シミュレーションはMachado、Oliveira、Fernandes（2009）に基づきます。健康情報は色覚差とAchromatopsiaを、WCAG資料はデザイン指針を説明します。各機関は本サイトを審査・推奨していません。
- Machado, Oliveira & Fernandes color vision model (2009)
- National Eye Institute: Color Blindness
- MedlinePlus Genetics: Achromatopsia
- W3C WCAG: Understanding Use of Color
- W3C WCAG: Understanding Contrast (Minimum)
教育的デザインの近似のみです。医療検査、診断、認証、または個人の視覚の正確な再現ではありません。