Color Checker Bookmarklets

Bookmarklets

For Mozilla/Firefox

Mozilla/Firefox用のブックマークレットです。マウスなどで選択した範囲の色のコントラスト（明度差）をチェックします。複数要素にまたがって選択されている場合は、先頭部分の要素の色をチェックします。

This is a bookmarklet for Mozilla/Firefox browsers. Colors are calculated for selected area on the document. If multipl elements are included in the area, the first element will be used. And if the element has no background-color (i.e. transparent), the nearest ancestor with background-color will be used. Default bacground is assumed to be '#ffffff'. Color names are not supported.

Color Checker for Moz

For Windows IE6

Windows IE(6)は約500バイト以上のブックマークレットは動作せず、DOMの実装も異なるので、色が6桁の16進数で指定されている場合に限って計算できるバージョンになっています。

Because Windows IE(6) has a limitation of URL length about 500 bytes, this is a limited version for this browser. It calculates contrasts only when colors are specified as 6-digit hex values.

Color Checker for Win IE6

For Safari

Safari用のブックマークレットです。基本的にMozilla/Firefox用と同じですが、透明を表す値がSafariではtransparentではなくrgba(0, 0, 0, 0)となるので、コードを節約するために別バージョンにしています。

This is for Safari browser for Mac OS/X. Basically the same as Moz bookmarklet, with only difference that this uses rgba(0, 0, 0, 0) for transparent value.

Color Checker for Sfari

For Opera

Operaには選択範囲の要素を取り出す機能がないようなので、他のブラウザと同様のブックマークレットを作成することができません。とりあえずの代替策として、body要素内のノード番号を入力することで、対象要素を特定して色を計算します。たぶん、使いにくいです。

Opera doesn't seem to support to find node (not text) of a selected area. So this is a dirty alternative, which prompts 'element No.', then calculates color contrast. Not very inpressive :-(

Pseudo Color Checker for Opera

Motivation and method

文字色と背景色のコントラストは、数値をフォームに入れて計算させることも可能ですが、一つの文書中で様々な色の組み合わせがある場合、いちいちフォームを使うのは手間がかかります。そこで、文書中で選択された領域にある要素の、colorプロパティとbackground-colorプロパティの「算出値」をスクリプトによって取得して計算しようというのがこのブックマークレットの試みです（DOMのstyleプロパティでは、スクリプトで設定した値しか読みとれません）。

基本的に、どの要素も文字色は具体的な値を持ちますが、背景色は多くの場合透明（transparent）で、祖先要素の背景の上に描画されています。そのため、要素自身の背景色がtransparentである場合は、祖先要素のツリーを辿って背景色の指定値を探します。ルート要素まで背景色の指定値がない場合は、キャンバス色を白と仮定してコントラストを計算します。

Limitations

• 色の値は、10進数のrgb関数、もしくは16進数（#rrggbb）による指定値から算出します。ブックマークレットという制約内で計算するため、色名による指定は対応していません。また、WinIE版は6桁の16進数のみ対応しています。
• DOMツリーを辿って背景を調べるので、絶対配置などで祖先以外の背景上に描画されている場合、計算値が見かけとは異なることがあります。
• 画像化された文字、背景画像の色は計算しませんので、これらが用いられているときは、やはり見かけとは異なる結果となることがあります（画像OFF状態での結果になります）。
• キャンバス色は白に固定しています。ブラウザの設定で異なる色を指定していても、反映されません。
• フレーム内の選択部分はうまくプロパティを取得できません。
• 明度差が185以上ならOK, 125あればfair、それ以下はpoorという目安を示します（WinIE版を除く）。詳しくは色の組み合わせチェック - 読みやすい前景色と背景色を参照してください。