配色・画像を P型・D型・T型・1色覚の見え方で再現（LMS色空間ベース／ブラウザ完結）
この色覚シミュレーターは、配色（HEXカラーコード）や画像が、色覚特性のある人にどのように見えるかをブラウザ内で再現する無料ツールです。P型（1型・赤系の錐体に関する色弱）、D型（2型・緑系）、T型（3型・青系）、そして1色覚（全色盲）の4タイプについて、色覚シミュレーションの結果を並べて確認できます。インストールや会員登録は不要で、入力した配色や選んだ画像はサーバーに送信されず、すべての計算がお使いの端末内で完結します。カラーユニバーサルデザインの検証や、Web・資料・アプリの配色改善にご活用ください。
使い方は2通りです。①配色モードでは、確認したいカラーコードを1行に1色ずつ（またはカンマ・空白区切りで）入力します。入力するたびに、元の色と各色覚タイプでの見え方がスウォッチで横並びに表示され、見分けにくくなる色の組み合わせを一目で把握できます。②画像モードでは、ローカルの画像を選ぶだけで、Canvasによるピクセル処理で4タイプの見え方を生成します。グラフ・地図・UIのスクリーンショットなどをそのまま検証できます。
| タイプ | 別称 | 特徴 |
|---|---|---|
| P型 | 1型・protanopia | 赤に反応する錐体（L錐体）に関するタイプ。赤や緑が暗く・見分けにくく感じられる。 |
| D型 | 2型・deuteranopia | 緑に反応する錐体（M錐体）に関するタイプ。日本人男性で最も多い。赤緑の区別が難しい。 |
| T型 | 3型・tritanopia | 青に反応する錐体（S錐体）に関するタイプ。頻度は低い。青と緑、黄と紫が見分けにくい。 |
| 1色覚 | 全色盲・achromatopsia | 色の区別がほとんどできず、明暗（グレースケール）で世界を捉える。非常にまれ。 |
本ツールの色覚シミュレーションは、人の目の錐体応答をモデル化したLMS色空間を利用します。まず画面の色（sRGB）をガンマ補正を外してリニアRGBに変換し、変換行列でLMS（L=長波長・赤、M=中波長・緑、S=短波長・青の錐体応答）へ写します。次に、対象の錐体応答を欠損・置換する色覚変換行列（Brettel・Viénot・Mollon らの研究に基づく係数）を適用し、再びリニアRGB、sRGBへ戻します。この標準的な手順により、P型・D型・T型それぞれの見え方を再現します。1色覚は、リニア輝度（0.2126R + 0.7152G + 0.0722B）に基づくグレースケール化で近似しています。
これらの変換は外部ライブラリやAPIを使わず、すべてJavaScript内にインライン実装しています。依存はゼロで、ネットワーク接続がなくても動作し、配色データや画像がブラウザの外に出ることはありません。機密性のあるデザイン案でも安心して色弱・色覚特性の観点から検証できます。
色覚には個人差があり、日本人男性の約5%が何らかの色覚特性を持つとされます。誰にとっても情報が正しく伝わるように配色を工夫する考え方がカラーユニバーサルデザイン（CUD）です。最も基本となるのは「色だけで情報を伝えない」こと。グラフの系列や必須マーク、リンク、状態表示などは、色に加えて形・アイコン・テキストラベル・下線・パターンといった別の手がかりを併用します。
| 配慮の観点 | 具体策 |
|---|---|
| 見分けにくい配色を避ける | 赤×緑、赤×黒、緑×茶、青×紫などは明度差を付けるか置き換える |
| 色以外の手がかり | 形・アイコン・ラベル・下線・線種・ハッチングを併用する |
| コントラスト | 文字と背景は WCAG 基準（通常テキスト 4.5:1 以上）を確保する |
| 検証 | 本ツールのようなシミュレーターで実際の見え方を確認する |
色覚への配慮は、Webアクセシビリティ（誰もが使える設計）の重要な一部です。WCAG（Web Content Accessibility Guidelines）でも「色の使用（1.4.1）」として、色だけを情報伝達の唯一の手段にしないことが求められています。本ツールは、色覚シミュレーションの結果を手元ですぐ確認できるようにすることで、設計・レビューの段階からアクセシブルな配色を選ぶ助けになります。数値上のコントラスト確認と合わせて、実際の見え方の確認を習慣にすることをおすすめします。