本文へスキップ
にゃんこツール

色覚シミュレーター(色覚多様性の見え方確認)

画像を読み込むか、カラーコードを入力するだけで、P型(1型)・D型(2型)・T型(3型)・全色盲の見え方を並べて確認できます。グラフや地図、ボタンの色が見分けられるかのチェックにお使いください。色の組み合わせ自体を考えたい場合はカラーパレット生成も便利です。

🔒 ブラウザ内で完結・入力データはサーバーに送信されません

100%が完全な2色覚です。小さくすると軽度の色弱(異常3色覚)に近い見え方になります。全色盲には影響しません。

カラーコードで確認

  • 元の色・画像

    / コントラスト比:

  • P型(1型・赤を感じにくい)

    赤が暗く、赤と緑・茶の区別がつきにくくなります

    / コントラスト比:

  • D型(2型・緑を感じにくい)

    赤と緑・茶・オレンジの区別がつきにくくなります

    / コントラスト比:

  • T型(3型・青を感じにくい)

    青と緑、黄とピンクの区別がつきにくくなります

    / コントラスト比:

  • 全色盲(色が見えない)

    明るさの違いだけで見える状態です

    / コントラスト比:

画像で確認

ここに画像ファイルをドラッグ&ドロップすることもできます

使い方

  1. 「カラーコードで確認」に色を入力するか、「画像で確認」で画像ファイルを選びます(ドラッグ&ドロップも可能です)。
  2. 「程度(P・D・T型)」のスライダーで、見え方の強さを調整します。
  3. P型・D型・T型・全色盲の見え方を、元の色・画像と見比べます。
  4. 画像は「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で処理され、外部には一切送信されません。

このページをシェア

↑↓ 選択 Enter 開く Esc 閉じる