Color Checker Bookmarklets


These are javascript bookmarklets that attempt to find 'computed' value of forground and background color of a selected area, and report its color contrast. Useful to check a page with multiple color combinations.


For 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 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




  • 色の値は、10進数のrgb関数、もしくは16進数(#rrggbb)による指定値から算出します。ブックマークレットという制約内で計算するため、色名による指定は対応していません。また、WinIE版は6桁の16進数のみ対応しています。
  • DOMツリーを辿って背景を調べるので、絶対配置などで祖先以外の背景上に描画されている場合、計算値が見かけとは異なることがあります。
  • 画像化された文字、背景画像の色は計算しませんので、これらが用いられているときは、やはり見かけとは異なる結果となることがあります(画像OFF状態での結果になります)。
  • キャンバス色は白に固定しています。ブラウザの設定で異なる色を指定していても、反映されません。
  • フレーム内の選択部分はうまくプロパティを取得できません。
  • 明度差が185以上ならOK, 125あればfair、それ以下はpoorという目安を示します(WinIE版を除く)。詳しくは色の組み合わせチェック - 読みやすい前景色と背景色を参照してください。
  • Colors are calculated from decimal rgb() function or hex values. Color names are not supported. In addtion, WinIE version only supports 6-digit hex values.
  • Contrasts of absolutely positioned elements may not be calculated correctly.
  • Colors of rasterized letters (image) and background images are not calculated. This might lead different result than what you see.
  • Canvas color is fixed as '#ffffff'. User preferences are not taken into account.
  • Cannot find property values of a selected area within a frame
  • WCAG suggests difference of brightness should be at least 125. If less than 125, bookmarklet will indicate 'poor'. If above 185, 'OK', otherwise 'fair'.