色覚シミュレーター
1 型・2 型・3 型色覚などで色や画像がどう見えるかを確認
- ファイルは端末の外に出ません
- ブラウザ内で処理
- 無料・登録不要・透かしなし
一般的な色覚
元の色
2 型 3 色覚（D 型色弱）
M 錐体が弱い · 男性の約 5%、最も多い
2 型 2 色覚（D 型）
M 錐体がない · 男性の約 1%
1 型 3 色覚（P 型色弱）
L 錐体が弱い · 男性の約 1%
1 型 2 色覚（P 型）
L 錐体がない · 男性の約 1%
3 型 3 色覚（T 型色弱）
S 錐体が弱い · まれ
3 型 2 色覚（T 型）
S 錐体がない · ごくまれ
1 色覚（全色盲）
色の区別がない · ごくまれ
7 組の色が見分けにくくなります
- #e53935 と #43a047（2 型 2 色覚（D 型）、ΔE 5.2）
- #43a047 と #fb8c00（1 型 2 色覚（P 型）、ΔE 6.4）
- #43a047 と #1e88e5（3 型 2 色覚（T 型）、ΔE 6.5）
- #e53935 と #43a047（1 色覚（全色盲）、ΔE 6.7）
- #e53935 と #1e88e5（1 色覚（全色盲）、ΔE 3.8）
- #43a047 と #1e88e5（1 色覚（全色盲）、ΔE 2.9）
- #43a047 と #fb8c00（1 色覚（全色盲）、ΔE 8.5）
本来は区別できる 2 色が、シミュレーションで ΔE2000 10 未満になると表示します。ラベル・模様・明度差を加えて区別しましょう。
色覚シミュレーターの使い方
パレットや画像が 8 種類の色覚でどう見えるかを確認できます。最も多い D 型色弱から全色盲まで対応し、パレットでは見分けにくくなる色の組み合わせをすべて一覧にするので、グラフや UI を早めに直せます。
- 1
「対象」で「パレット」か「画像」を選びます。
- 2
パレットなら「色」欄に 1 行 1 色かカンマ区切りで貼り付けます（HEX、rgb()、hsl()、oklch()、色名に対応）。画像なら JPG・PNG・WebP・GIF・HEIC・AVIF をドロップします。
- 3
「色弱の程度」で、3 色覚（色弱）タイプのシミュレーションの強さを調整します。
- 4
シミュレーション結果を見比べます。警告アイコンの付いた組み合わせは、ΔE とともに下に一覧表示されます。
- 5
色見本をクリックすると HEX をコピーでき、シミュレーション画像は PNG でダウンロードできます。
よくある質問
シミュレーションはどのくらい正確ですか？
赤緑系は Machado ら（2009）、青黄系は Brettel ら（1997）のモデルを使い、リニア RGB で計算しています。典型的な見え方のモデルであり、実際の見え方には個人差があります。
見分けにくい組み合わせはどう判定していますか？
通常の色覚では違って見える 2 色が、いずれかのシミュレーションで ΔE2000 が 10 未満になると警告します。その組み合わせにはラベルや模様を付けるか、明度の差をはっきりさせてください。
「色弱の程度」は何を変えますか？
3 色覚（色弱）タイプにだけ適用され、該当する錐体のずれの大きさを表します。100% で対応する 2 色覚タイプと同じになります。
画像はアップロードされますか？
いいえ。シミュレーションはブラウザ内で行います。プレビューは最大 900 px で描画し、ダウンロードは元の解像度で作成します。
CSS の色をそのまま貼り付けられますか？
はい。テキスト中の HEX や CSS の色関数を自動で拾い出します。色名はカンマか改行で区切ってください。読み取れなかったものはスキップとして表示されます。