Lighthouseの『Background and foreground colors do not have a sufficient contrast ratio』の対処法

ChromeのLighthouseによる計測で、『Background and foreground colors do not have a sufficient contrast ratio』という警告が出る場合の対処法について解説します。

『Background and foreground colors do not have a sufficient contrast ratio』はAccessibilityの項目の評価に関するものですが、直訳すると『背景と前面の色が十分なコントラスト比になっていません』という意味になります。

コントラストとは明暗の差を表す言葉で、テキストの色とバックグラウンドの色の明るさの度合いが近い場合には『コントラスト比が低い』と表現され、視認性が悪いと判断されます。たとえば、青色の背景に同系色のテキストを利用すると文字が読みづらいと感じます。

室内のパソコンでは問題なく読むことができるコントラストであっても、野外などの明るい環境でスマートフォンなどを利用する場合には読みづらいといったことも多々あります。また、最近では色覚異常の方に対する理解も深まってきており、アクセシビリティの面で重要視すべき指標の一つと言えます。

『Background and foreground colors do not have a sufficient contrast ratio』の警告はこのような問題に対応しているもので、Webサイトのテキストで十分なコントラストが確保されていないとみなされると、アクセシビリティの観点からサイトの評価が落ちてしまう可能性があります。

Webにおける適切なコントラストの値とは？

Webページにおける文字の適切なコントラストの値は、Web技術の標準化団体であるWorld Wide Web Consortium（W3C、ワールド・ワイド・ウェブ・コンソーシアム）が定義しています。W3Cのアクセシビリティについてのガイドラインで、コントラスト比についての項目が提示されており、以下のような要件を満たす必要があります。

• 大きなテキスト（18pt以上の文字、もしくは、14pt以上かつboldの文字）は3 : 1以上のコントラスト比が必要
• その他のテキストは4.5 : 1以上のコントラスト比が必要
• ロゴやブランド名の一部であるテキストにはコントラスト比の制限はない
• 非アクティブなコンポーネントの装飾に関するテキストなどはコントラスト比の制限はない

これらの要件を満たすことで、アクセシビリティを確保したサイトだとみなされることになります。細かい要件はありますが、基本的にはWebサイト全体で4.5以上のコントラスト比を保つようなデザインにしておくのが良いでしょう。

適切なコントラストを確保する方法

ChromeのLighthouseでコントラストに関する警告が出た場合には、テキストかバックグラウンドの色を変更することを検討しましょう。

適切なコントラスト比を確保するためには、まずChromeの開発者ツールを開いて該当箇所のCSSのcolor要素を確認します。Webサイト上で該当箇所を右クリックして『検証』を選択してください。

『Elements』タブの中の『Styles』タブで、該当箇所のCSSを確認することができます。文字色はcolorというプロパティで設定されており、カラーコードの左側にある四角形をクリックすることで『カラーピッカー』を開くことができます。

カラーピッカーからは、現在のコントラスト比や、適切なコントラスト比を確保した色を確認することができます。

上の画像の例では、①で現在のコントラスト比が3.06であることがわかります。これは通常のテキストの色にあたるので、最低でも4.5のコントラスト比が必要です。

このテキストの色を適切なコントラスト比におさめるために、上のカラー選択ツールを使用しましょう。カラー選択ツールでは彩度と明度を軸に、色を視覚的に分けて選択できるようにしてあります。その中で、背景色との適切なコントラスト比を確保することができる色のエリアを白線で表示してくれます。

上の画像の例では、②のエリアでは十分なコントラスト比が確保できないため、③のエリアの範囲内で色を選択するようにしましょう。もしこの範囲内で選択した色がサイトのデザインとマッチしない場合には、周辺のデザインも含めて調整するのも良いでしょう。

適切なコントラスト比を示す欄の横にある回転している矢印のボタンをクリックすると、同じ色の同じ彩度で適切なコントラスト比の色に直してくれるので便利です。

ちなみに、適切なコントラスト比の最低限の値は4.5と定義されていますが、7.0以上であれば最適な基準であると定義されています。この数値に関してはあくまで好みの問題で、現実的にはサイト上の全てのコントラストを7.0以上にするのは難しいので、4.5以上のコントラスト比を達成することを目標としましょう。

以上が『Background and foreground colors do not have a sufficient contrast ratio』の警告への対処法です。より多くの人にWebサイトのコンテンツを楽しんでもらうためにも、アクセシビリティの観点から改善していくことが重要です。