明滅するプログラマの思索

WEBエンジニアとして勤務している一介の男が、日々気づいたことをまとめるブログです

背景色に対する文字色を明度の差で動的に決定する

背景色を動的に変更したい、そのうえで、文字も見えづらくならないように動的に変更したい、という場合があるとします。
たとえば、とある表があって、各セルの背景色を任意に指定できる場合、文字色も併せて変更しないと、文字がつぶれて見えなくなってしまったりします。
こういった場合に、背景色を基に文字色を決定できれば良いと考えます。

明度

W3C草案には、読みやすいHTMLを作成する指針として、背景色と文字色の明度の差は125以上あるのが望ましいと記載されています。
参考:Techniques For Accessibility Evaluation And Repair Tools

明度とは、字のごとく明るさのこと。
明度が低ければ暗い色であり、高ければ明るい色です。

参考のURLには、計算式についても記載があります。

計算式(RGB):
明度 = ((Red value X 299) + (Green value X 587) + (Blue value X 114)) / 1000

背景色から明度を計算

ここでは、背景色から文字色を動的に決定するために、上記の明度の計算式を使って実装してみようと思います。
背景色の明度が125より小さい場合は文字色を白にし、逆に背景色の明度が125より大きい場合は文字色を黒にするサンプルコードです。

jQueryを利用しています。

<div id="target_div">
明滅するプログラマの思索
</div>

<script>
$(function() {
  textcolor = "#000000";
  bgcolor = $('#target_div').css("background-color").toString();
  bgcolor = bgcolor.replace("rgb(","");
  bgcolor = bgcolor.replace(")","");
  bgcolor = bgcolor.split(",");
  meido = (bgcolor[0]*299+bgcolor[1]*587+bgcolor[2]*114)/1000;
  if (meido < 125) {
    textcolor = "#ffffff";
  }
  $('#target_div').css("color", textcolor);
});
</script>

id が target_div である div 要素の背景色を基に、その要素の文字色を判定するコードです。
通常、HTMLでは色は16進数の6桁表記になっていますが、jQuery の toString() メソッドを使うと、10進数表記に変更することができます。

$('.color').css('background-color', '#ff0000');
bgcolor = $('.color').css('background-color').toString();
// bgcolor には rgb(255,0,0) という文字列が入ります

そこから replace() メソッドを使って余計な文字を取り除き、split() メソッドを使ってカンマで分割し、RGBの各数値を割り出します。
そして上述の計算式に当てはめて明度を計算しています。