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

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

Extension Actions

How to install Open in Chrome Web Store
CRX ID
mmipicdcglnllhjlcolefdcoclkekaih
Status
  • Live on Store
Description from extension meta

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

Image from store
色覚拡張 - キノコトッピング
Description from store

色の見分けに迷う場面を減らす拡張機能です。
色覚特性のある方の日常の困りごとにも、資料や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)
だけで動きます。常時実行されるスクリプトは登録していません。

すべての処理が端末内で完結し、外部サーバーへの送信は一切ありません。
拾った色と設定は端末内にのみ保存され、他の端末に同期されることもありません。

■ ご注意

判定は目安です。実際の見え方には個人差があり、画面の設定や周囲の明るさでも
変わります。医学的な検査ではなく、眼科での診断の代わりにはなりません。