[PHP]背景の明るさを基準に見やすい文字色を組み合わせる(YUV輝度)

Facebook にシェア
Delicious にシェア
LINEで送る
Pocket

背景色によって白か黒の文字色を選ぶ時、黒い背景の時は白い文字、白い背景の文字の時は黒い文字が見やすいのは確かですが、青い背景や赤い背景、黄色の背景ではどうでしょうか?

RGB値はそれぞれ 0 ~ 255 の数値で表され、0 に近いほど暗くなり、255 に近いほど白っぽくなるのはご存知かと思います。
そこで、RGB の平均が半分を超えていれば明るい背景で、半分以下なら暗い背景であると単純に考えてしまうのは誤りです。

青(0, 0, 255) はその基準では暗い背景であり、確かに白い文字は見やすいです。

SAMPLE

緑色(0, 255, 0) も同じ平均値なので白い文字を使ってみます。

SAMPLE

かなり読みづらいのがわかると思います。
人間の視覚では RGB の青は暗く、緑は明るく見えるからです。

そこで映像分野でよく使われている輝度成分を利用します。
輝度(Y)は次の変換公式がよく使われています。

Y = 0.299 × R + 0.587 × G + 0.114 × B

では、RGBの平均を基準にしたものと、輝度を基準にしたもので文字の見え方がどう変わるか見てみます。

yuv

RGBでは緑、ピンクが見づらいですが、輝度を基準にしたものは解消されています。算出に用いた PHP のプログラムは以下です。

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Sample</title>
</head>
<body>
<?php
$colors = array(
	array(0, 0, 0),
	array(255, 255, 255),
	array(255, 0, 0),
	array(0, 255, 0),
	array(0, 0, 255),
	array(255, 255, 0),
	array(0, 255, 255),
	array(255, 0, 255)
);

foreach($colors as $color){
	list($r, $g, $b) = $color;
	$y = 0.299 * $r + 0.587 * $g + 0.114 * $b;
	$html = <<<EOD
<span style="background-color: rgb(%d, %d, %d);color: %s;">
SAMPLE</span><br />
EOD;

	$textColor = ($y > 127) ? 'black' : 'white';
	printf($html, $r, $g, $b, $textColor);
}
?>
</body>
</html>

参考: Wikipedia「YUV」
http://ja.wikipedia.org/wiki/YUV


Similar Posts:




  • This entry was posted in PHP. Bookmark the permalink.

    コメントを残す

    メールアドレスが公開されることはありません。