Nwht0xn1

背景色を元にそれなりに見やすい文字色を用意するCreated on 2016-05-01 by r7kamura

コミュニティごとにヘッダの背景色を設定できるようになりました - WikiHub Help で使ったやつの説明。

判定方針

Twitter経由で教えてもらったのだけど、どれくらい文字色と背景色でどれくらいの明度差があれば読みやすいのかについて Techniques For Accessibility Evaluation And Repair Tools に以下の記述がある。

Color brightness is determined by the following formula:
((Red value X 299) + (Green value X 587) + (Blue value X 114)) / 1000
Note: This algorithm is taken from a formula for converting RGB values to YIQ values. This brightness value gives a perceived brightness for a color.
The rage for color brightness difference is 125.

いろいろ考察した結果、仮に白か黒の文字色しか使わない場合、背景色に上の式を適用した値が125以下であれば、黒文字だと明度差が小さすぎて読みづらいので白文字にした方が良いということになる。

コード

さて、WikiHubではMySQLのcommunitiesテーブルに各コミュニティの設定値が保存されており、header_background_colorカラムに背景色の値が入っている。実際には 006FAA のように6桁の16進数に相当する値が、10進数でINT(11)型のカラムに格納されている。そこで、先述した式と背景色の値を使いながら、白系統の文字色を使うべきかどうかを返すメソッドを用意した。

class Community < ActiveRecord::Base
  # @note https://www.w3.org/TR/AERT#color-contrast
  # @return [false, true]
  def has_dark_header_background_color?
    red, green, blue = header_background_color_hex.scan(/../).map { |hex| hex.to_i(16) }
    (red * 299 + green * 587 + blue * 114) < 125_000
  end
end

文字色

文字色には透過色を使って実現を楽にした。GoogleのMaterial Designなどについて書かれたガイドラインの色に関する項目 Color - Style - Google design guidelines で「Text and background colors」のところを見ると、背景色が明るめの場合は rgba(0, 0, 0, .87)rgba(0, 0 ,0, .54) を、背景色が暗めの場合は rgba(255, 255, 255, 0)rgba(255, 255, 255, .7) を使うのが良いと言っており、参考になりそうなので文字色にはこの式を利用した。