デザインや配色が色覚特性を持つ方にどう見えるか、8種類のシミュレーションで即確認。Webデザイン・UI・データビジュアライゼーションのアクセシビリティ改善に。
色を入力
シミュレーション結果
色はVienot/Brettelアルゴリズムによる近似値です。医学的な診断基準ではなく、視覚的な参考としてご利用ください。
アクセシビリティのヒント
色覚特性に配慮したデザインのポイント
- 色だけで情報を伝えない — ラベル・アイコン・パターンを併用する。
- 隣接する色のコントラスト比をWCAG AA基準（テキスト4.5:1以上）に保つ。
- グラフやUIの主な区別に赤と緑の組み合わせだけを使わない。
- データビジュアライゼーションにはOkabe-Ito・IBM Carbonなどのカラーブラインドフレンドリーパレットを使う。
- 色コードに加えてテクスチャやパターンをグラフに使用する。
- 色によって表現された情報には代替テキストを提供する。
- 実際にシミュレーターで確認してからリリースする習慣をつける。
色覚特性の統計
| 種類 | 説明 | 推定割合 |
|---|---|---|
| デュータノピア (Deuteranopia) | 緑錐体なし（赤緑型） | 男性の約1% |
| プロタノピア (Protanopia) | 赤錐体なし（赤緑型） | 男性の約1% |
| デュータノマリー (Deuteranomaly) | 緑錐体がずれ（最多） | 男性の約5% |
| プロタノマリー (Protanomaly) | 赤錐体がずれ | 男性の約1% |
| トリタノピア (Tritanopia) | 青錐体なし（青黄型） | 約0.003% |
| トリタノマリー (Tritanomaly) | 青錐体がずれ | 約0.01% |
| アクロマトプシア (Achromatopsia) | 完全色盲 | 約0.003% |
| アクロマトマリー (Achromatomaly) | 色覚が著しく低下 | まれ |
出典：Colour Blind Awareness。赤緑型はX染色体連鎖のため男性に多く、男性全体の約8%・女性の約0.5%が何らかの色覚特性を持つとされています。
コントラスト比を確認 → カラーコントラストチェッカー
色を変換 → カラーコンバーター
パレットを生成 → カラーパレットジェネレーター
確定申告・会計をもっとラクに？ freee会計 なら、フリーランスの経費管理もクラウドで簡単。まずは無料で試してみましょう。