本文へスキップ
CB

色覚シミュレーター

P型・D型・T型・全色盲での見え方をシミュレーションし、混同しやすい色の組み合わせを警告。

入力色正常P型(1型2色覚)D型(2型2色覚)T型(3型2色覚)全色盲(1色覚)
#ef4444
#ef4444
#6b6b46
#939338
#b4b400
#848484
#22c55e
#22c55e
#bbbb5d
#aaaa63
#9393ff
#acacac
#3b82f6
#3b82f6
#7c7cf6
#7373f6
#6767ff
#858585
#f59e0b
#f59e0b
#abab11
#bdbd00
#cfcf00
#b1b1b1

混同リスクの警告

  • #ef4444 と #22c55e は D型(2型2色覚) で見分けにくくなります。
  • #22c55e と #3b82f6 は T型(3型2色覚) で見分けにくくなります。
  • #ef4444 と #22c55e は 全色盲(1色覚) で見分けにくくなります。
  • #ef4444 と #3b82f6 は 全色盲(1色覚) で見分けにくくなります。
  • #22c55e と #3b82f6 は 全色盲(1色覚) で見分けにくくなります。
  • #3b82f6 と #f59e0b は 全色盲(1色覚) で見分けにくくなります。

対策: 明度(明るさ)の差を大きくつける、または色だけに頼らず形・パターン・アイコン・ラベルなど色以外の手がかりを併用してください。

シミュレーションはViénot/Brettelらの錐体色空間モデルに基づく近似で、実際の見え方の個人差までは再現しません。すべての処理はブラウザ内で完結し、画像や色データが外部に送信されることはありません。

色覚シミュレーターについて

色覚シミュレーターとは、色覚多様性(CVD: Color Vision Deficiency)のある人にとって色がどう見えるかを近似し、UIやグラフの色分けが実際に伝わるかを検証するツールです。日本ではP型(1型2色覚)・D型(2型2色覚)・T型(3型2色覚)という呼び方が広く使われており、それぞれ赤を感じるL錐体・緑を感じるM錐体・青を感じるS錐体のいずれかが機能していない状態を指します。全色盲(1色覚)は3種類の錐体すべてが正常に働かず、明暗のみで世界を認識する状態です。 日本人男性の約20人に1人(約5%)、女性の約500人に1人(約0.2%)が赤緑系の色覚特性(P型・D型)を持つとされ、国内だけで300万人以上と推計されています。つまり、社内資料を数十人に見せれば、その中に色の見分けに苦労する人が含まれている可能性は決して低くありません。toco.toolsの色覚シミュレーターは、指定した色や画像をブラウザ内でP型・D型・T型・全色盲の見え方に変換し、正常色覚との違いをグリッドで並べて確認できます。 このツールの核心は「見た目を変換する」ことそのものではなく、変換前後でOKLab(知覚均等な色空間)上の距離を比較し、明確に区別できていた色の組み合わせが、あるCVDタイプの下で近づきすぎて見分けにくくなっていないかを自動で警告する点です。赤と緑だけで状態を塗り分けたグラフや、色だけで正解・不正解を示すUIは、色覚多様性のある利用者にとって情報が欠落することがあります。警告が出た場合は、明度(明るさ)の差を大きくつける、または形・パターン・アイコン・ラベルなど色以外の手がかりを併用することで、多くの場合は解決できます。

使い方

  1. 色で確認するか画像で確認するかを選ぶ
  2. 色を編集、または画像をアップロード
  3. シミュレーション結果と混同警告を確認

よくある質問(FAQ)

色覚シミュレーターとは何ですか?

色覚多様性のある人の見え方を近似表示し、配色が実際に伝わるかを確認するツールです。単に色を変換するだけでなく、見分けにくくなる色の組み合わせを自動で警告します。

P型・D型・T型とは何ですか?

赤を感じるL錐体が働かないP型(1型2色覚)、緑を感じるM錐体が働かないD型(2型2色覚)、青を感じるS錐体が働かないT型(3型2色覚)の3分類です。全色盲(1色覚)は3種類とも働かず、明暗のみで世界を認識します。

色覚特性はどのくらいの割合の人にありますか?

日本人男性の約5%(20人に1人)、女性の約0.2%(500人に1人)が赤緑系の色覚特性(P型・D型)を持つとされ、国内で300万人以上と推計されています。珍しい特性ではありません。

なぜ色だけでUIやグラフを設計してはいけないのですか?

色覚多様性のある人にとって、赤と緑のような特定の色の組み合わせは同じ、または非常に近い色に見えることがあります。色だけに頼ると情報が伝わらないため、明度差をつける、または形・パターン・ラベルなど色以外の手がかりを併用することが推奨されます。

入力したデータは外部に送信されますか?

いいえ。すべての処理はブラウザ内で完結し、toco.toolsのサーバーへ送信されません。