01
色か画像かを先に選ぶ
ブランド色ならHEX、図表やUIなら画像モードを使います。PNG・JPEG・WebPは選択、ドロップ、貼り付けに対応し、10MBまたは1200万画素を超える画像は縮小せずに拒否します。
色とアクセシビリティ
色覚シミュレーター画像と単色を元の見え方と比較
HEXカラーまたは手元の画像で、元画像と色覚特性の近似結果を並べて確認します。
色覚シミュレーター
#FF5733
#B19F2B
色と画像はブラウザー内だけで処理し、サーバーに送信しません。
設定
色 / 画像
赤と緑の区別が難しくなる型です。
Machado 2009の行列を線形sRGBに適用。強度は混合率であり、個人の症状の測定値ではありません。
現在の結果を表示しています。
グラフの赤と緑が凡例なしでも区別できるように見えても、別の色覚条件では系列が重なることがあります。色覚シミュレーターは元画像を残したまま、その区別が失われる場所を探すための道具です。
色盲シミュレーターや色弱シミュレーターとして単色を先に試し、次に実際の画面や資料を画像モードで確認できます。色覚シミュレーションは人の主観を再現するものではなく、設計上の手掛かりです。
色覚シミュレーターを使う理由
色だけで伝えた意味が残るか、元画像を見ながら判断できます。
元画像と変化した系列を同時に見る
赤緑の状態表示や青黄の線が近づく場所を、同じ大きさの画像で比較します。色覚シミュレーターは色が消えたと断定するのでなく、ラベルを足すべき箇所を見つけます。
強度を動かしても原色を保持
HEXの原色と変換後の色を並べ、0%から100%までの変化を確認できます。数値はモデルの混合率であり、個人の色覚特性の程度を表しません。
結果を取り違えないための三つの確認
02
種類と強度の更新を待つ
初期設定は2型色覚、強度100%です。変更後は350ミリ秒で自動更新します。自動プレビューを切ると実行ボタンが現れ、Ctrl/Cmd+Enterでも実行できます。
03
現在の結果だけを保存する
入力や設定を変えると古い結果は淡くなり、コピーと保存が無効になります。更新完了を確認してからHEXをコピーするかPNGを保存してください。
色と画像を同じ条件で比べる
三つの色覚軸とグレースケール
1型・2型・3型色覚の変換にはMachado 2009行列を使い、全色盲の表示には線形光の輝度を使います。画像色弱チェックで赤緑と青黄の両方を確認できます。
画像の画素数を保って出力
PNGのダウンロードは元画像の幅と高さで作成し、透明度も残します。画面上の小さなプレビューを拡大した画像ではありません。
入力方式ごとに適切な書き出し
単色では変換後の6桁HEXをコピーし、画像では現在の種類と強度のPNGを保存します。元画像を変換結果として上書きしません。
近似表示の境界を知る
- 診断には使用できない
- 色覚シミュレーターから本人の色覚タイプや程度は分かりません。強度は数式上の混合率で、眼科検査の値ではありません。
- WCAGの合否は出さない
- 色の見分けにくさを示すだけで、文字のコントラスト比や色以外の手掛かりは検査しません。対比度とラベルを別途確認してください。
- 静止画像だけを扱う
- 対応するのはPNG・JPEG・WebPの10MB、1200万画素以内です。GIF動画、SVG、HEIC、URL取得やカメラ入力は扱いません。
- 画面と色域に左右される
- 画像をsRGBとして処理するため、HDRや広色域画像、表示装置の調整によって見え方が変わります。特定の人が見る色そのものとは言えません。
色覚シミュレーターのよくある質問
色覚特性のある人には本当にこう見えているのですか
いいえ。色覚シミュレーターは色の区別が残るかを近似して示します。生まれつき異なる色覚を持つ人の主観的な世界を、そのまま再現することはできません。
シミュレーションにはどのモデルを使っていますか
1型・2型・3型にはMachado 2009に基づく色変換行列を使います。全色盲の表示は線形光の輝度によるグレースケールです。
画像はサーバーに送信されますか
送信しません。選択または貼り付けた画像はブラウザー内で読み取り、処理します。画像内容をURLにも入れません。
グラフが読めればアクセシビリティの確認は終わりですか
まだ終わりではありません。系列を色以外でも区別できるようにし、文字のコントラスト比も別に確認してください。
どの色覚タイプから確認すればよいですか
赤と緑で意味を分けているなら2型色覚から、次に1型色覚を確認します。青と黄を使う図なら3型色覚も確認してください。
疑問が残りましたか？