色覚シミュレーター(色覚多様性の見え方確認)
画像を読み込むか、カラーコードを入力するだけで、P型(1型)・D型(2型)・T型(3型)・全色盲の見え方を並べて確認できます。グラフや地図、ボタンの色が見分けられるかのチェックにお使いください。色の組み合わせ自体を考えたい場合はカラーパレット生成も便利です。
🔒 ブラウザ内で完結・入力データはサーバーに送信されません
100%が完全な2色覚です。小さくすると軽度の色弱(異常3色覚)に近い見え方になります。全色盲には影響しません。
カラーコードで確認
元の色・画像
/ コントラスト比:
P型(1型・赤を感じにくい)
赤が暗く、赤と緑・茶の区別がつきにくくなります
/ コントラスト比:
D型(2型・緑を感じにくい)
赤と緑・茶・オレンジの区別がつきにくくなります
/ コントラスト比:
T型(3型・青を感じにくい)
青と緑、黄とピンクの区別がつきにくくなります
/ コントラスト比:
全色盲(色が見えない)
明るさの違いだけで見える状態です
/ コントラスト比:
画像で確認
ここに画像ファイルをドラッグ&ドロップすることもできます
元の色・画像
P型(1型・赤を感じにくい)
D型(2型・緑を感じにくい)
T型(3型・青を感じにくい)
全色盲(色が見えない)
プレビューは軽量化のため縮小表示です。保存時は元のサイズで処理します。
使い方
- 「カラーコードで確認」に色を入力するか、「画像で確認」で画像ファイルを選びます(ドラッグ&ドロップも可能です)。
- 「程度(P・D・T型)」のスライダーで、見え方の強さを調整します。
- P型・D型・T型・全色盲の見え方を、元の色・画像と見比べます。
- 画像は「PNGで保存」で、見え方ごとに保存できます。
注意点
- 結果は研究で使われる標準的な変換モデル(Machado et al. 2009)による近似です。実際の見え方は個人差が大きく、すべての人に当てはまるわけではありません。
- 色弱の程度は人によって異なります。「程度(P・D・T型)」を下げると軽度の見え方を確認できますが、線形補間による目安です。
- ディスプレイの色設定や環境光によっても見え方は変わります。
- デザインの最終確認は、色だけに頼らず形・模様・ラベルでも情報が伝わるかを併せて確認してください。
- 画像はサイズ上限25MB・約4,000万画素までです。保存時は元のサイズで処理するため、大きな画像では数秒かかることがあります。
用語解説
P型・D型・T型
色を感じる3種類の錐体のうち、どれが働きにくいかによる分類です。P型(1型)は赤、D型(2型)は緑、T型(3型)は青を感じる錐体に特徴があります。日本ではP型・D型が大多数です。
2色覚・異常3色覚
3種類の錐体のうち1つが機能しないのが2色覚、機能はするが感度がずれているのが異常3色覚です。異常3色覚の方が程度は軽い傾向があります。
全色盲
色の区別がほとんどできず、明るさの違いだけで見える状態です。非常にまれです。
コントラスト比
2色の明るさの比(1〜21)。WCAGでは通常の文字で4.5以上が推奨です。色の違いが見分けにくくても、明るさの差があれば読めます。
よくある質問
シミュレーション結果は実際の見え方と同じですか?
標準的な変換モデル(Machado et al. 2009)による近似です。色覚は個人差が大きく、同じ型でも見え方は異なります。あくまでデザイン確認の目安としてお使いください。
P型・D型・T型の違いは何ですか?
色を感じる3種類の錐体のうち、赤に関わるものがP型(1型)、緑に関わるものがD型(2型)、青に関わるものがT型(3型)です。日本ではP型・D型が大多数で、T型や全色盲はまれです。
「程度」を下げるとどうなりますか?
元の色と完全な2色覚の見え方の間を線形に補間し、軽度の色弱に近い見え方を表示します。100%が完全な2色覚で、全色盲には影響しません。
アップロードした画像はサーバーに送られますか?
いいえ。画像はブラウザ内のCanvasで処理され、外部には一切送信されません。
このページをシェア
