背景色から白・黒みやすいほうを返す
背景色は好きな色にする。それに応じて文字色として見やすい色を返す。
成果物
ライブラリ
問題提起
背景色を好きな色にしたい。でも、文字色が見づらくなってしまうときがある。背景色に応じて自動で見やすい色がほしい。
解決案
文字色はたいてい黒か白である。背景色におうじてどちらか見やすいほうを返す。
技術概要
chroma.contrast()
chroma.contrast()は2色を比較して見やすいか判定してくれる。戻り値が4.5以上なら見やすい。これを使って自由な値として渡された背景色と、白・黒を比較し、見やすいほうを返す。
役割
色には役割がある。状態によって色を変える。詳しくはmemo.md参照。
- 背景色
- 文字色
- フォーカス色
- 選択色
CSSの動的変更
背景色を変えたとき、文字色など他の色もそれにあわせて変更したい。どうするか。
JSで<style>
要素を動的生成する。詳しくは method.md参照。
対象環境
- Raspbierry pi 4 Model B
- Raspberry Pi OS buster 10.0 2020-08-20 ※
- bash 5.0.3(1)-release
$ uname -a Linux raspberrypi 5.4.83-v7l+ #1379 SMP Mon Dec 14 13:11:54 GMT 2020 armv7l GNU/Linux