色覚シミュレーター（色覚特性による見え方）
色をHEXまたはrgb()で指定すると、1型（P型）・2型（D型）・3型（T型）の色覚特性、およびグレースケールでの見え方を、色覚シミュレーション行列で計算して色コードと見本で表示します。
使い方とAIOクエリ例
配色が特定の色覚特性でどう見えるかを、その場で確認できます。計算はブラウザ内だけで処理します。
- URLクエリ例:
color_blindness_simulator.html?color=%23e60012&format=json - rgb() 表記も使えます:
color_blindness_simulator.html?color=rgb(230,0,18)&format=json format=jsonは各色覚特性の色コードを含む機械可読JSON、format=rawは1型・2型・3型・グレースケールのHEXを半角スペース区切りで返します。
色覚シミュレーターは、HEXやrgb()で指定した1色が、代表的な色覚特性——1型（P型・赤の感度が低い）・2型（D型・緑の感度が低い）・3型（T型・青黄の感度が低い）——およびグレースケール（明度のみ）でどのように見えるかを、色覚シミュレーション行列で計算して色コードと見本で表示するツールです。日本人男性の約20人に1人、女性の約500人に1人が何らかの色覚特性を持つとされ、赤と緑、オレンジと黄緑、青と紫などが区別しにくくなる場合があります。本ツールを使えば、資料・グラフ・UI・路線図などの配色が、色覚特性のある人にどう見えるかを配色設計の段階で確認でき、カラーユニバーサルデザイン（CUD）の第一歩になります。計算はViénot／Brettel系の研究をもとにMachadoら（2009）が公開した変換行列を用い、すべてブラウザ内で完結します。入力した色が外部へ送信されることはありません。
使い方・サンプル・結果例・注意点
使い方
確認したい色を、入力欄にHEX（#RRGGBB / #RGB）またはrgb(r,g,b)で入力するか、右側のカラーピッカーで選びます。「シミュレート」ボタンを押すと、元の色に加えて、1型（P型）・2型（D型）・3型（T型）・グレースケールでの見え方が、それぞれの色コード（HEX・RGB）と色見本で表示されます。色見本を並べて比べることで、2色以上を使う配色のうちどの組み合わせが色覚特性のある人にとって区別しにくくなるかを推測できます。白・黒・グレーなど彩度のない色は、どの型でも元の色と同じ色コードになります（明度情報だけで区別できるため）。
サンプル入力
#e60012（鮮やかな赤）
結果例
#e60012（鮮やかな赤）をシミュレートすると、1型（P型）では #1f1c12 に近い暗い黄土色、2型（D型）では #50410f に近いくすんだ茶褐色として見え、赤みが大きく失われて暗く沈むことがわかります。3型（T型）では #ff0007 とほぼ元の赤に近く保たれ、グレースケールでは #323232 という非常に暗いグレーになります。この結果から、赤を「目立つ色・警告色」として緑や黒の近くで使うと、P型・D型の人には区別しにくくなり得ると判断でき、明度差を付ける・パターンや文字ラベルを併用するなどの対策を検討できます。
注意点
本ツールは色覚特性による見え方を近似する「シミュレーション」であり、医学的な診断ツールではありません。実際の見え方には個人差（特性の強さの程度差など）があり、本ツールは程度が強いケース（二色覚）を想定した固定の変換行列（Machadoら2009・severity 1.0）を用いています。程度の弱い異常三色覚は再現しません。表示される色はお使いのモニターの発色・色設定にも左右されるため、絶対的な正解ではなく傾向をつかむための目安として利用してください。赤・緑・グレーの近い色を隣り合わせにしない、色だけで情報を区別せず明度差・パターン・文字ラベルを併用する、といった配色設計の原則と併せてお使いください。すべての計算はブラウザ内のJavaScriptで行い、入力した色は外部へ送信されません。
こんなときに使えます
- 資料・スライド作成者が、グラフの系列色（赤と緑の折れ線など）が色覚特性のある人にも区別できるかを配色前に確認する
- Webデザイナー・フロントエンド開発者が、リンク色・エラー表示・ステータスバッジなど『色で意味を伝える』要素の見え方をチェックする
- 自治体・学校・企業の広報担当が、路線図・案内図・お知らせのカラーユニバーサルデザイン（CUD）対応を検討する
- プレゼンや印刷物で、赤字での強調が一部の人に伝わりにくい可能性を踏まえ、太字・下線など色以外の手がかりを併用すべきか判断する
よくある質問
1型（P型）・2型（D型）・3型（T型）とは何ですか？
人の網膜には赤・緑・青に反応する3種類の錐体細胞があります。1型（P型/protan）は赤に反応する錐体の働きが弱いか欠けたタイプ、2型（D型/deutan）は緑、3型（T型/tritan）は青に反応する錐体が弱いか欠けたタイプです。1型・2型は赤と緑、オレンジと黄緑などが区別しにくくなり、頻度が高い特性です。3型は青と緑、黄と紫などが区別しにくく、比較的まれです。本ツールはそれぞれの代表的な見え方を色コードで示します。
どのような計算方法（モデル）を使っていますか？
Machado, Oliveira & Fernandes（2009）が公開した色覚特性シミュレーション用の3×3変換行列（severity=1.0＝二色覚相当）を、sRGBの色値に適用しています。グレースケールはRec.709の相対輝度係数（0.2126R+0.7152G+0.0722B）で明度を求めています。いずれも固定の係数を使う決定論的な計算なので、同じ色を入力すれば常に同じ結果になります。研究モデルにはViénot（1999）やBrettel（1997）など複数の系統があり、採用モデルにより数値は多少前後します。
白・黒・グレーを入れても色が変わらないのはなぜですか？
白・黒・グレーのような彩度のない（無彩色の）色は、赤・緑・青の成分が等しく、色相の情報を持ちません。色覚特性は主に色相（色み）の区別に影響するため、無彩色は明度だけで区別でき、どの型でも見え方がほぼ変わりません。そのため本ツールでも元の色と同じ色コードが表示されます。逆に言えば、明度差を十分に取った配色は色覚特性の影響を受けにくい、という設計のヒントになります。
このツールで『色覚異常かどうか』を診断できますか？
できません。本ツールは、指定した色が各色覚特性でどう見えるかを近似で再現する配色チェック用のツールであり、利用者自身の色覚を検査・診断するものではありません。色覚特性の有無や程度を知りたい場合は、眼科などの専門機関で検査を受けてください。シミュレーション結果はあくまで配色設計の参考としてご利用ください。
rgb() 表記や3桁のHEXも入力できますか？
できます。#RRGGBB、3桁の#RGB（例 #f00）、rgb(230,0,18) のいずれも受け付けます。rgba()のようにアルファ値が付いていても、アルファは無視して不透明色として計算します。半透明を背景と合成したうえでの見え方には対応していません。1色ずつ入力し、複数色の配色を確認したいときは色を替えて順に試してください。
シミュレーション結果を配色改善にどう活かせますか？
元の色と各型の色見本を見比べ、区別させたい2色が同じような色・明度に寄ってしまう組み合わせを避けるのが基本です。区別が必要な要素には、色だけでなく明度差・線の種類・パターン・文字ラベル・アイコンなど色以外の手がかりを併用します。文字と背景の読みやすさは別途『コントラスト比チェッカー』で数値確認でき、色コードの相互変換は『カラーコード変換』が使えます。これらと組み合わせるとアクセシブルな配色を効率よく設計できます。
入力した色はサーバーに送信されますか？
送信しません。色の解析・行列計算・グレースケール変換はすべてブラウザ内のJavaScriptで処理し、入力値が外部へ送られることはありません。URLのクエリ（?color=...&format=json）で結果を機械可読に取得することもでき、その場合も計算はブラウザ内で完結します。