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

この記事を読んで、文字色の判定の基準が気になったので調べてみました。 w3cのWeb Content Accessibility Guidelinesでは、明るい色と暗い色のコントラスト比が少なくとも 4.5:1 になるようにとなっていました。大きい文字では 3:1 まで。 Material DesignもWCAGのこの基準をもとにしているそうです。

[hyirm]

アクセシビリティを考慮して文字色を求めてみる（2020-11-23 追記）を追記しました。

[d4-1977]

こうした計算方法があったのか！以前やろうとして上手くできなくて止めていたんです。ナルホドなあ

[fukken]

YUVは「人間が色を感じる仕組み」を元にした規格なので、人間からの見え方を基準にして処理する際には圧倒的に便利。

[hirorock]

a11y js 色を計算

[Knoa]

highlight.isLightText = function(node){ const R = .299, G = .587, B = .114, THRESHOLD = 192; const element = node.parentNode; const rgb = getComputedStyle(element).color.match(/[0-9]+/g); const luminance = rgb[0]*R + rgb[1]*G + rgb[2]*B; return (THRESHOLD < luminance); };

[yarumato]

“背景色が可変のとき、テキストの色を計算で導出する。背景明るい色の時は黒、暗い色の時は白と判定するだけ。RGBのままでは判定不可。YUV色表現のうちのY(輝度)を使う。Y (暗)0-255(明)のうち140を境に文字色を変更”

[efcl]

YUV

[teppeis]

背景色に対する文字色（白 or 黒）をコントラストベースでa11yに配慮して選択する方法

[kkeisuke]

“RGBをY(輝度)に変換する”

[sotq17]

文字色の自動切り替え。意外と簡単にできるかも？？