色覚拡張 - キノコトッピング
Extension Actions
- Live on Store
グラフの凡例の色をクリックすると、同じ色の場所が画面上で光ります。色名を調べる、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)
だけで動きます。常時実行されるスクリプトは登録していません。
すべての処理が端末内で完結し、外部サーバーへの送信は一切ありません。
拾った色と設定は端末内にのみ保存され、他の端末に同期されることもありません。
■ ご注意
判定は目安です。実際の見え方には個人差があり、画面の設定や周囲の明るさでも
変わります。医学的な検査ではなく、眼科での診断の代わりにはなりません。