色覚シミュレータ — 自分の配色が他の人にどう見えるか
画像やデザインが、色覚のタイプによってどう見えるかを再現します。1型・2型・3型の三種類に対応し、程度も調整できます。画像はブラウザの外に出ません。
日本人男性のおよそ20人に1人、女性のおよそ500人に1人が、一般的な色覚と異なる見え方をすると言われます。20人のクラスに1人、100人が見る資料なら数人という規模です。
多くは赤と緑の区別がつきにくいタイプです。赤と緑で正誤を分けたグラフ、赤字の注意書き、緑のボタンと赤のボタン。作った側には明確でも、区別できない人がいます。
三つのタイプ
| タイプ | 見え方 | 割合 |
|---|---|---|
| 2型（緑が弱い） | 赤と緑が近く見える | 最も多い |
| 1型（赤が弱い） | 赤が暗く沈んで見える | 次に多い |
| 3型（青が弱い） | 青と黄が近く見える | まれ |
色に頼らない作り方
対策は単純で、色だけで情報を区別しないことです。グラフの系列は線の種類や記号も変える。必須項目は色だけでなく記号や文字でも示す。ボタンは色だけでなく文言で区別する。
明度の差を付けるのも有効です。色相が区別できなくても、明るさの差は伝わります。コントラスト比を確認しておけば、色覚のタイプにかかわらず読めます。
赤と緑を隣り合わせないのも実用的な工夫です。どうしても使うなら、片方を明るく、片方を暗くしてください。
シミュレータの限界
ここで再現されるのは、代表的なモデルに基づく近似です。実際の見え方は人によって幅があり、程度も一様ではありません。「この人にはこう見える」と断定するものではありません。
それでも、赤と緑の区別に頼った設計がどれだけ危ういかは、切り替えてみればすぐに分かります。作った資料を一度通してみるだけで、気づく点があるはずです。
印刷物にも同じことが言えます。白黒印刷で区別できるかどうかを確認すると、明度の差が足りているかの目安になります。
よくある質問
どのタイプで確認すればよいですか？
最も多い2型から確認してください。赤と緑を使った箇所が区別できるかが要点です。
再現は正確ですか？
代表的なモデルに基づく近似です。実際の見え方には個人差があります。
画像以外も確認できますか？
このツールは画像を対象にします。画面全体を確認したい場合はスクリーンショットを撮って読み込ませてください。
画像はアップロードされますか？
されません。処理はすべてブラウザの中で行われます。