🚚

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

2020/11/21に公開
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

Moriya HiroyukiMoriya Hiroyuki

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

こーのいけこーのいけ

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

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

Moriya HiroyukiMoriya Hiroyuki

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