1. 導入
Webアプリケーション開発において、ユーザーが自由にテーマカラーや背景色を選択できるUIを実装する際、「背景色に対して文字色が読みづらい」という課題に直面することがあります。単にRGB値の平均をとるだけでは、人間の視覚特性（特に緑や青の明るさの感じ方）に対応できず、アクセシビリティが低下します。本記事では、YUV輝度計算を活用し、背景色に応じて自動的に視認性の高い文字色（白または黒）を判定する手法を解説します。
2. 基礎知識
RGB（赤・緑・青）は、0から255の数値で色を表現しますが、人間の目はそれぞれの色に対して感度が異なります。一般的に、緑は明るく感じ、青は暗く感じられます。そのため、単純に RGB の数値を平均（(R+G+B)/3）して「127より大きいか小さいか」で判定すると、緑背景で文字が読みづらくなるなどの問題が発生します。
これを解決するために用いられるのが輝度（Y）の算出公式です。
Y = 0.299 × R + 0.587 × G + 0.114 × B
この式を用いることで、人間の視覚に近い「色の明るさ」を数値化でき、より正確に「白文字と黒文字のどちらが適しているか」を判定可能になります。
3. 実装/解決策
実装は非常にシンプルです。背景色のRGB値を取得し、上記の公式で輝度Yを算出します。算出されたY値が一定の閾値（通常は127）を超えていれば「明るい背景」として黒い文字を、そうでなければ「暗い背景」として白い文字を選択するように条件分岐させます。
4. サンプルプログラム
以下は、様々な背景色に対して適切な文字色をPHPで自動判定するサンプルコードです。そのままPHPファイルとして保存し、ブラウザで確認してください。
127) ? ‘black’ : ‘white’;
echo sprintf(
‘
‘背景 RGB(%d, %d, %d) の文字色は %s’ .
‘
‘,
$r, $g, $b, $textColor, $r, $g, $b, $textColor
);
}
?>
5. 応用・注意点
閾値の調整: 127という数値はあくまで標準的な基準です。もしWebサイトのトーンが全体的に彩度が高い場合は、閾値を150程度に調整するなど、デザインに合わせて微調整を行うのが現場のコツです。
アクセシビリティの考慮: この手法は白黒の二択ですが、厳密なWCAG（Web Content Accessibility Guidelines）準拠を目指す場合は、背景色と文字色のコントラスト比を計算するロジックを導入する必要があります。また、透過色（RGBA）が含まれる場合は、背景に重なる要素の背景色を考慮した計算が必要になるため、単純なRGB値だけではなく、合成後の色を考慮する設計を心がけてください。