First CHTools無料Webツール

FIRST CH TOOLS / デザイン / 60 COLORBLIND SIMULATOR

色覚シミュレーター

配色や画像が、P型（1型）・D型（2型）・T型（3型）色覚でどう見えるかを並べて確かめられます。2色が判別しづらくなる組み合わせは、色差とコントラスト比を添えて警告します。画像はお使いの端末から出ません。

2色の判別を確かめる

コントラスト比チェッカーで見る — WCAG 2.1 の AA / AAA 判定はこちらで確認できます。

画像で確かめる

ここに画像をドラッグ&ドロップ またはクリックしてファイルを選択（PNG / JPEG / WebP / GIF / AVIF / SVG・貼り付けも可）

How to Use

  1. 2色を入れるカラーピッカーかHEX値（例: #e2453c）で色を2つ指定します。「よくある配色」から読み込むこともできます。
  2. 4つの見え方を見比べる通常・P型・D型・T型が並びます。判別しづらい型があると、その型を挙げて警告します。
  3. 画像も確かめるグラフ・地図・UIのスクリーンショットをドロップすると、同じ3つの型でシミュレートし、PNGで保存できます。

About This Tool

日本では男性の約5%・女性の約0.2%が、赤と緑の見分けがつきにくい色覚（P型＝1型、D型＝2型）にあたります。T型（3型・青と黄の軸）はごく稀です。40人のクラスに1人以上という割合なので、赤と緑で合否を示すグラフや、色だけで状態を伝えるUIは「一定の割合の人に読めない」ものになります。このツールは、その見え方を制作中に確かめるためのものです。

変換は Machado, Oliveira & Fernandes (2009) の生理学モデルに基づく行列（公開されている係数表）をそのまま使っています。行列はリニアRGBに掛けるものなので、sRGBのガンマを外してから掛け、掛けたあとで戻します（ガンマを外さずに掛けると暗い色が持ち上がって別の絵になります）。「見え方の強さ」は、100%が二色型（該当する錐体が無い状態）、70%・40%は異常三色型（錐体の感度がずれている状態）に対応します。当事者の見え方そのものではなく、あくまで設計を見直すための近似です。

判定に使う色差は OKLab 上の距離を100倍した値で、5未満なら並べてもほぼ同じ色、10未満なら迷う程度の差です。ただしコントラスト比が3:1以上あれば明暗で区別がつくため、色差が小さくても警告からは外します（＝色に頼らず明度差をつけるのが有効な対策だということです）。詳しいAA/AAA判定は コントラスト比チェッカー で、画像から色を拾うなら 画像からカラーパレット抽出、拾った色の変換は カラーコード変換 が対になります。

画像は長辺1600pxまで縮小してCanvasに描き、画素ごとに行列を掛けます（保存されるPNGもこの大きさです）。読み込み・変換・保存はすべてブラウザ内で完結し、画像はサーバーへ送信されません。配色はURLパラメータでも渡せます。例: /colorblind/?c1=e2453c&c2=2fa14a&sev=100。

Other Tools