アップロードなし, 100%ローカル, アカウントなし

色覚異常シミュレーター

色覚特性を持つ人の目を通して画像を見てみましょう。種類を選び、プレビューして結果をダウンロードします。すべてブラウザ内で実行されます。

色覚異常シミュレーターの仕組み

色覚異常シミュレーターは、画像に色変換行列を適用して、赤色盲(1型2色覚)、緑色盲(2型2色覚)、青色盲(3型2色覚)、または全色盲(完全な色覚異常)の人々にどのように見えるかを示します。行列はブラウザのCanvas.getImageData()とCanvas.putImageData()を使ってピクセル単位で適用されます。画像データはサーバーに送信されません。

シミュレーションは色覚異常の研究から導出された公開されている知覚モデルに基づいています。これらは影響を受けた人の視覚系が色を処理する方法の近似値であり、個人の体験の正確な再現ではありません。個人によって異なります。このツールは、デザイナーや開発者が観客の大きな割合に影響するコントラストやカラーコーディングの問題を特定するのに役立つよう設計されています。男性の約8%、女性の約0.5%が何らかの形の色覚異常を持っています。

色覚異常シミュレーターの使い方をステップごとに解説

  1. アップロードエリアに画像をドロップするか、クリックして参照します。
  2. メニューから色覚異常のタイプを選択します:1型2色覚、2型2色覚、3型2色覚、または全色盲。
  3. 比較パネルで元の画像の横にシミュレーション結果を確認します。
  4. シミュレーションタイプを切り替えて、各状態が画像にどのような影響を与えるかを比較します。
  5. 並列ビューを使用して、色だけで情報が伝達されている箇所を特定します。

よくある使用例

  • UIデザイナーが機能をリリースする前に、赤と緑のステータスインジケーターが2型2色覚のユーザーに区別できるかどうかを確認する場合。
  • データ可視化の作者が、カラーコードされた系列の折れ線グラフが1型2色覚シミュレーションでも読み取れることを確認する場合。
  • ブランドデザイナーがグラデーションカラーのロゴが全色盲シミュレーションでどのように見えるかを評価し、認識可能な形状とコントラストを維持しているか確認する場合。
  • ゲーム開発者が3型2色覚のプレイヤーにとってカラーコードされたマップゾーンが区別できるかテストし、カラーコードを補うパターンフィルを追加する場合。

よくある質問

色覚異常シミュレーションはどのくらい正確ですか?

シミュレーションは色覚異常に関する公開された研究から導出された知覚変換行列を適用します。科学的根拠のある典型的なケースの近似値です。個人の体験は異なります。同じ診断を持つ人々の間でも重症度が異なり、シミュレーションは一部のユーザーが発達する補償戦略を考慮できません。出力は有用な指標として扱ってください。決定的なテストではありません。

ツールはすべてのタイプの色覚異常をカバーしていますか?

対応している4つのタイプは、色覚異常と完全な色盲の最も一般的な形態です。部分的な欠乏を表す異常三色覚のタイプ(1型色弱、2型色弱、3型色弱)は、現在のバージョンでは個別にモデル化されていません。

シミュレーションを生成するために画像がサーバーで分析されますか?

いいえ。カラー行列変換は、Canvas.getImageData()でピクセル配列を読み取り、Canvas.putImageData()で結果を書き込むことにより、ローカルで計算されます。すべての処理はブラウザタブ内で行われ、画像データはデバイス上に留まります。

このツールでカラーコントラスト比を確認できますか?

このツールは色覚異常の人々に色がどのように見えるかを示しますが、WCAGコントラスト比を数値的に計算しません。数値的なコントラスト確認には、WCAGコントラストチェッカーを含むカラーコンバーターツールを使用してください。

テキストが含まれる画像でも機能しますか?

はい。変換は画像内にレンダリングされたテキストを含む全ピクセル配列に適用されます。これにより、各シミュレーション条件下でテキストの色と背景のコントラストが読みやすいかどうかを確認できます。