PHP で背景色に対して見えやすい文字色は白か黒かを判別する

2017年6月30日

背景色に対して見えやすい文字色は何色か？

基本的には、どんな背景色に対しても「最も」見えやすいのは「白」か「黒」のどちらかになる。

なので、背景色に対して白系統か黒系統かだけを判別すれば「見えやすい文字色」になるのだが、問題はその判別方法である。

輝度、コントラスト、反転色による色判定

今回は背景色の「輝度」「コントラスト」「反転色」を取得して、それぞれで文字色を判別する方法を PHP で試してみた。

輝度による判別

YUV による輝度信号で判別するパターン。輝度信号の中間の値（128）で白か黒かを判断する。

function get_yuv_text_color( $colorcode ) {
	$rgb = array( 'r' => 255, 'g' => 255, 'b' => 255 );
	$lum = 128;	// 輝度信号 Y の白黒分岐点 (128 がジャスト真ん中)

	// カラーコードを RGB に分割する
	if( stripos( $colorcode, '#'  ) !== false ) {
		$colorcode = str_replace( '#', '', $colorcode );

		if( ctype_xdigit( $colorcode ) && strlen( $colorcode ) >= 6 ) {
			$rgb['r'] = hexdec( substr( $colorcode, 0, 2 ) );
			$rgb['g'] = hexdec( substr( $colorcode, 2, 2 ) );
			$rgb['b'] = hexdec( substr( $colorcode, 4, 2 ) );
		}
	}

	// RGB から YUV の輝度信号に変換
	$yuv = 0.299 * $rgb['r'] + 0.587 * $rgb['g'] + 0.114 * $rgb['b'];

	return ( $yuv >= $lum ) ? '#000' : '#fff';
}

かなり見えやすい。
が、個人的には輝度信号Y の値をピッタリ中間の 128 にするより、少し値を上げた方が見えやすく感じる（後述）。

コントラストによる判別

コントラストの差異で判別するパターン。コントラストの中間（50%）で白か黒かを判定する。

function get_contrast_text_color( $colorcode ){
	$per = 50;	// 白黒分岐点 (50% が真ん中)
	if( hexdec( $colorcode ) > 0xffffff * ( $per / 100 ) ) {
		return '#000 ';
	}
	return '#fff';
}

必ずしも見えやすいとは言いがたい。
濃い背景色、薄い背景色に対してコントラスト比を調整できれば見えやすくなりそうだけど、それだと結局、輝度信号（もしくは HSV の S や V の値）を使うことになりそう。

反転色

白黒ではなく、単純に反転色にしてみたパターン。

function get_inverse_text_color( $colorcode ){
	$colorcode = str_replace( '#', '', $colorcode );
	$inverse = hexdec( $colorcode ) ^ hexdec( 'ffffff' );
	return sprintf( '#%06x', $inverse );
}

見えにくいものが多い。
というか、灰色は反転しても灰色なので、gray 付近は絶望的に見えない。

結論

個人的には、YUV による輝度判定で、輝度信号 Y の中間判定の値を 135～148 くらいにしたパターンが一番見えやすい気がした。