色覚シミュレーション — 色覚多様性の見え方
画像が 1 型 (P 型・赤)・2 型 (D 型・緑)・3 型 (T 型・青) 色覚や 1 色覚 (全色盲) でどう見えるかをシミュレートします。デザインや資料の色使いがアクセシブルか確認するのに。Canvas + 色覚変換行列でブラウザ内処理、画像はアップロードされません。
使い方
色覚タイプ (1 型 P 型・赤 / 2 型 D 型・緑 / 3 型 T 型・青 / 1 色覚 全色盲) を選び、画像をドロップまたは選択して「色覚をシミュレート」を押します。元画像とシミュレート結果が並び、PNG / JPEG / WebP でダウンロードできます。デザイン・グラフ・路線図などの色使いが色覚多様性に配慮できているか確認するのに使えます。Canvas と色覚変換行列でブラウザ内処理し、画像はアップロードされません。
よくある質問
- 画像はサーバーに送信されますか?
- いいえ。読み込み・変換・ダウンロードまですべてブラウザ内で完結します。画像が端末から外に出ることはありません。
- どの色覚タイプに対応していますか?
- 1 型 2 色覚 (Protanopia・赤)、2 型 2 色覚 (Deuteranopia・緑)、3 型 2 色覚 (Tritanopia・青)、および 1 色覚 (Achromatopsia・全色盲) の 4 種類です。日本では 2 型と 1 型が比較的多いとされています。
- シミュレーションの精度はどのくらいですか?
- 広く使われている色覚変換行列を用いた近似です。実際の見え方は個人差が大きく、同じ「型」でも程度 (2 色覚 / 異常 3 色覚) によって異なります。あくまで配色チェックの目安としてお使いください。厳密な検証には当事者のレビューが重要です。
- 色覚に配慮した配色のコツは?
- 色だけで情報を区別せず、明暗差・パターン・ラベル・形を併用するのが基本です。特に赤と緑の組み合わせは 1 型・2 型で見分けにくいため、コントラスト比 (color-contrast-checker) も合わせて確認すると安心です。
- どんな画像で使えますか?
- JPEG / PNG / WebP の画像 1 枚に対応しています。グラフ・凡例・路線図・UI スクリーンショット・ロゴなど、色で情報を伝えている画像で特に有用です。
類似のツール
コントラスト比チェッカー — WCAG AA / AAA 判定
前景色 (文字色) と背景色を選ぶだけで、WCAG 2.x のコントラスト比を計算し、通常の文字・大きな文字・UI 部品それぞれで AA / AAA を満たすかをその場で判定します。HEX と rgb() 入力、カラーピッカー、ライブプレビュー付き。すべてブラウザ内で処理され、色情報は外部に送信されません。
画像モノクロ化 — グレースケール 5 方式 (輝度・チャンネル別)
JPEG / PNG / WebP をブラウザ内でグレースケール化します。変換方式は平均 / 輝度 (BT.601) / 赤 / 緑 / 青チャンネル単独の 5 種類から選択可能。出力形式 (PNG / JPEG / WebP) と JPEG / WebP の品質も調整できます。アップロードした画像は外部に送信されず、すべて Canvas でブラウザ内処理されます。
カラー変換 — HEX / RGB / HSL / HSV を相互
HEX・RGB・HSL・HSV をリアルタイムに相互変換できるカラーピッカー付きツール。どの欄を編集しても他の 3 表記が即座に追従。すべてブラウザ内で動作し、入力した色情報は外部に送信されません。
画像カラーピッカー — HEX / RGB / HSL 取得
JPEG / PNG / WebP をアップロードし、画像内の任意の位置をクリックするとそのピクセルの色を HEX / RGB / HSL で取得できます。ホバー中はルーペで拡大表示し、ピックした色は履歴として一覧表示。各値はワンクリックでコピー可能です。画像は外部に送信されず、すべての処理はブラウザ内で完結します。