色覚シミュレーションの使い方｜配色が色弱でどう見えるか確かめる

公開日：2026年10月4日更新日：2026年9月15日運営：シルギア（Analyzegear, Inc.）対象ツール：色覚シミュレーション（色弱の見え方）

グラフを赤と緑で色分けした、注意書きを赤字だけで強調した——そんな配色は、色覚特性のある人には意図どおり伝わらないことがあります。このツールは、選んだ色や読み込んだ画像が代表的な色覚タイプでどう見えるかを並べて表示し、配色を見直すきっかけをつくります。処理はすべてブラウザ内で完結し、色や画像は外部に送信されません。

色覚特性にはどんな種類があるか

ヒトの網膜には、主に赤・緑・青の光に反応する3種類の錐体があります。このうち一部の働きが多数派と異なると、特定の色の組み合わせが見分けにくくなります。代表的な分類は次のとおりです。

1型（P型・Protan）：赤に反応する錐体が関わるタイプ。赤と緑の区別がつきにくくなる傾向があります。
2型（D型・Deutan）：緑の錐体が関わるタイプ。こちらも赤と緑の判別が難しくなりがちです。
3型（T型・Tritan）：青の錐体が関わるタイプで、青と黄の区別がつきにくくなる傾向があります。1型・2型より頻度は低いとされます。
1色覚（全色盲）：色をほとんど明るさの差でしか捉えないタイプ。本ツールではグレースケールで表します。

頻度は集団や統計によって幅がありますが、一般には日本人男性の約5%（およそ20人に1人）、女性の約0.2%が何らかの色覚特性を持つと言われます。あくまで目安ですが、決して珍しいものではなく、多くの人が閲覧する画面では配慮する価値があります。

なぜ赤と緑が見分けにくいのか

色の識別は、3種類の錐体が受け取る信号のバランスから脳が色を組み立てることで成り立っています。赤と緑に反応する錐体は感度のピークが近く、どちらかの働きが弱まったり多数派とずれたりすると、赤系と緑系の信号差が小さくなります。その結果、赤・オレンジ・黄・緑あたりが似た色として感じられ、区別が難しくなります。一方で明るさ（明度）の情報は比較的保たれるため、色そのものが違っても明暗の差があれば見分けやすくなる——これがアクセシブルな配色の重要なヒントになります。

シミュレーションの仕組み

本ツールは見た目だけを変えるCSSフィルターではなく、JavaScriptでRGB値そのものを計算します。P型・D型・T型は、それぞれの見え方を近似する3×3の変換行列を各ピクセルのR・G・Bに掛け合わせ、0〜255の範囲に収めて新しい色を求めます。たとえばD型では、赤 #FF0000 は R=0.625×255≒159、G=0.7×255≒179、B=0 となり、くすんだ黄緑 #9FB300 に変換されます。純粋な赤が緑寄りに寄って見える様子が数値でも確認できます。

1色覚（グレースケール）は、人間の目の感度に合わせた輝度の式 0.299×R＋0.587×G＋0.114×B で明るさを求め、R・G・Bをすべてその値に置き換えます。赤 #FF0000 なら輝度は約76となり、#4C4C4C の中間よりやや暗いグレーになります。緑の係数が大きいのは、目が緑の明るさに最も敏感だからです。ただし、これらはあくまで代表的なタイプを近似する簡易的な変換です。同じ型でも程度は人それぞれで、実際の見え方には強い個人差があります。

色だけに頼らないアクセシブルな配色

アクセシブルな配色の第一歩は、色の違いだけに意味を持たせないことです。次のような工夫で、色覚特性の有無にかかわらず情報が伝わりやすくなります。

色に加えて、形・位置・ラベル・模様（ハッチング）を併用する。グラフなら凡例と直接ラベル、線の種類の違いを添える。
赤と緑を隣り合わせて意味を対比させない。可能なら青系×オレンジ系など、明度差の出る組み合わせにする。
細い線や小さな文字だけで色分けしない。面積が小さいほど色の違いは伝わりにくくなります。
十分なコントラスト比を確保する。明度差は色覚特性に関わらず知覚しやすいため、特に有効です。

このツールで実際の配色を各タイプに変換し、区別がつきにくくなっていないかを確かめれば、こうした改善点に早い段階で気づけます。

ツールの使い方

まず上部でモードを選びます。1つの色を確認したいときは「色1つ（HEX）で比較」、写真や図の見え方を試したいときは「画像で比較」を選びます。

色モードでは、カラーピッカーで色を選ぶか、#RRGGBB 形式のHEXを直接入力します（先頭の「#」は省略可、3桁の短縮形にも対応）。
一般色覚・P型・D型・T型・1色覚の見え方が、変換後のHEX付きで横に並びます。各カードの色ブロックか「HEXをコピー」を押すと、その色コードをコピーできます。
画像モードでは端末内の画像を選ぶと読み込まれ、幅が1000pxを超える場合は最大幅1000px程度に自動縮小してから処理します。
「見え方を切り替え」で色覚タイプを選ぶと、その型で全ピクセルを変換した結果を表示します。赤と緑、青と黄などが混ざって見えないかを確認しましょう。

注意点とプライバシー

本ツールは配色や画像の見え方を確認するための簡易シミュレーションであり、医療的な診断や検査ではありません。用いている変換は代表的なタイプの近似で、実際の見え方には大きな個人差があります。結果は配色を見直す目安として活用し、色の見え方を正確に知りたい場合は眼科などの専門機関にご相談ください。なお、HEXの変換も画像のピクセル処理もすべてお使いのブラウザ内で行われ、読み込んだ画像はメモリ上で処理されるだけで、どこにもアップロードされません。オフラインでも利用できます。

「色覚シミュレーション（色弱の見え方）」を使ってみる →