Bookmarklet: List Colors #2

Posted at 2009-05-25T16:10:00+09:00 in Web Design

出力する表を色を背景にしたシンプルな表になるようにした。文字色は明度(ブライトネス)をチェックして明るい色なら黒、暗い色なら白を設定するようにしたので、文字が読めないって事はないと思う。まぁ満足のいくものが出来たのでこれで終わり。

Install Bookmarklet: List Colors

このサイトでList Colorsブックマークレットを起動した時のプレビュー

ちょっとすっきりする感じ。

明度差のチェックは、Techniques For Accessibility Evaluation And Repair ToolsのCheckpoint 2.2 - Ensure that foreground and background color combinations provide sufficient contrast when viewed by someone having color deficits or when viewed on a black and white screenで提示されているアルゴリズムを利用した。

このブックマークレットではrgb()で色を保持しているので、

function colorBrightness (color) {
  var [c, r, g, b] = color.match(/rgb\((\d{1,3}), (\d{1,3}), (\d{1,3})\)/);
  var brightness = ((r * 299) + (g * 587) + (b * 114)) / 1000;
  return brightness;
}

というコードで明度を取得し、閾値(いきち)である125以下なら黒(rgb(0, 0, 0))と十分な明度差がないと考えられるので文字色に白を指定し、それ以外は黒を指定するという単純なもの。

Recent entries from same category

このエントリと同じカテゴリに投稿された最近10件のエントリです。

  1. CSSグラデーションのちょっとしたテクニック #2
  2. google-code-prettifyを導入した
  3. CSSグラデーションのちょっとしたテクニック #1
  4. YUI 3: CSS Resetの問題
  5. Pure CSSな吹き出し
  6. リデザインとborder-radiusとtext-shadow
  7. 404エラーページの改善
  8. HTTPエラーページ
  9. 無料で400以上のフォントを手に入れよう！
  10. 安全な@font-faceの書き方(抄訳)

Comments

JavaScriptに対応、または有効な環境の場合、ここにこのエントリへのはてなブックマークコメントが表示されます。