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

カラーパレット

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

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

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

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

今回は背景色の「輝度」「コントラスト」「反転色」を取得して、それぞれで文字色を判別する方法を 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';
}
black
navy
darkblue
mediumblue
blue
midnightblue
indigo
maroon
darkred
purple
darkmagenta
darkgreen
darkviolet
darkslategray
darkslateblue
green
red
firebrick
brown
saddlebrown
crimson
mediumvioletred
teal
blueviolet
darkolivegreen
forestgreen
darkcyan
darkorchid
sienna
deeppink
dimgray
seagreen
fuchsia
royalblue
slateblue
olive
orangered
steelblue
olivedrab
dodgerblue
mediumslateblue
slategray
indianred
chocolate
gray
mediumorchid
lightslategray
lightseagreen
mediumpurple
darkgoldenrod
mediumseagreen
cadetblue
limegreen
deepskyblue
tomato
cornflowerblue
darkturquoise
peru
palevioletred
lime
orchid
rosybrown
hotpink
darkorange
coral
lightcoral
salmon
springgreen
mediumspringgreen
goldenrod
mediumturquoise
darkgray
darkseagreen
mediumaquamarine
darksalmon
yellowgreen
orange
turquoise
violet
darkkhaki
aqua
sandybrown
lightsalmon
tan
lawngreen
plum
chartreuse
skyblue
burlywood
lightskyblue
silver
lightsteelblue
lightgreen
thistle
gold
lightblue
lightpink
greenyellow
palegreen
powderblue
lightgrey
aquamarine
pink
paleturquoise
gainsboro
khaki
wheat
peachpuff
yellow
navajowhite
palegoldenrod
moccasin
lavender
bisque
mistyrose
antiquewhite
blanchedalmond
papayawhip
linen
beige
whitesmoke
lavenderblush
lightgoldenrodyellow
oldlace
lightcyan
lemonchiffon
aliceblue
cornsilk
seashell
ghostwhite
honeydew
floralwhite
azure
mintcream
lightyellow
snow
ivory
white

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

コントラストによる判別

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

function get_contrast_text_color( $colorcode ){
	$per = 50;	// 白黒分岐点 (50% が真ん中)
	if( hexdec( $colorcode ) > 0xffffff * ( $per / 100 ) ) {
		return '#000 ';
	}
	return '#fff';
}
black
navy
darkblue
mediumblue
blue
midnightblue
indigo
maroon
darkred
purple
darkmagenta
darkgreen
darkviolet
darkslategray
darkslateblue
green
red
firebrick
brown
saddlebrown
crimson
mediumvioletred
teal
blueviolet
darkolivegreen
forestgreen
darkcyan
darkorchid
sienna
deeppink
dimgray
seagreen
fuchsia
royalblue
slateblue
olive
orangered
steelblue
olivedrab
dodgerblue
mediumslateblue
slategray
indianred
chocolate
gray
mediumorchid
lightslategray
lightseagreen
mediumpurple
darkgoldenrod
mediumseagreen
cadetblue
limegreen
deepskyblue
tomato
cornflowerblue
darkturquoise
peru
palevioletred
lime
orchid
rosybrown
hotpink
darkorange
coral
lightcoral
salmon
springgreen
mediumspringgreen
goldenrod
mediumturquoise
darkgray
darkseagreen
mediumaquamarine
darksalmon
yellowgreen
orange
turquoise
violet
darkkhaki
aqua
sandybrown
lightsalmon
tan
lawngreen
plum
chartreuse
skyblue
burlywood
lightskyblue
silver
lightsteelblue
lightgreen
thistle
gold
lightblue
lightpink
greenyellow
palegreen
powderblue
lightgrey
aquamarine
pink
paleturquoise
gainsboro
khaki
wheat
peachpuff
yellow
navajowhite
palegoldenrod
moccasin
lavender
bisque
mistyrose
antiquewhite
blanchedalmond
papayawhip
linen
beige
whitesmoke
lavenderblush
lightgoldenrodyellow
oldlace
lightcyan
lemonchiffon
aliceblue
cornsilk
seashell
ghostwhite
honeydew
floralwhite
azure
mintcream
lightyellow
snow
ivory
white

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

反転色

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

function get_inverse_text_color( $colorcode ){
	$colorcode = str_replace( '#', '', $colorcode );
	$inverse = hexdec( $colorcode ) ^ hexdec( 'ffffff' );
	return sprintf( '#%06x', $inverse );
}
black
navy
darkblue
mediumblue
blue
midnightblue
indigo
maroon
darkred
purple
darkmagenta
darkgreen
darkviolet
darkslategray
darkslateblue
green
red
firebrick
brown
saddlebrown
crimson
mediumvioletred
teal
blueviolet
darkolivegreen
forestgreen
darkcyan
darkorchid
sienna
deeppink
dimgray
seagreen
fuchsia
royalblue
slateblue
olive
orangered
steelblue
olivedrab
dodgerblue
mediumslateblue
slategray
indianred
chocolate
gray
mediumorchid
lightslategray
lightseagreen
mediumpurple
darkgoldenrod
mediumseagreen
cadetblue
limegreen
deepskyblue
tomato
cornflowerblue
darkturquoise
peru
palevioletred
lime
orchid
rosybrown
hotpink
darkorange
coral
lightcoral
salmon
springgreen
mediumspringgreen
goldenrod
mediumturquoise
darkgray
darkseagreen
mediumaquamarine
darksalmon
yellowgreen
orange
turquoise
violet
darkkhaki
aqua
sandybrown
lightsalmon
tan
lawngreen
plum
chartreuse
skyblue
burlywood
lightskyblue
silver
lightsteelblue
lightgreen
thistle
gold
lightblue
lightpink
greenyellow
palegreen
powderblue
lightgrey
aquamarine
pink
paleturquoise
gainsboro
khaki
wheat
peachpuff
yellow
navajowhite
palegoldenrod
moccasin
lavender
bisque
mistyrose
antiquewhite
blanchedalmond
papayawhip
linen
beige
whitesmoke
lavenderblush
lightgoldenrodyellow
oldlace
lightcyan
lemonchiffon
aliceblue
cornsilk
seashell
ghostwhite
honeydew
floralwhite
azure
mintcream
lightyellow
snow
ivory
white

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

結論

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

black
navy
darkblue
mediumblue
blue
midnightblue
indigo
maroon
darkred
purple
darkmagenta
darkgreen
darkviolet
darkslategray
darkslateblue
green
red
firebrick
brown
saddlebrown
crimson
mediumvioletred
teal
blueviolet
darkolivegreen
forestgreen
darkcyan
darkorchid
sienna
deeppink
dimgray
seagreen
fuchsia
royalblue
slateblue
olive
orangered
steelblue
olivedrab
dodgerblue
mediumslateblue
slategray
indianred
chocolate
gray
mediumorchid
lightslategray
lightseagreen
mediumpurple
darkgoldenrod
mediumseagreen
cadetblue
limegreen
deepskyblue
tomato
cornflowerblue
darkturquoise
peru
palevioletred
lime
orchid
rosybrown
hotpink
darkorange
coral
lightcoral
salmon
springgreen
mediumspringgreen
goldenrod
mediumturquoise
darkgray
darkseagreen
mediumaquamarine
darksalmon
yellowgreen
orange
turquoise
violet
darkkhaki
aqua
sandybrown
lightsalmon
tan
lawngreen
plum
chartreuse
skyblue
burlywood
lightskyblue
silver
lightsteelblue
lightgreen
thistle
gold
lightblue
lightpink
greenyellow
palegreen
powderblue
lightgrey
aquamarine
pink
paleturquoise
gainsboro
khaki
wheat
peachpuff
yellow
navajowhite
palegoldenrod
moccasin
lavender
bisque
mistyrose
antiquewhite
blanchedalmond
papayawhip
linen
beige
whitesmoke
lavenderblush
lightgoldenrodyellow
oldlace
lightcyan
lemonchiffon
aliceblue
cornsilk
seashell
ghostwhite
honeydew
floralwhite
azure
mintcream
lightyellow
snow
ivory
white

IT・ICT

Posted by るな