コンテンツへスキップ

色覚シミュレーター

画像やスクリーンショットをアップロードするか、パレットで試して、1型(P型)・2型(D型)・3型(T型)色覚と全色盲での見え方をすぐに比較できます。見分けにくい色は自動でマークされます。

またはここにドラッグ&ドロップ

JPEG、PNG、WebP、SVG形式で、最大40 MBまで

手元に画像がない場合は、サンプルで試してみましょう:

視覚タイプ

競合が見つかりました: Deuteranopia, Tritanopia, Achromatopsia

色覚特性とは?デザインで重要な理由

色覚特性(色覚異常、色覚多様性)は特定の色を見分ける能力に影響します。多くは赤と緑ですが、ほかの色に影響するタイプもあります。ひとつの状態ではなく、いくつかのタイプがあり、それぞれ混同しやすい色のパターンが異なります。男性の約12人に1人、女性の約200人に1人に見られます。

これは、色で何かを伝えるあらゆるプロジェクトに直接影響します。あなたにははっきり区別できる組み合わせでも、実際の閲覧者の一部にはほとんど同じに見えることがあります。たとえば緑の背景に赤い「エラー」ボタンは、2型色覚の人には見えないかもしれません。

色覚特性のタイプを解説

1型(P型)

男性の約1%

赤への感度がない、または低い状態。赤が暗く見え、緑や茶色と混同することがあります。

2型(D型)

男性の約1%

緑への感度がない、または低い状態。最も多いタイプで、赤と緑の区別が難しくなります。

3型(T型)

非常にまれ

青への感度がない、または低い状態で、上の2つよりずっとまれです。青と黄色の区別に影響します。

全色盲

約3万人に1人

色覚がまったくない状態で、さらにまれです。世界をグレースケールで知覚します。

3ステップでシミュレーターを使う

  1. 画像またはパレットをアップロード

    画像をドラッグするか、Ctrl + Vでスクリーンショットを貼り付けるか、サンプルを使います。画像がなくても、パレットの色を直接試せます。

  2. 色覚タイプを選ぶ

    「すべて」で4つのタイプを同時に比較できます。特定のタイプを選ぶと、元の画像の横に大きく表示されます。

  3. 問題を修正

    見分けにくい色には警告が表示されます。色を選んでエディターで調整し、警告が消えるまで直しましょう。

色覚特性に配慮したデザインのコツ

各例は、最も多い2型色覚の人の見え方で、悪い例と良い例を示しています(3つ目はグレースケール)。

  • 色だけで情報を伝えない

    緑・黄・赤のステータス表示は、ほぼ同じ色に見えてしまいます。アイコン、テキスト、形の違いを加えましょう。

  • 赤と緑だけの組み合わせを避ける

    2つの系列を比べるなら、青とオレンジはよくある色覚特性のどのタイプでも区別できます。

  • 明るさでも区別する

    2色の明るさが同じだと、グレースケールでは同じに見えます。暗い色と明るい色を組み合わせましょう。

  • グラフにラベルや模様を加える

    直接ラベルを付けたり斜線を入れたりすれば、色が似ていてもグラフを読み取れます。

よくある質問

特定の色を見分けにくくなる状態です。主なタイプは1型、2型、3型色覚と全色盲で、それぞれ混同しやすい色のパターンが異なります。

どちらも赤と緑の区別に影響しますが、原因が異なります。1型は赤への感度が、2型は緑への感度が低下します。見た目の結果は似ていますが、同じではありません。

男性の約12人に1人、女性の約200人に1人です。考慮すべき視覚的アクセシビリティの中でも、最も一般的なもののひとつです。

1型・2型では、赤と緑、緑と茶色、青と紫、オレンジと黄緑がよく混同されます。3型では主に青と緑、黄色と薄いピンクです。

赤と緑ではなく青とオレンジのように、明るさでも区別できる色の組み合わせを使い、色だけに頼らずラベル、アイコン、模様を加えましょう。そのうえでスクリーンショットをシミュレーターにアップロードして確認します。

近似です。各ピクセルに一般的なシミュレーション行列を適用しています。問題のある組み合わせを見つけるのに役立ちますが、特に軽度の場合(色弱)は、人によって色の見え方が少しずつ異なります。

いいえ。解析とシミュレーションはお使いのブラウザ内で処理され、画像が外部のサーバーに送信・保存されることはありません。

コントラストチェッカーは、2つの具体的な色の読みやすさの比率を確認します。このシミュレーターでは、画像やデザイン全体を色覚特性のある人の見え方で確認でき、1組の色を超えた理解のしにくさを見つけられます。

JPG、PNG、WebPファイルをアップロードするか、ツールにドラッグするか、Ctrl + V(MacはCmd + V)でスクリーンショットを直接貼り付けられます。

その他のツール