Skip to content
色覚多様性シミュレーター
Tools

色覚多様性シミュレーター

新着

色覚に特性のある人に画像がどう見えるかをプレビュー。

100% in your browser. Your image, palette and webcam stream are processed on a canvas on your device and are never uploaded — unlike tools that send or downscale your file.

No image? Try

Palette safety checker

Paste hex codes to see each swatch under every CVD type. If two colours collapse into the same tone, they're not safe to rely on alone.

These simulations model the average appearance of each colour vision deficiency using the Machado (2009) matrices. Real colour vision varies between individuals — this is a design and accessibility aid, not a medical diagnosis. For a vision assessment, see an eye-care professional.

Runs entirely in your browser. Nothing is uploaded.

色覚異常の視点でデザインを確認する

この色覚異常シミュレーターは、任意の画像を色覚多様性(CVD)のある人が見た場合の近似表示に変換します。スクリーンショット、グラフ、マップ、写真をアップロード——または内蔵サンプルを使用——して、第一色盲(赤色盲)・第二色盲(緑色盲)・第三色盲(青黄色盲)や全色盲の間を切り替え、デザインがどこで色だけに頼りすぎているかを即座に確認できます。

現在のページにフィルターをかけるだけのブラウザ拡張機能とは異なり、このオンライン色覚異常シミュレーターは選択した画像の実際のピクセル、クリップボードの内容、またはライブウェブカメラ映像を処理します。元の解像度を維持したまま、シミュレーション結果を同品質でダウンロードできます。

Machadoモデルと重症度スライダー

多くの無料シミュレーターは100%の完全二色覚のみを表示しており、実際の色覚異常者の見え方を誇張しています。本ツールはMachado、Oliveira & Fernandes(2009)の生理学的行列——Chrome DevToolsで使用されているものと同じモデル——を採用し、異常三色覚のプレビューのための0〜100%の重症度スライダーを追加しています。最も一般的な第二色弱(deuteranomaly)は40〜60%で現実的なプレビューができ、100%はより稀な完全第二色盲を示します。

計8タイプをカバー:第一色弱・第一色盲、第二色弱・第二色盲、第三色弱・第三色盲、全色盲(アクロマトプシア)、青錐体一色覚。

比較・補正・検査

4つの表示モードで問題を明確化します。シングルは1種類を全画面表示;分割比較スライダーで元画像とシミュレーションを比較;全タイプグリッドで1回のアップロードから全CVDタイプを一覧表示;ライブウェブカメラでリアルタイムのカメラ映像をシミュレーション。画像上にカーソルを移動すると、内蔵のスポイトで任意のピクセルの元の色とシミュレーション後の色を確認できます。

ダルトン化をオンにすると、CVD補正版の画像をプレビューできます。通常であれば区別できない色が、色覚異常の人でも識別可能なチャンネルへとシフトされます。

カラーパレットの安全性チェック

スクリーンショットが手元にない場合でも、内蔵のパレットチェッカーでhexコード(例:#e11d48#16a34a)を貼り付け、通常視と各CVDタイプで各スウォッチを並べて比較できます。「エラーの赤」と「成功の緑」が第二色盲の人には同じくすんだ色に見える場合、すぐに気づいてアイコンやラベルを追加する必要があることがわかります。

ページから離れたりインストールしたりせずに、「このパレットは色覚バリアフリーか?」という問いに素早く答える最善の方法です。

プライバシー設計——アップロード不要

すべての処理はHTML canvasでローカルに実行されるため、画像、パレット、ウェブカメラの映像はデバイスから外部に送信されません。サーバー、アカウント、ファイルサイズ制限はありません。これは、ファイルをサーバーにアップロードしたり処理前に800pxに縮小したりするシミュレーターとの意図的な違いです。未公開のモックアップはあなただけのものです。

公開前の色覚異常チェックとして活用してください:グラフ、ダッシュボード、インフォグラフィック、信号機状態、ブランドパレットを一般的な赤緑タイプで確認し、色だけに依存している部分を修正して、約12人に1人の男性が確実に読み取れるものを公開しましょう。

Coblis・Color Oracle・DaltonLensとの比較

Coblis(coblis.com)は最も有名な無料色覚異常シミュレーターです。画像を外部サーバーにアップロードするため、未公開のUIデザインのプライバシーリスクがあります。重症度スライダーもありません。Color OracleはWindowsとMacの無料デスクトップアプリで、全画面オーバーレイとして色覚異常をシミュレーションしますが、ソフトウェアのインストールが必要でモバイルでは動作せず、異常三色覚のシミュレーションができません。DaltonLens(daltonlens.org)はPythonライブラリとブラウザツールを提供しており、研究者には優れていますが、素早い視覚確認を求めるデザイナーには技術的すぎます。

このツールはその3つの課題をすべて解決します:サーバーへのアップロードなし(canvas-ローカル処理)、0〜100%の重症度スライダー、インストール不要、iPhoneとAndroidを含む任意のデバイスで動作し、ダルトン化出力とパレットチェッカーも同一ページに収録しています。

ガイドであり、診断ではない

これらのシミュレーションは各異常の平均的な見え方をモデル化しています。実際の色覚は個人差があり、シミュレーターは特定の個人の視覚を正確に再現することはできません。これはデザインとアクセシビリティのツールであり、医療機器ではありません。自身の色覚を評価したい場合は、石原式検査や色覚異常計などの適切な検査のために眼科医にご相談ください。

Frequently asked questions

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

色覚異常シミュレーターは画像を変換して、色覚多様性(CVD)のある人がその画像をどのように見るかを近似的に表現するツールです。デザイン、グラフ、写真をアップロードすると、CVDモデルを通じてピクセルを再レンダリングします。例えば第一色盲では赤と緿が泥のような黄褐色に近づきます。このツールはMachado(2009)の行列を使用し、完全にブラウザ内で動作します。

最も一般的な色覚異常のタイプは何ですか?

第二色弱(deuteranomaly)——緑錐体の感度低下——が最も一般的なタイプで、男性の約6%に影響します。これは完全な二色覚ではなく部分的な(異常)欠陥であり、影響を受ける人は3種類の錐体をすべて持っていますが、スペクトル感度がシフトしています。現実的な第二色弱のプレビューには、100%ではなく重症度スライダーを40〜60%に設定してください。

色覚異常の7つのタイプとは何ですか?

異常(部分的)と二色覚(完全)の形式を含めると:第一色弱と第一色盲(赤弱/赤盲)、第二色弱と第二色盲(緑弱/緑盲)、第三色弱と第三色盲(青黄弱/青黄盲)、全色盲(色なし)。青錐体一色覚は8番目のタイプとして挙げられることもあります。このシミュレーターはすべてをカバーしています。

画像はサーバーにアップロードされますか?プライバシーは?

いいえ。すべてブラウザのcanvas上でJavaScriptを使用して処理されます。画像はサーバーに送信されず、アップロードも保存もされません。ページ読み込み後にインターネットから切断しても、シミュレーターは動作し続けます——シミュレーション中にネットワークリクエストは発生しません。アカウント不要、トラッキングなし、サーバー側のファイルサイズ制限もありません。

全色盲(アクロマトプシア)とは何ですか?

アクロマトプシアは完全な色盲——錐体系が基本的に機能していないため、杆体系からの明るさ情報のみが残り、世界がグレーの濃淡で見えます。稀で約30,000人に1人が影響を受け、光過敏(羞明)と視力低下を伴うことが多いです。タイプセレクターでアクロマトプシアを選択すると、画像が輝度ベースのグレースケールに変換されます。

シミュレーターの精度はどのくらいですか?

精度はモデルによります。このシミュレーターはMachado、Oliveira、Fernandes(2009)の生理学的モデルを使用しており、Chrome DevToolsで使用されているものと同じです。異常三色覚のための重症度スライダーも追加されています。デザインレビューの近似として優れていますが、平均的なCVDのモデルであり、特定の個人の視覚の臨床診断ではありません。

iPhoneやAndroidで使えますか?

はい。シミュレーターは完全にレスポンシブで、あらゆる最新モバイルブラウザで動作します——iPhone/iPadのSafariおよびAndroidのChromeまたはFirefox。カメラロールから画像をアップロード、スクリーンショットを貼り付け、または画像ピッカーを使用できます。ウェブカメラシミュレーション機能もモバイルデバイスで動作し、すべての処理はデバイスのGPUアクセラレーションされたcanvasでローカルに行われます。