アクセシビリティ / 色
色覚シミュレーター
画像、グラフ、デザインを、1型2色覚、2型2色覚、3型2色覚、全色盲の人の見え方で比較できます。軽度の場合にも対応しています。
色覚シミュレーター: 色覚異常は、目にある3種類の錐体のうち1種類が失われることで生じます。このシミュレーターは、Brettel、Viénot、Mollon（1997）の手法を使って、すべてのピクセルを錐体の応答に変換し、その錐体を持たない人が見分けられる色へ変換します。この手法は研究文献で参照されている方法で、オープンソースプロジェクトDaltonLensにも実装されています。軽度の場合は、シミュレーション結果と元の画像を混ぜ合わせます。全色盲では明るさだけを残します。 サーバーへのファイルアップロードは一切なく、100%ブラウザ内でローカル実行します。
- カテゴリ
- 日常ツール
- 実行回数
- ブラウザ内で
- コスト
- 無料 · 登録不要
- 提供状況
- すぐに使えます
完全にブラウザ内で実行します
クリック、ドラッグ＆ドロップ、または貼り付け · このデバイス上にとどまります
100%では、錐体の種類が1つ完全に欠けています（2色覚）。
赤緑型と青黄型
1型色覚と2型色覚では、赤、オレンジ、黄色、緑がいずれも黄みがかった茶色の範囲に見えます。また、1型色覚では赤がより暗く見えます。3型色覚では、青と緑、黄色とピンクを見分けにくくなります。どのタイプでも明度の違いは見分けられるため、色相よりもコントラストが重要です。
文字と背景を明度で見分けやすくするには、colour contrast checkerを使用してください。
グラフと地図
グラフは、凡例と線や棒の対応づけを色だけに頼るため、特に影響を受けます。線に直接ラベルを付ける、色相だけでなく明度も変える、または青とオレンジのような色覚異常に配慮したパレットを使用するとよいでしょう。既存のグラフから色を取り出して比較するには、colour palette extractorを使用してください。
使い方
- 画像、スクリーンショット、デザインを選択またはドロップします。操作するまで色のサンプルが表示されます。
- 5つのバージョンを左右に並べて比較します。軽度の場合は強度を下げてください。
- シミュレーションしたバージョンをダウンロードして、チームで共有できます。
プライバシーと制限事項
画像はブラウザ内で処理され、アップロードされることはありません。
関連ツール
よくある質問
色覚異常はどのくらい一般的ですか？
北欧系の人では、男性の約8%、女性の0.5%に何らかの赤緑色覚異常があり、その多くは軽度の2型3色覚です。青黄色覚（3型）と全色盲はまれです。
色覚異常のある人にも使いやすいデザインにするにはどうすればよいですか？
色だけに頼らず、ラベル、パターン、アイコンを加え、明るさのコントラストを十分に保ってください。赤と緑を並べる組み合わせは最も混同されやすく、青とオレンジの組み合わせのほうが安全です。
シミュレーションは正確ですか？
二色覚者が色をどのように見分けるかを再現する優れたモデルですが、個人が実際に感じる見え方そのものを再現するものではなく、感じ方には個人差があります。見分けにくくなる色を探すためにお使いください。
無料ツール · ブラウザ内で · アカウント不要