もくじ

Lighthouseでコントラストが低いと怒られた時の対処法

ハウツー
蛙のicon

Lighthouseのレポートで、下記のような警告が表示されることがあります。
背景色と前景色に十分なコントラスト比がありません
Wordpressサイトの場合、SANGOやJINなどの淡い色調のテーマを使用しているとこの警告が出ることが多いですね。
今回はこちらの警告の危険性と、具体的な対処方法についてご説明いたします。

コントラストが低いとどんな悪影響があるのか

コントラストが低いサイトって、パっと見はとても綺麗でおしゃれに見えるんです。 そのため、警告が出ているとわかっていても放置している人も多いのではないでしょうか。
しかし、サイトの質を高めたい!より多くの人にサイトを見てほしい!と思っているのであれば、必ず対処しておくべきです。

文字が読み辛く、サイト訪問者に優しくない

Lighthouseの警告文にも書いてある通りですが、コントラストが低いと文字が読み辛くなります。
コントラストの比較
ここで1つ画像を用意してみました。
①のブロックはLighthouseのコントラストの基準を満たしていますが、②はコントラストが基準値以下となっています。 ①は1番小さな文字でもきちんと読み取ることができますが、②は文字サイズが小さくなるほど文字が背景と同化して読みにくいですよね。
特にブログなどの文字ベースのサイトは読んでもらうことに価値があるので、読み辛いのは致命的な欠点と言えます。

検索順位がどんどん下がっていく

LighthouseはGoogleの公式SEOチェックツールです。 そのため、Lighthouseでこのような警告が出るということは、Googleに最適化されていないということなので、当然ながら検索順位が下がりやすくなります。
検索順位が下がると、そもそもサイトにたどり着くことさえできなくなります。 また、せっかくユーザーがサイトまでたどり着けたとしても、コントラストが低いと読み辛いので、記事をろくに読まずに離脱してしまう可能性も高いです。 そうなるとサイトの直帰率も高くなり、さらにGoogleからの評価の下がる負のスパイラルに陥ってしまいます…。

警告の出ている箇所の確認と改善までの手順

今回はサイトサンプルとして、みなさんご存じのYahoo! JAPANを使いながら説明していきます。 みなさんは自分のサイトでやってくださいね!

1. 警告の出ている箇所を確認

まずはサイト内のどのパーツが警告対象になっているのか確認しましょう。 これはLighthouseレポートに「問題のある要素」としてピックアップされているので簡単に見つけられます。 ただ、画像で表示されている箇所は実際の位置とズレていることも多いので、テキストの文言やタグ・クラス名をよく見て判断してくださいね。
Yahoo!JAPAN Lighthouse
Yahoo!JAPANの場合、ニュースのコメント数や投稿日などの表示部分がひっかかっているようですね。

2. デベロッパーツールでスタイル調整

1.
デベロッパーツール左上の、四角に矢印がついたマークをクリック
2.
サイトの修正したい要素をクリック
3.
デベロッパーツールに現在適用されているスタイルが表示されるので、それを確認
4.
色の部分をクリックしてカラーピッカーを開く
5.
丸に斜線の入った、赤い禁止マークのような部分をクリックして開く
6.
AAもしくはAAAをクリックすると、自動的に適切なコントラストに調整してくれる!
次々といろんな部分をクリックしなければいけないので、動画で流れを確認しもらった方がわかりやすいと思います。
ちなみに、Lighthouseの警告を消すだけなら、AAの基準を満たしていればOKです。 AAAはさらにコントラストが高くなるので、色覚異常のある方や老人などもターゲットにするのであればこちらの採用をおすすめします。

3. 変更をサイトに反映させる

デベロッパーツールでの変更はそのウィンドウだけで確認できる一時的なテストのようなものです。 そのため、サイトに反映させるためにはスタイルシートに変更内容を記述する必要があります。

自作サイトの場合

サイト公開時に自分で作ったスタイルシートがあるはずなので、そのファイルの色指定している箇所の記述を書き換えて、サーバーにアップすれば作業終了です。

Wordpressの場合

Wordpressの場合には、まず管理画面に入り、外観→テーマエディター→スタイルシートと進みます。 すると、何かコードのようなものがつらつら書かれていると思いますので、この一番下に変更箇所の記述を追加し保存すればサイトに適応されるはずです。
💡
Wordpressテーマの仕様によっては、上書き不可の場合もあります。
書き方は、デベロッパーツールに表示されているそのままをコピペすればOK。 今回のYahoo!JAPANの場合はこのような感じですね。
/* ニュース日付の色変更*/
.ArticleSubText__text, a:visited .ArticleSubText__text {
	color: #595959;
}

ブログサービスを使っている場合

FC2やはてなブログなどのブログサービスの場合にも、管理画面からスタイルのカスタマイズができるようになっていることが多いです。 「デザイン編集」「スタイルシート」「CSS」など、ブログサービスによって表現はまちまちなので、なんとか探しあててスタイルの変更を行いましょう。

どうしてもサイトの見た目を変えたくない場合の最終手段

見た目を変えたくないから警告を無視してるんだ!という方に朗報です。 実は、サイトの見た目を全く変えることなくコントラストの警告を消すこともできるんですよ。

1. 警告箇所の背景と同じ色の画像を用意する

まず、警告の出ている箇所の背景(background-color)と同じ色の画像を用意します。 画像はなるべく容量を抑えたいので1×1pxで、データ形式はGIFが望ましいです。
Yahoo!JAPANのニュースの日付はbackground-colorの指定がなかったので、このような場合は白い画像を用意します。

2. 用意した画像をアップロード

用意した画像をサイトで使えるように、サーバーにアップロードしてください。

3. 背景画像を適用する

画像を背景に設定します。
先ほどのYahoo!JAPANの例だと、こんな感じです。
/* ニュース日付の色変更*/
.ArticleSubText__text, a:visited .ArticleSubText__text {
	/* 文字色は変更前のまま */
	color: #999;
	background-image: url("画像のパス");
	background-repeat: repeat;
}

なぜこれで警告が解除されるのか?

背景に色ではなく画像を使っているわけですが、Google側はこの画像がどんな画像なのかということまでは確認していません。 なので、Google的には「このサイトのコントラストはばっちり!」という意味ではなく、「良いか悪いか判断できない部分は迂闊に注意できない…」という感じなのだと思います。
今後Googleが画像に使われている色彩までチェックするようになれば、この方法は使えなくなるかもしれません。

問題の根本解決にはなっていない

背景を画像指定する方法では、サイトの見た目自体は何一つ変わっていません。 GoogleやLighthouseは騙せても、人間であるユーザーからの評価を変えることはできていないという点に注意しましょう。
サイトの主要コンテンツにはあまり影響しないごく一部分の修正であれば良いですが、pタグなどがっつり文章になっている部分までこの方法で凌ぐのはあまりおすすめしないです。

まとめ

個人的はLighthouseのコントラスト警告って、特に何も気にせずにデザインしちゃうと必ず出るくらいにエンカウント率の高い警告の1つなんですよね…。 思った以上にシビアなので、みんな苦労してるんじゃないかなと思い記事にしてみました。
せっかく良い記事を書いたのに誰にも見てもらえないのは悲しいので、今までやり方がわからずに放置していたという人はぜひ試してみてください。 修正すればきちんとレポートの点数が上がるので、修正作業自体は達成感があってちょっと楽しいですよ!
蛙のicon
ひょんなことからIT業界に迷い込んだ1匹のカエル。知識ゼロからのスタートで四苦八苦。特にJavaScriptが怖い…。