SEOスパム？守るべき背景色と文字色の明度差

公開日： 2014/11/27 : 最終更新日：2015/06/08 SEO, スパム

背景色と文字色の推奨される明度差は？

先日、googleガイドラインって何？Googleガイドラインを完結にまとめてみたにおいて、隠しテキストや隠しリンクに関し言及しました。

この話、非常に簡単な内容ですが念のため詳しくポイントを整理した記事を書いておこうと思い、今回のポストとなりました。

この記事では次のことをまとめています

隠しテキストとは？と具体的な例
隠しリンクとは？と具体的な例
背景色と文字色の必要な明度差は？

隠しテキストとは？

隠しテキストとは、人間の目には見えないテキストであったり、スタイルシートを悪用することで人間の目には見えないが検索エンジンには読ませる手法の総称です。

隠しテキストの具体的な例

・背景色が白でその上に白の文字や限りなく白に近いグレー文字を配置する行為（白背景に灰色はどの濃さまでがセーフなの？という疑問の答えが明度差です。）
・文字を含むブロックの、下段ブロックをマイナスマージン（ネガティブマージン）等でかぶせる行為
例として、下記へhtmlソースを記載します。

<p>ここの文字が人には見えない</p>

<div style="margin-top:-100px;">
<p><img src="images/sample.jpg" /></p>
</div>

・スタイルシートでtext-indent:-9999px;を使う
・フォントサイズを小さくする。font-size:0;など

隠しリンクとは？

隠しテキストと考え方は同一です。
人の目には見えない、もしくは意図的に見づらくしたリンクを指します。

隠しリンクの具体的な例

こちらも隠しテキストどほぼ同一です。
隠しリンクの場合に利用されることが多い事例として
・リンクカラーやリンク装飾を通常文字と見分けがつかないようにする（背景色と同一色も当然アウトです）
文字色が黒の時に、リンクのカラーを黒にし、アンダーラインやマウスオーバー時の装飾を意図的に消す行為も隠しリンクに含まれる場合があります。ソースの例です。

p {
color: #000000;
}

a {
color: #000000;
text-decoration: none;
}

a:hover {
color: #000000;
text-decoration: none;
}

・noscriptタグ内にリンクを埋め込む
こちらも悪例をひとつ。

<script type="text/javascript">
<!--
document.write("Hello World!!");
// -->
</script>
<noscript>
<p>
<a href="http://example.com">Link</a>
<a href="http://example.com">Link</a>
<a href="http://example.com">Link</a>
<a href="http://example.com">Link</a>
<a href="http://example.com">Link</a>
</p>
</noscript>

・クリックが難しい記号（ – や ’ ）をアンカーテキストにする
・iframeタグを設置し、縦横幅を極小とし、タグ内へリンクを設置する
こちらも典型的なスパム例ソースを下記へ。

<iframe src="sample.html" height=1 width=1>
<a href="http://example.com">Link</a>
<a href="http://example.com">Link</a>
<a href="http://example.com">Link</a>
<a href="http://example.com">Link</a>
<a href="http://example.com">Link</a>
</iframe>

背景色と文字色の必要な明度差は？

W3Cの推奨値である「明度差125以上、色差500以上」が必要な差であると言えます。
一応、W3Cから原文を引用します。

The rage for color brightness difference is 125. The range for color difference is 500.

明度差125ってどのくらい？

背景が白（#ffffff）であれば、文字色（#777777）で明度差136となり、ほぼギリギリです。
下の画像は明度差のセーフとアウトを分かりやすいよう作ってみました。
明度差を表したグラデーションと文字色の例

色差500ってどのくらい？

背景が白（#ffffff）であれば、文字色（#555555）で色差510となり、ほぼギリギリです。
下へ色々なカラーで色差を調べた結果を掲載します。参考にしてみてください。
色差500未満、以上のカラー例

ここまで見てもらって、明度差と色差を推奨値にすることはかなりデザインの幅を制限することにお気づきになるでしょう。
文字と背景は黒と白の組み合わせがSEO上は推奨です。デザイナー泣かせとなるかもしれませんが、より多くのユーザーにデザインを見てもらう上では、色弱の方にも優しいデザインが求められます。
また、紙媒体と異なりWEBデザインはユーザーの環境により見え方が異なる点に注意が必要です。
（これはブラウザやOSに起因するものではなく、モニタ環境や室内外でのサイト閲覧環境を指しています。）

明度差と色差をチェックするツールとしてカラー・コントラスト・アナライザー（クリエイティブ・コモンズライセンスにより配布）等が有名です。上記リンクはGitHubです。
明度差と色差の計算式については利用する機会がないかと思いましたので割愛しました。
明度差などを確認できるwebツールも多数公開されています。簡易なチェック方法として良いでしょう。