🚚

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

1 min read 4

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

この記事に贈られたバッジ

Discussion

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

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

https://www.w3.org/TR/WCAG/#contrast-minimum

Material DesignもWCAGのこの基準をもとにしているそうです。

https://material.io/design/color/text-legibility.html#legibility-standards

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

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

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

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

ログインするとコメントできます