画像を送信しないアクセシビリティツール

画像とUIのための色覚シミュレーター

色覚シミュレーターを使うと、イラスト、インターフェース、グラフ、スクリーンショットを、1型二色覚、2型二色覚、3型二色覚のプレビューと比較できます。画像はブラウザー内に残り、4つの表示は同じ構図で揃い、書き出した比較画像には選択した強度が記録されます。

2026年7月26日更新

色覚シミュレーター

この色覚シミュレーターで分かること

色覚シミュレーターは、端末内の画像ピクセルに、公開研究に基づく3種類の色覚特性変換行列を適用します。元画像と、1型二色覚、2型二色覚、3型二色覚の近似表示を並べ、元の色を保つ0%から行列の完全な結果である100%までを混合できます。色覚シミュレーターは、色相だけに依存した区別が弱くなる場所を探す補助ツールです。個人の見え方を再現したり、診断したり、アクセシビリティ適合を証明したりするものではありません。

色覚シミュレーター

一つの視覚課題を同じ構図の4表示で確認

色覚シミュレーターは切り抜き、サイズ、元ピクセルを全表示で共通にするため、構図の変化ではなく色の変化に集中して比較できます。

  • 構図を動かさず細部を比較

    色覚シミュレーターの各表示は同じ元Canvasを使います。キャラクターの特徴、グラフの印、ラベル、操作部品、背景が同じ位置に残るので、弱くなった区別を具体的に見つけられます。

  • 非公開の作品をブラウザー内に保持

    色覚シミュレーターはPNG、JPEG、WebPをブラウザーAPIで読み込みます。この機能には画像アップロード先、クラウドライブラリー、アカウント、サーバー側処理がありません。

  • レビュー用の比較資料を書き出す

    色覚シミュレーターは、元画像と3種類の近似表示を1枚にまとめたラベル付きPNGを作成します。元ファイルとは別に、アクセシビリティレビューの記録として共有できます。

ブラウザー内だけの画像比較

色覚シミュレーターを使う

12MBまでのPNG、JPEG、WebPを読み込めます。色覚シミュレーターは画像を送信せず、同じ構図の4つのCanvasを作ります。

端末内処理
ここに画像をドロップ

PNG、JPEG、WebP · 12MBまで · 貼り付けにも対応

0%は元のピクセル、100%は完全な行列結果です。視覚的な混合であり、臨床的な尺度ではありません。

Toon Toneサンプル画像4つの表示を用意しました。

元画像変更していない元の画像
画像を準備しています…変更していない元の画像
1型二色覚完全なprotan二色覚行列のプレビュー
画像を準備しています…完全なprotan二色覚行列のプレビュー
2型二色覚完全なdeutan二色覚行列のプレビュー
画像を準備しています…完全なdeutan二色覚行列のプレビュー
3型二色覚完全なtritan二色覚行列のプレビュー
画像を準備しています…完全なtritan二色覚行列のプレビュー

色覚シミュレーター

デザインレビューにプレビューを組み込む

色覚シミュレーターは、単に配色が違って見えると感じるだけでなく、確認箇所と修正内容を特定するときに最も役立ちます。

1. 実際の状態を読み込む

利用者が見る画面、グラフ、イラスト、キャラクターの姿勢をそのまま読み込みます。単独の色見本を色覚シミュレーターに入れても、実際の文脈で消えるラベル、境界、フォーカス表示、重なったデータ点は確認できません。

2. 3種類の表示を比較する

1型、2型、3型二色覚のカードを見比べ、分離しにくくなる組み合わせを探します。まず色覚シミュレーターを100%にして完全な行列結果を見てから、強度を下げて変化が目立ち始める位置を確認します。

3. 色以外の手掛かりを追加する

色覚シミュレーターで色相だけに依存した違いが見つかったら、文字、アイコン、模様、輪郭、形、位置を追加します。W3Cの色の使用基準は、すべての近似表示を同じにすることではなく、情報の意味を残すことを求めています。

4. 実装後の画面を再確認する

修正した実画面を書き出し、色覚シミュレーターを再実行し、さらにカラーコントラストチェッカーで測定します。シミュレーション、コントラスト、キーボード、ラベル、当事者による確認は、それぞれ別の問いに答えます。

色覚シミュレーター

各プレビューが表すモデル

色覚シミュレーターは、Machado、Oliveira、Fernandesによるモデルの3種類の完全二色覚行列を使用します。赤緑系や青黄系という呼び方は便利な略称であり、個人の知覚を完全に説明するものではありません。

色覚シミュレーターの表示、モデルの焦点、レビューの問い
表示モデル一般的な分類レビューの問い
元画像変更していないsRGBの元ピクセル基準表示シミュレーション前に意味を伝える違いはどこか
1型二色覚完全なprotan二色覚行列赤緑系赤を中心とした注意表示や細部が周囲と一体化しないか
2型二色覚完全なdeutan二色覚行列赤緑系緑の状態、系列、キャラクターの特徴を区別できるか
3型二色覚完全なtritan二色覚行列青黄系青と黄の情報をラベルなしでも区別できるか

シミュレーションとコントラストが答える問いの違い

色覚シミュレーターは、選択したモデルで色同士の関係がどのように変わり得るかを近似します。一方、コントラストチェッカーは前景と背景の相対輝度を数値化します。ラベルのない2本のグラフ線は、どちらも背景との文字コントラストを満たしながら、互いの色が近づいて識別しにくくなる場合があります。逆に、色覚シミュレーターでは明確に異なる2色が、明るい背景の文字色としては両方とも基準を満たさないこともあります。各ツールは、実際に測れる判断に使う必要があります。

色覚シミュレーターは、分類を表す色の確認に特に有効です。チーム、交通路線、ゲーム能力、状態を示す点、地図領域、データ系列は、前景と背景の比率ではなく色相の違いに頼りがちです。必ず実際の状態を確認してください。色覚シミュレーターで2分類が近づく場合も、アートの意図に必要なら配色を残せます。ただし直接ラベル、マーカー形状、線の模様、アイコン、空間的なグループを追加し、色を唯一の情報伝達手段にしないことが大切です。

Toon Toneでは、色覚シミュレーターからカラーコントラストチェッカーへ進めるようにしています。完成したレビューには通常、両方が必要だからです。最初に色覚シミュレーターで画像全体の区別が失われる候補を探し、次に前景と背景の組み合わせに依存する文字、アイコン、コントロール、重要な境界を測定します。どちらの結果も単独では適合証明になりません。二つを組み合わせる方が、一つの合格値を製品全体の証明として扱うより、修正理由を説明できる記録になります。

色覚シミュレーター

5段階で繰り返せる公開前チェック

新しい配色、イラスト、グラフ、UI状態を承認する前に、同じ色覚シミュレーター手順を実行します。

  1. 01

    色覚シミュレーター: ラベル、凡例、フォーカス表示、背景を含む実際の公開状態を用意する。

  2. 02

    色覚シミュレーター: 1型、2型、3型二色覚を100%と予定する最小表示サイズで確認する。

  3. 03

    色覚シミュレーター: 色だけが伝える重要な違いをすべて探し、文字、形、模様、アイコン、位置を追加する。

  4. 04

    色覚シミュレーター: 前景と背景の重要な組み合わせは、シミュレーションから推測せずコントラストチェッカーで測る。

  5. 05

    色覚シミュレーター: 4表示のPNGを書き出し、変更した判断を記録し、実装後にもう一度確認する。

色覚シミュレーター

情報源が裏付ける範囲と限界

色覚シミュレーターは行列に一次研究を、確認手順に公的情報を用いています。数値は集団、基準、モデルの範囲を示すもので、特定の人の見え方を予測しません。

  • 米国National Eye Instituteは、男性のおよそ12人に1人に色覚特性があると説明しています。この公開情報は2026年7月26日に確認しました。 米国National Eye Institute:色覚特性
  • 2021年5月16日更新のAdobeガイドは、世界の色覚特性を3〜8%と推定し、白人集団の例では女性およそ200人に1人という値を示しています。 Adobe:カラーアクセシビリティツール
  • Machado、Oliveira、Fernandesは生理学的な近似モデルを2009年に発表しました。色覚シミュレーターは1型、2型、3型二色覚の完全行列を使用します。 Machadoほか(2009年)訂正版論文
  • WCAG 2.2達成基準1.4.1はレベルAで、色を情報の唯一の視覚的手段にしないよう求めます。近似表示はリスクを見つけますが、単独で適合を判定しません。 W3C:達成基準1.4.1「色の使用」の解説

W3Cは目的を9語で要約しています。 Color is not the only way of distinguishing information.

色覚シミュレーター

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

この色覚シミュレーターは医療検査ですか?

いいえ。色覚シミュレーターはデザイン確認用に画像ピクセルを変換します。人を検査せず、程度を測らず、診断もしません。National Eye Instituteは、検査について眼科の専門家へ相談するよう案内しています。

良い結果ならアクセシブルだと証明できますか?

できません。色覚シミュレーターは弱くなる色の区別を見つけますが、アクセシビリティにはコントラスト、文字、形、ラベル、キーボード、拡大、意味構造、利用者テストも関係します。結果は一つのレビュー資料として記録してください。

なぜ3種類の近似表示があるのですか?

1型と2型二色覚は一般に赤緑系、3型二色覚は青黄系と説明されます。同じ配色でも各行列で結果が変わるため、色覚シミュレーターは3種類を常に並べます。

強度スライダーは何を意味しますか?

色覚シミュレーターは0%の元の線形化sRGBピクセルと、100%の完全な行列結果を混合します。中間値は視覚比較の補助であり、医学的な程度を推定する値ではありません。

読み込んだ画像は保存されますか?

色覚シミュレーターは対応画像を現在のブラウザータブで処理し、画像アップロード先を持ちません。更新または閉じると作業Canvasは消えます。ダウンロードしたPNGは利用者が保存した場所に残ります。