フォーラムトピック: 背景色から文字色を算出したい

フォーラムトピック: 背景色から文字色を算出したい http://ja.forums.wordpress.org/ フォーラムトピック: 背景色から文字色を算出したい en Wed, 17 Mar 2010 21:32:38 +0000 shokun0803 : "背景色から文字色を算出したい" http://ja.forums.wordpress.org/topic/2484#post-10129 Fri, 18 Sep 2009 01:35:52 +0000 shokun0803 10129@http://ja.forums.wordpress.org/ jim912さん、身勝手な投稿に返答ありがとうございます。 実は「白黒決め打ち」はどうなの？と思っていたのですが、色々試しているうちに#666以上、#999以下が背景の場合はw3cのいう計算式で満たせる文字色がない、ということになるようで、でもこれは色盲の方などが見る場合などのことなど全ての条件を含めての場合であって、通常の人が見る限り#666なら#fffでも十分見えると感じました。 そこで、jim912さんのおっしゃるとおり（中間色さえ無視で）白黒決め打ちでソースを組んでみたところ、実に十分実用に耐えうる結果がでました。しかもソースはシンプルです;) 参考ソース： <pre><code>/* -------------------------------------------- * 背景色の指定 * -------------------------------------------- */ function bc_background_color() { global $post; $str = get_post_meta($post->ID, '背景色', true); $str = strtoupper($str); if( substr($str, 0, 1) == "#" ) { if( strlen($str) == 7 ) { $r = hexdec(substr($str, 1, 2)); $g = hexdec(substr($str, 3, 2)); $b = hexdec(substr($str, 5, 2)); } elseif( strlen($str) == 4 ) { $r = substr($str, 1, 1); $g = substr($str, 2, 1); $b = substr($str, 3, 1); $r = hexdec($r.$r); $g = hexdec($g.$g); $b = hexdec($b.$b); } } $bright = (($r*299)+($g*587)+($b*114))/1000; if( $bright > 127.5 ) { $t_color = "000000"; } else { $t_color = "FFFFFF"; } if( $str ) { echo " style=\"background-color:{$str};color:#{$t_color}\""; } return; }</code></pre> まだまだ改良の余地がありますが（色名とか入力されるとアウト）、なんとか解決に繋がりました。本当にありがとうございました。 jim912 : "背景色から文字色を算出したい" http://ja.forums.wordpress.org/topic/2484#post-10113 Thu, 17 Sep 2009 16:08:50 +0000 jim912 10113@http://ja.forums.wordpress.org/ shokun0803さん、こんにちは。 あまり工夫がないかもしれませんが、まずは落としどころとして下記のようなロジックではどうでしょう。 背景色の明度が125以下なら文字色は白、130以上なら黒、その間なら白と黒で背景色との色差の大きい方を文字色とする。 これで、まずは明度の差が確保され、見にくいテキストになることはなくなるはずです。 shokun0803 : "背景色から文字色を算出したい" http://ja.forums.wordpress.org/topic/2484#post-10105 Thu, 17 Sep 2009 08:21:28 +0000 shokun0803 10105@http://ja.forums.wordpress.org/ すみません、すみません、wordpress上で実現しようとしていますが、正確にはwordpressの問題ではありません。phpでのロジックの問題なのです・・・ 迷惑になってしまうかもしれないのでその他の話題で投稿させていただきます。お時間のある技術者の方がいらしたらお手数ですがご教授願います。 タイトルどおり、背景色のRGBから見やすいテキストの文字色を計算で算出できないかと試行錯誤しております。 計算式の元になるものはW3CのノートおよびWCAG2.0に示されている基準値とされている計算式で、<a href="http://www.kanzaki.com/docs/html/color-check">こちらの計算式</a>を参考にしています。 カスタムフィールドにRGBで背景色を指定し、<code><div class="post"></code>タグにstyleで書き出しをします。ここまではいいのですが、このとき文字色もstyleで書き出そうと思います。 ※なぜカスタムフィールドで文字色も指定させないかなどのあたりは事情をお察しください。 カスタムフィールドのRGBを取得して色の差500を目指すソースを記述してみましたが、中間色の背景を指定すると文字色も中間色になってしまいあえなく失敗でした。 根本から見直さなくてはならないと思いますが、手詰まりです。お力添えいただけましたら幸いです。 参考ソース：（破綻しているソースです・・・） <pre><code>/* -------------------------------------------- * 背景色の指定 * -------------------------------------------- */ function bc_background_color() { global $post; $str = get_post_meta($post->ID, '背景色', true); if( substr($str, 0, 1) == "#" ) { if( strlen($str) == 7 ) { $r = hexdec(substr($str, 1, 2)); $g = hexdec(substr($str, 3, 2)); $b = hexdec(substr($str, 5, 2)); } elseif( strlen($str) == 4 ) { $r = substr($str, 1, 1); $g = substr($str, 2, 1); $b = substr($str, 3, 1); } else { } } function rgb_chk($str) { if( $str > 128 ) { $num = 0; } else { $num = 255; } $str = abs($str - 128); return array($str,$num); } $bright = (($r*299)+($g*587)+($b*114))/1000; $sr = rgb_chk($r); $sg = rgb_chk($g); $sb = rgb_chk($b); echo "R = {$r} G = {$g} B = {$b} \n"; echo "sR = {$sr[0]} sG = {$sg[0]} sB = {$sb[0]} \n"; $srgb = 500 - ( $sr[0] + $sg[0] + $sb[0] ); echo "srgb = {$srgb} \n"; $rt = $sr[1] + (($srgb / ( $r + $g + $b )) * $r); $gt = $sg[1] + (($srgb / ( $r + $g + $b )) * $g); $bt = $sb[1] + (($srgb / ( $r + $g + $b )) * $b); if( $rt > 255 ) { $num = ceil(($rt - 255) / 2); $rt = "FF"; $gt = dechex($gt + $num); $bt = dechex($bt + $num); } elseif( $gt > 255 ) { $num = ceil(($gt - 255) / 2); $gt = "FF"; $rt = dechex($rt + $num); $bt = dechex($bt + $num); } elseif( $bt > 255 ) { $num = ceil(($bt - 255) / 2); $bt = "FF"; $rt = dechex($rt + $num); $gt = dechex($gt + $num); } else { $rt = dechex($rt + $num); $gt = dechex($gt + $num); $bt = dechex($bt + $num); } echo "Rt = {$rt} Gt = {$gt} Bt = {$bt} \n"; if( $str ) { echo " style=\"background-color:{$str};color:#{$rt}{$gt}{$bt}\""; } return; }</code></pre>