色覚拡張 - キノコトッピング

グラフの凡例の色をクリックすると、同じ色の場所が画面上で光ります。色名を調べる、2色が紛らわしくないか判定する、別の色覚特性での見え方に切り替える機能も。

色の見分けに迷う場面を減らす拡張機能です。 色覚特性のある方の日常の困りごとにも、資料やUIの配色点検にも使えます。 ■ グラフモード — 凡例とグラフの対応が取れないときに グラフの凡例と本体、どれがどれか分からなくなることはありませんか。 Alt+Shift+G を押して凡例の色をクリックすると、画面上の同じ色だけが明るく残り、 白い枠が付きます。それ以外は暗く落ちます。 色を見分ける必要がなくなり、光った場所を見れば対応が分かります。 「3か所で見つかりました」のように箇所数も出ます。 「別の色を選ぶ」で凡例を順に送っていけば、全系列の対応が取れます。 ■ 色の名前を調べる Alt+Shift+C を押して画面の上をカーソルで動かすと、その位置の色名がその場に出ます。 拡大鏡が付くので、細い線や小さな文字の色も狙って拾えます。 CSSの指定値ではなく、実際に描画されているピクセルを読みます。 そのため画像・グラデーション・動画・canvas でも同じように色が取れます。 呼び方は2種類あります。 ・系統名 …「明るい鮮やかな青緑」のように、どんな色でも必ず言えるもの ・慣用色名 …「桜色」「群青」など。どれくらい近いかも一緒に出ます ■ 2色が見分けられるかを判定する 2つの色について、どれくらい違うか、何が違うか（明るさか、鮮やかさか、色みか）、 文字色として使えるか、そしてどの色覚型で見分けにくくなるかを答えます。 たとえば Material デザインの赤と緑は、元の色差66に対してD型では5.0まで落ちます。 この場合「D型では、この2色はほとんど同じに見えます」と警告し、 明るさの差があるかどうかで対処法まで示します。 色名が分からなくても、明るさの差が十分あれば実務では困らない、 という判断ができるようにしています。 ■ 体験モード — 配色が伝わるか確かめる Alt+Shift+D で、開いているページをその色覚型での見え方に切り替えます。 静止画ではなくページがそのまま使える状態で変わるので、スクロールしても リンクを押しても、その見え方のまま操作できます。 画面下のバーで型（P型・D型・T型）と強さを切り替えられます。 「元の色を見る」を長押しすると、その場で元の配色に戻って見比べられます。 ■ 計算について 色の違いはRGBの数値差では測っていません。RGB距離は暗い色どうしの差を過大に、 明るい色どうしの差を過小に見積もるためです。人の知覚に沿った CIELAB 空間と CIEDE2000 の距離を使っています。 色覚型ごとの見え方は Machado ら(2009) の方式で計算しています。 ■ プライバシー インストール時にサイトへのアクセス権限を求めません。 主要な機能は、あなたが操作した瞬間にそのタブだけを一時的に扱う仕組み（activeTab） だけで動きます。常時実行されるスクリプトは登録していません。 すべての処理が端末内で完結し、外部サーバーへの送信は一切ありません。 拾った色と設定は端末内にのみ保存され、他の端末に同期されることもありません。 ■ ご注意 判定は目安です。実際の見え方には個人差があり、画面の設定や周囲の明るさでも 変わります。医学的な検査ではなく、眼科での診断の代わりにはなりません。