やってみる

アウトプットすべく己を導くためのブログ。その試行錯誤すらたれ流す。

背景色から白・黒みやすいほうを返す

 背景色は好きな色にする。それに応じて文字色として見やすい色を返す。

成果物

ライブラリ

問題提起

 背景色を好きな色にしたい。でも、文字色が見づらくなってしまうときがある。背景色に応じて自動で見やすい色がほしい。

解決案

 文字色はたいてい黒か白である。背景色におうじてどちらか見やすいほうを返す。

技術概要

chroma.contrast()

 chroma.contrast()は2色を比較して見やすいか判定してくれる。戻り値が4.5以上なら見やすい。これを使って自由な値として渡された背景色と、白・黒を比較し、見やすいほうを返す。

役割

 色には役割がある。状態によって色を変える。詳しくはmemo.md参照。

  • 背景色
  • 文字色
  • フォーカス色
  • 選択色

CSSの動的変更

 背景色を変えたとき、文字色など他の色もそれにあわせて変更したい。どうするか。

 JSで<style>要素を動的生成する。詳しくは method.md参照。

対象環境

$ uname -a
Linux raspberrypi 5.4.83-v7l+ #1379 SMP Mon Dec 14 13:11:54 GMT 2020 armv7l GNU/Linux