色覚異常シミュレーター
男性の約 8%、女性の 0.5% が何らかの色覚特性を持ち、特に赤緑系が多いとされています。デザイン、スクリーンショット、イラストをアップロードし、シミュレーションモードを 1 つ選ぶと、元画像とシミュレーション結果を並べて比較できます。色だけに頼らず、チャート、地図、UI が読みやすいか確認するのに役立ちます。
シミュレーターの仕組み
-
1
画像をドロップ
PNG、JPG、WebP、または SVG。ブラウザで処理されます - 何もアップロードされません。
-
2
シミュレーションモードを選択
1型色覚、1型色弱、2型色覚、2型色弱、3型色覚、3型色弱、全色盲、全色弱から選べます。
-
3
並べてプレビュー
ブラウザが行列変換を適用し、元画像と選択したシミュレーションを並べて表示します。
-
4
シミュレーション画像を書き出し
選択したシミュレーションを PNG でダウンロードしたり、デザインレビュー用に比較画面をスクリーンショットできます。
色覚異常の形態
| 状態 | 有病率 | 特徴 |
|---|---|---|
| 第二色弱 | 男性の約 5% | 赤と緑の異常、M 錐体の感度がずれる |
| 第一色弱 | 男性の約 1% | 赤と緑の異常、L 錐体の感度がずれる |
| 第二色盲 | 男性の約 1% | M 錐体が欠損し、赤と緑の区別がほとんどつかない |
| 第一色盲 | 男性の約 1% | L 錐体が欠損し、赤の見え方がずれる |
| 第三色盲 | 非常にまれ | S 錐体が欠損し、青と黄の区別ができなくなる |
| 第三色弱 | 非常にまれ | S 錐体の感度がずれ、青と黄の識別がやや弱い |
| 全色盲 | 極めてまれ | 色をまったく認識できず、白黒のみ |
多くのデザイナーは、赤緑系の色覚特性が最も多いため、まず 2 型色覚と 1 型色覚で確認し、その後に色弱系や青黄系のモードも加えて広くチェックします。
設計への影響
- 状態を区別するために赤/緑のみに依存しないでください。エラー/成功インジケーターには、色に加えて、形状、アイコン、またはテキスト ラベルが必要です。赤い X と緑のチェックは明らかに異なります。赤と緑の丸はそうではありません。
- チャート: パターン塗りつぶし、直接ラベル、または知覚的に異なるパレット (ColorBrewer、Viridis) を使用します。データ視覚化には信号パレットを使用しないでください。
- 地図: 領域を区別するための境界線とハッチング。色だけでは失敗します。
- ハイパーリンク: 色だけでスタイルを設定することはありません。下線や太さは、正常な色覚を持つ人を含むすべての人に役立ちます。
- 必須フォームフィールド: 赤いアスタリスクと「必須」ラベル、または赤い枠線と「必須」ヘルパーテキスト。
- ステータスインジケータ: 信号機の赤/琥珀/緑は、唯一の信号としてではなく、補強として機能します。
カラーセーフなデザインに適したパレットの選択
- Viridis (matplotlib、D3 でデフォルトで使用): 紫から黄色、知覚的に均一。
- ColorBrewer 定性: 一般的な CVD フォームでも区別できるように設計された 8 つの異なる色相。
- Okabe-Ito: 色覚異常のある方向けに特別に設計された 8 色パレット。
ツールとテスト
- シミュレーター プレビュー (このツール)、簡単な視覚チェック。
- WCAG コントラスト チェッカー、色の知覚に関係なく、テキストが読みやすい状態に保たれることを保証します。
- 実際のユーザー テスト、実際の色覚異常ユーザーにデザインを見せることに代わるものはありません。
面白い事実
現代の色覚シミュレーターは、錐体の反応を RGB に写す近似行列を使います。プレビューは実用的なデザイン確認として扱い、医学的な診断や特定の人の見え方を完全に再現したものとは考えないでください。
よくある質問
有用な近似ですが、実際の色の感じ方は人によって異なります。赤緑系の色覚特性の多くは軽度から重度まで連続的なので、プレビューは診断ではなくデザイン上の判断材料として使ってください。
第二色弱は、色覚異常のユーザーの最大部分（男性の約 5%）を占めます。重症型の第二色盲で確認できれば、より軽度の異常でも問題なく見える可能性が高いため、まず第二色盲でのチェックをおすすめします。
はい、ただし頻度ははるかに低くなります (~0.5%)。赤緑欠損症はX連鎖劣性遺伝であるため、男性（XY）には影響を受けるXが1つだけ必要です。女性（XX）は両方が必要です。トリタノピア（第三色盲）は常染色体性で、男女に等しく影響します。
このツールでは直接ではありません。これは一般的なロービジョン シミュレーションであり、ぼかしやコントラストの低減も含まれます。完全なアクセシビリティ シミュレーションについては、Chrome の Lighthouse や NoCoffee などの専用ツールがそれらをカバーします。
関連ツール
マテリアルデザイン カラーピッカー
Material Designのカラーパレットを閲覧できます。任意の色調（50からA700）を1タップでHEX、RGB、HSL形式でコピーできます。
ファンタジーマップ作成ツール
再現可能なシード、地形コントロール、視覚スタイルを使って、ブラウザ内で手続き型のファンタジーマップを作成します。実在の地理ではなく、ローカルでSVGまたはPNGの作品をダウンロードできます。
QRコード生成ツール
テキストまたはURLから、ブラウザ内でQRコードを作成してPNGとしてダウンロードできます。
GIFメーカー
連番画像をアニメーションGIFに変換します。書き出し前にフレームレート、品質、サイズを調整できます。
表彰状作成ツール
文面、ロゴ、デザイン、用紙サイズを選び、表彰・参加・修了のための印刷可能な表彰状を作成できます。TLS/SSL証明書ではありません。
グラフィティ文字ジェネレーター
タグ、バブル、ブロック、ステンシル、ネオン、ワイルドの効果で文字をデザイン。色を調整し、ブラウザー内でPNGまたはSVGを書き出せます。