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見分けやすくする直し方

      1. 色だけで区別しない

        グラフは実線・点線・模様で分け、凡例は離れた場所に置かず線や棒のすぐ横に名前を書きます。

      2. 形や文字を添える

        「○・×」「必須」「売り切れ」などの文字や記号を色と一緒に入れれば、色が分からなくても意味が伝わります。

      3. 明るさの差(コントラスト)をつける

        明るい色と暗い色を組み合わせると、どの見え方でも区別しやすくなります。文字なら背景とのコントラスト比 4.5 以上が目安です。

      4. 赤は朱色寄り、緑は青み寄りに

        赤は #FF4B00 のようなオレンジ寄り、緑は #03AF7A のような青みのある緑にすると、1型・2型の人にも見分けやすくなります。(カラーユニバーサルデザイン推奨配色セットより)

      5. 白黒にしても伝わるかを見る

        上の「1色覚」の画像で、大事な情報が読み取れるかを確かめます。白黒コピーで配るチラシの確認にもなります。

      文字色と背景色の組み合わせは、コントラスト比を数字で確かめられます。

      文字色コントラスト確認へ

      画像の読み込み・変換・保存は、すべてお使いのブラウザ内で行います。画像が外部に送信されることはありません。長辺が2000pxを超える画像は、2000pxに縮小してから変換します。