SEOに重要なコントラスト比

みなさま、こんにちは。GMOソリューションパートナー株式会社のWEB改善事例集にて今回ご紹介するのはSEOに重要なコントラスト比と、コントラスト比を診断できる無料ツールについてです。

今後のSEO対策のご参考になりましたら幸いです。

目次

コントラスト比とは？

一般的なコントラスト比とは液晶画面の最も明るい部分と最も暗い部分の明るさの比率を指します。

具体的にはテキストや画像化された文字の視覚的な表現で、最低でも「4.5 : 1」のコントラスト比が必要というのがWebアクセシビリティのルールとなっています。

推奨されているWebコンテンツのコントラスト比

WCAGをご存知でしょうか。

WCAGとは、Web Content and Accessibility Guidelineの略でWebコンテンツの使いやすいさを紹介しているガイドラインを指します。コントラスト比は文字の大きさによって、値が変わります。

推奨されているコントラスト比は以下の通りです。

なぜコントラスト比がSEOに重要なのか

Webサイトの目的は、多くのユーザーにサービスや商品の情報を伝えるものです。

その情報を正確にアウトプットするには全てのユーザーに「見やすい」「読みやすい」と感じさせることが大切なので、ホームページ内のテキストや画像化された文字サイズをルールに則って守ることが重要です。

「見やすい」「読みやすい」といった、Webアクセシビリティを高めることでユーザビリティの向上に繋がり、ユーザビリティを高めることで離脱率を下げることができ、結果的にSEOに強いホームページとなります。

WCAG (Web Content and Accessibility Guideline)

先ほど述べたとおり、WCAGはWebコンテンツのアクセシビリティに関するガイドラインのことです。

Webコンテンツで推奨されるコントラスト比の他、Webコンテンツのアクセシビリティに関する情報が多く紹介されているので、ぜひ参考にしてください。

https://waic.jp/docs/UNDERSTANDING-WCAG20/Overview.html

コントラスト比の計算方法

計算式

• L1は色の明るい方の相対輝度です。 (0 ~ 1の値)
• L2は、より暗い色の相対輝度です。 (0 ~ 1の値)

※参照元 : contrast ratio | WCAG 2.1

例

白と黒

白と黒の輝度は、「白 = 1」「黒 = 0」です。

白と黒のコントラスト比は「21 : 1」となります。

白と赤

白と赤の輝度は、「白 = 1」「赤 = 0.5」です。

白と赤のコントラスト比は「1.9 : 1」となります。

黒と赤

黒と赤の輝度は、「黒 = 0」「赤 = 0.5」です。

黒と赤のコントラスト比は「11 : 1」となります。

輝度の調べ方

輝度は「HSL Color Picker」というサービスで確認できます。

例えば、左下にあるフィールドの16進数入力部分に「#fff」と入力すると「hsla (0, 100%, 100%, 1)」と表示されます。

左から順に色相 (Hue)、彩度 (Saturation)、輝度 (Lightness/Luminance)、透明度 (alpha)という意味があり、左から３つ目の値が輝度となります。

コントラスト比を診断できる無料ツールを紹介

Color Contrast Analyzer (カラーコントラストアナライザー)

「Color Contrast Analyzer」は、WCAGのガイドラインに適合する色をお手軽に調査できるツールです。

Lighthouse (ライトハウス)

「Lighthouse」は、Googleが公開しているウェブページ品質向上のために開発されたオープンソースのツールです。

Chrome検証機能 - デベロッパーツール

1. 「Ctrl + Shift + I」または「F12」でデベロッパーツールを開く
2. Inspect icon (インスペクトアイコン)をクリック
3. 調査したいテキストを選択
4. ピッカーを開き、カラーボックスをクリック
5. Contrast ratio (コントラスト比)をクリック

まとめ

いかがでしたか。

今回ご紹介したコントラスト比の調整は専門的な知識は必要なく、SEO初心者の方でもお気軽に挑戦できる対策です。このような対策を地道に続けることが検索エンジンの評価、そしてユーザーにとって魅力的なホームページとなります。

これからホームページ・サイト制作される方やSEO対策でお悩みの方はぜひご参考にしてください。