Color Vision Simulator
色の見え方シミュレーター
チラシやサイトの画像が、色の見え方が違う人にどう見えるかを並べて確かめられます。
画像は外部に送信しません。読み込み・変換・保存は、すべてお使いのブラウザの中だけで行います。
スクリーンショットは Ctrl+V(Macは ⌘+V)でそのまま貼り付けられます。
COMPARE重ねて見比べる
境目より左が元の画像、右が選んだ見え方です。画像の上をなぞっても動かせます。
SIDE BY SIDE並べて見比べる
ABOUT色の見え方の種類
5%日本人男性の約20人に1人(約5%)、女性の約500人に1人(約0.2%)が1型または2型の色覚です。40人のクラスに1人はいる計算になります。
-
PROTAN1型色覚(P型)
赤い光を感じる細胞(L錐体)が働かない、または弱い見え方です。赤が暗く沈み、赤と緑・茶色、ピンクと水色やグレーが似て見えます。
-
DEUTAN2型色覚(D型)
緑の光を感じる細胞(M錐体)が働かない、または弱い見え方です。赤と緑、オレンジと黄緑、緑と茶色の区別がつきにくくなります。
-
TRITAN3型色覚(T型)
青い光を感じる細胞(S錐体)が働かない、または弱い見え方です。青と緑、黄色と白やピンクが似て見えます。とてもまれです。
-
MONOCHROMACY1色覚(全色盲)
色の違いはほとんど分からず、明るさの差だけで見ています。このツールではグレースケールで表すので、白黒コピーで伝わるかの確認にも使えます。とてもまれです。
1型・2型には程度の差があり、多くの人は「似た色が見分けにくい」程度です。このシミュレーションはいちばん強い程度を想定した目安で、実際の見え方は人によって違います。
- 割合:日本眼科学会「先天色覚異常」
- 変換の計算:Machado, Oliveira, Fernandes「A Physiologically-based Model for Simulation of Color Vision Deficiency」(IEEE TVCG, 2009)。1色覚は明るさ(輝度)だけのグレースケールで近似しています。
CAUTION区別しにくい色の組み合わせ
左が元の色、右がその見え方での色です。チラシの「売り切れ/販売中」やグラフの凡例など、色だけで意味を分けている所は特に注意してください。
HOW TO FIX見分けやすくする直し方
- 色だけで区別しない
グラフは実線・点線・模様で分け、凡例は離れた場所に置かず線や棒のすぐ横に名前を書きます。
- 形や文字を添える
「○・×」「必須」「売り切れ」などの文字や記号を色と一緒に入れれば、色が分からなくても意味が伝わります。
- 明るさの差(コントラスト)をつける
明るい色と暗い色を組み合わせると、どの見え方でも区別しやすくなります。文字なら背景とのコントラスト比 4.5 以上が目安です。
- 赤は朱色寄り、緑は青み寄りに
赤は
#FF4B00のようなオレンジ寄り、緑は#03AF7Aのような青みのある緑にすると、1型・2型の人にも見分けやすくなります。(カラーユニバーサルデザイン推奨配色セットより) - 白黒にしても伝わるかを見る
上の「1色覚」の画像で、大事な情報が読み取れるかを確かめます。白黒コピーで配るチラシの確認にもなります。
文字色と背景色の組み合わせは、コントラスト比を数字で確かめられます。
文字色コントラスト確認へ画像の読み込み・変換・保存は、すべてお使いのブラウザ内で行います。画像が外部に送信されることはありません。長辺が2000pxを超える画像は、2000pxに縮小してから変換します。