👁️ 色覚シミュレーション(色弱の見え方)
配色や画像が、色覚特性(いわゆる色弱・色盲)によってどう見えるかを簡易シミュレーションします。P型(1型・赤系)・D型(2型・緑系)・T型(3型・青系)・1色覚(グレースケール)の見え方を並べて確認できます。処理はすべてブラウザ内で完結し、色や画像はどこにも送信されません。
入力
カラーピッカーで選ぶか、#RRGGBB 形式のHEXを直接入力できます。「#」は省略しても構いません。
端末内の画像を読み込みます(アップロードされません)。大きな画像は最大幅1000px程度に縮小してから処理します。
それぞれの見え方(HEX)
各カードの色をタップ/クリックするか「HEXをコピー」で、シミュレーション後の色コードをコピーできます。
画像を選ぶと、選択した色覚タイプでの見え方を表示します。
解説
色覚特性(いわゆる色弱・色盲)は、目の網膜にある3種類の錐体(赤・緑・青に反応する細胞)のうち、一部の働き方が多数派と異なることで生じます。代表的なのは、赤に反応する錐体が関わる1型(P型・Protan)、緑に関わる2型(D型・Deutan)、青に関わる3型(T型・Tritan)で、いずれも赤と緑、あるいは青と黄などの区別がつきにくくなる傾向があります。加えて、色をほとんど明るさの差でしか捉えない1色覚(全色盲・モノクロ)もあります。日本では男性の約5%(20人に1人)、女性の約0.2%が色覚特性を持つとされ、決して珍しいものではありません。
本ツールは、入力した色や画像に色覚シミュレーション用の変換をかけ、それぞれの型でどのように見えやすいかを並べて表示します。「色1つ」モードでは、選んだHEXが一般色覚・P型・D型・T型・1色覚でどう変化するかを、変換後のHEXコード付きで比較できます。「画像」モードでは、読み込んだ画像の全ピクセルを同じ方法で変換し、見え方を切り替えて確認できます。すべての処理はお使いの端末内(ブラウザ内)で行われ、色や画像が外部に送られることはありません。
アクセシブルな配色の第一歩は、「色の違いだけに意味を持たせない」ことです。赤字と緑字で正誤を分ける、グラフを色分けだけで区別する、といった設計は、色覚特性のある人には伝わりにくくなります。色に加えて、形・位置・ラベル・模様(ハッチング)・明度差を併用する、赤と緑を隣接させない、細い線や小さな文字での色分けを避ける、といった工夫で多くの人に伝わりやすくなります。明度(明るさ)の差は色覚特性に関わらず知覚しやすいため、コントラスト比の確保も有効です。
なお、本ツールが用いるのは代表的な色覚タイプを近似する簡易シミュレーションであり、実際の見え方には大きな個人差があります(同じ「P型」でも程度は人それぞれで、色の感じ方は本人にしか分かりません)。結果は配色を見直すきっかけの目安としてお使いください。本ツールは医療的な診断や検査ではありません。色の見え方についての正確な検査や相談は、眼科などの専門機関をご利用ください。
よくある質問
P型・D型・T型・1色覚とは何ですか?
P型(1型・Protan)は赤に反応する錐体、D型(2型・Deutan)は緑の錐体、T型(3型・Tritan)は青の錐体が関わる色覚特性です。P型・D型は赤と緑の区別が、T型は青と黄の区別がつきにくくなる傾向があります。1色覚は色をほとんど明るさの差でしか捉えず、本ツールではグレースケールで表します。
このシミュレーションはどのくらい正確ですか?
代表的な色覚タイプを近似する変換行列を用いた簡易的なものです。実際の見え方には強い個人差があり、程度もさまざまなので、結果はあくまで「配色を見直す目安」としてお使いください。厳密な検証にはご本人の確認や専門的な評価が必要です。
色や画像はサーバーに送信されますか?
送信されません。HEXの変換も画像のピクセル処理も、すべてお使いのブラウザ内で完結します。読み込んだ画像はメモリ上で処理されるだけで、どこにもアップロードされません。オフラインでも利用できます。
医療的な色覚検査の代わりになりますか?
なりません。本ツールは配色や画像の見え方を確認するための簡易シミュレーションで、診断や検査を目的としたものではありません。色の見え方について正確に知りたい場合は、眼科などの専門機関にご相談ください。
アクセシブルな配色にするコツは?
色の違いだけに意味を持たせないことが基本です。色に加えて形・位置・ラベル・模様・明度差を併用し、赤と緑を隣接させない、細線や小さな文字での色分けを避ける、十分なコントラスト比を確保する、といった工夫が有効です。明度差は色覚特性に関わらず知覚しやすいので特に役立ちます。
CSSのフィルターで色を変えているのですか?
いいえ。見た目だけを変えるCSSフィルターではなく、JavaScriptでRGB値そのものを変換行列で計算しています。そのため変換後の実際のHEXコードを取得でき、画像もピクセル単位で処理した結果を表示します。
大きな画像でも使えますか?
使えます。処理を軽くするため、幅が1000pxを超える画像は自動的に最大幅1000px程度へ縮小してから変換します。元の画像ファイル自体は変更されません。
グレースケール(1色覚)はどう計算していますか?
人間の目の感度に合わせた輝度の式 0.299×R + 0.587×G + 0.114×B で明るさを求め、R・G・Bをすべてその値に置き換えています。たとえば純粋な赤 #FF0000 の輝度は約76となり、中間よりやや暗いグレーになります。