色覚異常シミュレーター
公開されている色覚異常変換行列をリニアRGB空間で適用し、第1色覚異常、第2色覚異常、第3色覚異常、または全色覚異常を持つ人が写真、グラフ、スクリーンショットをどのように見ているかを体験できます。
🔒 ブラウザ内で完全に処理されます。ここに入力した内容はアップロードされません。
結果
男性の約12人に1人、女性の約200人に1人が何らかの色覚異常を持つと言われていますが、グラフ、UIモックアップ、写真のほとんどは、通常の色覚を持つ人だけがデザインしチェックしています。このツールを使えば、任意の画像をアップロードして、第1色覚異常、第2色覚異常、第3色覚異常、全色覚異常を持つ人が実際にどのように見ているかを確認できます。これにより、赤と緑の凡例が混同しやすい、あるいは状態を示す色が判読しにくいといった問題を、リリース前に発見できます。
このシミュレーションは単純な彩度低下や色相回転フィルターではありません。第1色覚異常、第2色覚異常、第3色覚異常は、Machado、Oliveira & Fair (2009) の公開2色覚変換行列を用いてシミュレーションされます。これは生理学的な錐体応答モデルから導かれた本物の3×3係数行列で、プロ向けのアクセシビリティツールで使用されているものと同系統です。これらの行列はリニアな光の空間でのみ有効であるため、各ピクセルは最初に正確な区分的sRGB伝達関数（単純なγ=2.2近似ではありません）を用いてsRGBからリニアRGBに変換され、その空間で行列が適用され、結果は表示および書き出しのために再びsRGBに変換されます。全色覚異常（完全色覚異常）は、同じリニア空間で標準的なITU-R BT.709輝度重み（赤0.2126、緑0.7152、青0.0722）を適用します。これは放送やディスプレイの標準で使われている知覚的明度の標準的な定義です。
実際の色覚異常は「まったく見えない」か「完全に見える」かの二者択一ではありません。色覚異常がある人のほとんどは、影響を受ける錐体タイプに何らかの機能が残っています。重症度スライダーはこのことを反映しており、0%で元の画像そのまま、100%で完全にシミュレーションされた2色覚または全色覚の画像となり、その間の値ではピクセル単位で両者をリニアにブレンドします。これにより、同じタイプの色覚異常でも軽度、中等度、重度のケースを同じ画像上でプレビューできます。
写真、グラフ、UIのスクリーンショットをドロップし、色覚異常タイプと重症度を選択して実行ボタンを押すと、元画像とシミュレーション画像の比較がキャンバス上にレンダリングされます。シミュレーション画像は元の解像度のままPNGとしてダウンロード可能です。サーバーへのアップロードは一切なく、ファイルがデバイスから出ることはありません。全パイプラインはブラウザのCanvas 2DおよびImageData APIのみで動作します。