色覚シミュレーション
Colour Blindness Simulator
1型・2型・3型色覚や白黒の見え方で画像を描き直します。
系列を色相だけで区別しているグラフは、男性のおよそ12人に1人にとって読めません。そして典型的な色覚で眺めているかぎり、それに気づく方法はありません。このツールは画像全体を2色覚の目が受け取るとおりに描き直し、どれだけ区別が失われたかを数値にします。
グラフ・地図・スクリーンショットを置いてください
シミュレーションはこのタブの中でピクセルに直接かかります。
使い方
画像を置きます
グラフ、地図、ヒートマップ、ダッシュボードのスクリーンショット——情報が色相に乗っている場合です。
色覚の型を選びます
男性のおよそ1%を占める2型がとびぬけて多いので、そこから始めてください。3型は、設計上の制約というより網羅性の確認になるほど稀です。
分離度の数値を読みます
各ピクセルが動いた距離の平均を、RGB立方体の対角線に対して測ったものです。0に近ければ、この画像はここで取り除かれる色にほとんど依存していません。
色相以外の手がかりで直します
明度を変える、実線と破線を分ける、マーカーの形を変える、直接ラベルを置く。どれか1つあれば、ここでのどのシミュレーションを通しても区別が残ります。
よくある質問
色覚特性のある人には、本当にこう見えているのですか
これは2色覚——錐体が1種類まるごと欠けている状態——を投影したもので、重いほうの端です。特性のある人の多くは異常3色覚で、錐体はあって反応がずれているので、体験はこれとあなたの見え方のあいだにあります。
程度のスライダーは何をしていますか
2色覚の結果へ向かって線形に混ぜています。段階ごとに別の行列を当てるMachadoら（2009）のモデルとは違います。程度1では作りのうえで一致し、その途中は近似で、ページにもそう書いてあります。
数値が低ければ、グラフに問題はないということですか
平均としてあまり色が動かなかった、という意味です。ほとんど白いページなら難なくそうなります。シミュレーションした画像のほうも見てください。赤と緑だった2系列が重なっていても、平均はほとんど動きません。
ここから渡せます
明るさ・色の補正
Brightness & Colour Adjust
ヒストグラムを見ながら明るさ・コントラスト・彩度・色温度・シャープネスを調整します。
コントラスト比チェッカー
Contrast Checker
文字色と背景色の組み合わせをWCAG 2とAPCAで採点し、基準を満たす最も近い色を提案します。
PNG圧縮
PNG Compressor
パレットを量子化してdeflateストリームを書き直し、寸法を変えずにPNGを軽くします。
JPEG圧縮
JPEG Compressor
指定した画質でJPEGを再エンコードし、前後の容量と差分をその場で見せます。
次の一手
このツールが出したものをそのまま受け取れる道具です。
コントラスト比チェッカー
Contrast Checker
文字色と背景色の組み合わせをWCAG 2とAPCAで採点し、基準を満たす最も近い色を提案します。
画像から配色抽出
Palette Extractor
画像から代表色をN色抜き出し、HEX・CSS変数・ASEスウォッチとして書き出します。
配色パレット生成
Palette Generator
基準の色から補色・三色配色・類似色の規則で調和のとれたパレットを組み立てます。
背景透過（切り抜き）
Background Remover
平坦な背景や単色の背景をOKLabでキーイングして透過PNGにし、縁はブラシで直せます。
EXIF情報の削除
EXIF Remover
画素には手を触れずに、カメラ・GPS・編集履歴のメタデータだけを写真から消します。
ファビコン生成
Favicon Generator
ICO・各サイズのPNG・Appleタッチアイコン・ウェブマニフェストを一式で作り、貼り付けるHTMLも添えます。