🚚

JavaScriptで背景色から文字色を導出する

2020/11/21に公開

この記事は別アカウント(mryhryki)に移行しました。

この記事を読んで、文字色の判定の基準が気になったので調べてみました。

w3cのWeb Content Accessibility Guidelinesでは、明るい色と暗い色のコントラスト比が少なくとも 4.5:1 になるようにとなっていました。大きい文字では 3:1 まで。

情報ありがとうございます！
確かにアクセシビリティを考慮したほうがより良くなりそうですね。
「アクセシビリティを考慮して文字色を求めてみる（2020-11-23 追記）」の章と、検証用のGistを作成してみました！

そういえば昔GitBucketのデフォルトアバターでランダム背景色での文字色決定にコントラスト比を使ったなと思い出しました。

この辺の実装です。（Scalaですが、「最後の式の値がreturnされる」ことだけ分かればある程度雰囲気は分かるかと）https://github.com/gitbucket/gitbucket/blob/31ace89f43e9737412d9e0646d709f7207024a3b/src/main/scala/gitbucket/core/util/TextAvatarUtil.scala#L21-L38

情報ありがとうございます！😊
同じような実装を見て安心しました〜。