色、難しい
緑は眩しい
webで色つくるとき、エンジニア的には hsv/hsl で s, v を固定してhueを適当にグルグルするっていう色の作り方がポピュラーだと思う。
css3 では hsl で色を指定できるようになった。
でも、背景色によってはなんか緑だけ目が痛いとかいうことになる。
下は s:90%, l:75% で固定して hue を 20, 140, 260 にした例。
hueしか変更してないのに、緑だけ読みにくい。
人間の眼は緑にだけ敏感なのでこうなるらしい。
cf.) 海外のすごいおっさんのブログ, wikipedia
Web Content Accessibility Guidelines
アクセシビリティの人たちなんか考えてるはずって思って調べたらこういうのあった
http://www.w3.org/TR/2008/REC-WCAG20-20081211/#contrast-ratiodef
背景と前景の contrast ratio が 4.5 : 1 以上になるようにしろっていう指摘。
個人的には4.5は厳しすぎるような。
（計算式は面倒なので省きます。↑のページ見てくれ）
コントラストを考慮して自動で配色してくれるライブラリとか無いかなーって探してみた。
とりあえず color js library でググルト、以下の物が出てくる。
contorast ratioを計算してくれたり、ratioが4.5以上か判定してくれたり、あと最もコントラストの大きい色を返してくれるのはあるけど、適当なコントラストの色を作ってくれるのは無さそうだった。
自動で計算したい
調べたけど、hueだけから適当な色作るの無理っぽい。
そこで、hslの内2つと、背景色、満たすべきcontrast ratio を指定したら、適当な色つくってくれるデモ書いてみた。
hue か s を動かしたら l を、l を動かしたら s を、minimum contrastを満たすように動かしてくれる。 どう頑張ってもminimum contrastを満たせない場合は 'invalid' って出る。
冒頭の画像と同じ hue, s にして、minimum contrastを 1,5 にすると、l が自動で計算されて、こうなる。
hue = 140でコントラスト比1.54を満たすには、l を 46% まで下げないといけない事がわかる。
もうちょっとちゃんとしたらツールとして公開したい。
（既存ライブラリにPR送った方が速いかな）
まとめ
色、難しい
