🚚JavaScriptで背景色から文字色を導出する2020/11/21に公開2021/04/054件JavaScripttechこの記事は別アカウント(mryhryki)に移行しました。 Discussionりんご🍏2020/11/22この記事を読んで、文字色の判定の基準が気になったので調べてみました。 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 Hiroyuki2020/11/23情報ありがとうございます！ 確かにアクセシビリティを考慮したほうがより良くなりそうですね。 「アクセシビリティを考慮して文字色を求めてみる（2020-11-23 追記）」の章と、検証用のGistを作成してみました！ 返信を追加こーのいけ2020/11/23そういえば昔GitBucketのデフォルトアバターでランダム背景色での文字色決定にコントラスト比を使ったなと思い出しました。 この辺の実装です。（Scalaですが、「最後の式の値がreturnされる」ことだけ分かればある程度雰囲気は分かるかと）https://github.com/gitbucket/gitbucket/blob/31ace89f43e9737412d9e0646d709f7207024a3b/src/main/scala/gitbucket/core/util/TextAvatarUtil.scala#L21-L38 Moriya Hiroyuki2020/11/23情報ありがとうございます！😊 同じような実装を見て安心しました〜。
りんご🍏2020/11/22この記事を読んで、文字色の判定の基準が気になったので調べてみました。 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 Hiroyuki2020/11/23情報ありがとうございます！ 確かにアクセシビリティを考慮したほうがより良くなりそうですね。 「アクセシビリティを考慮して文字色を求めてみる（2020-11-23 追記）」の章と、検証用のGistを作成してみました！ 返信を追加
Moriya Hiroyuki2020/11/23情報ありがとうございます！ 確かにアクセシビリティを考慮したほうがより良くなりそうですね。 「アクセシビリティを考慮して文字色を求めてみる（2020-11-23 追記）」の章と、検証用のGistを作成してみました！
こーのいけ2020/11/23そういえば昔GitBucketのデフォルトアバターでランダム背景色での文字色決定にコントラスト比を使ったなと思い出しました。 この辺の実装です。（Scalaですが、「最後の式の値がreturnされる」ことだけ分かればある程度雰囲気は分かるかと）https://github.com/gitbucket/gitbucket/blob/31ace89f43e9737412d9e0646d709f7207024a3b/src/main/scala/gitbucket/core/util/TextAvatarUtil.scala#L21-L38
Discussion
この記事を読んで、文字色の判定の基準が気になったので調べてみました。
w3cのWeb Content Accessibility Guidelinesでは、明るい色と暗い色のコントラスト比が少なくとも
4.5:1になるようにとなっていました。大きい文字では3:1まで。Material DesignもWCAGのこの基準をもとにしているそうです。
情報ありがとうございます！
確かにアクセシビリティを考慮したほうがより良くなりそうですね。
「アクセシビリティを考慮して文字色を求めてみる（2020-11-23 追記）」の章と、検証用のGistを作成してみました！
そういえば昔GitBucketのデフォルトアバターでランダム背景色での文字色決定にコントラスト比を使ったなと思い出しました。
この辺の実装です。（Scalaですが、「最後の式の値がreturnされる」ことだけ分かればある程度雰囲気は分かるかと）https://github.com/gitbucket/gitbucket/blob/31ace89f43e9737412d9e0646d709f7207024a3b/src/main/scala/gitbucket/core/util/TextAvatarUtil.scala#L21-L38
情報ありがとうございます！😊
同じような実装を見て安心しました〜。