背景色と前景色のコントラスト比が不十分である
コントラスト比が低いテキスト、つまり明るさが背景の明るさに近すぎるテキストは、読みにくい場合があります。たとえば、白い背景に薄い灰色のテキストを表示すると、ユーザーが文字の形を区別するのが難しくなるため、文章が理解しにくくなり、読むスピードも遅くなってしまいます。
この問題は視力の弱い人にとっては特に辛いものですが、テキストのコントラストが低いことは、すべてのユーザーの読書体験に悪影響を与えかねません。たとえば、屋外でモバイルデバイスを使って何を読もうとしたことがある方なら、テキストのコントラストが不十分で困ったという経験をしたことがあるのではないでしょうか。
Lighthouse によるカラーコントラスト監査が失敗する原因 #
Lighthouse は、背景色と前景色のコントラスト比の高さが不十分なテキストをフラグします。
Lighthouse は WCAG2.1 の成功基準 1.4.3 を使ってテキストのカラーコントラストを評価します。
- 18 pt、または14 ptで太字のテキストには、3：1のコントラスト比が必要です。
- 他のすべてのテキストには、4.5 : 1 のコントラスト比が必要です。
本監査の性質上、Lighthouse は画像の上に表示されるテキストのカラーコントラストは確認できません。
テキストのカラーコントラストが十分であることを確認する方法 #
ページ上のすべてのテキストが、WCAGで指定されている最小のカラーコントラスト比を満たしていることを確認してください。
- 18 pt または 14pt で太字のテキストの場合は 3 : 1
- 他のすべてのテキストは 4.5 : 1
コントラストの要件を満たす色を見つける方法に、Chrome DevTools のカラーピッカーを使用するという方法があります。
- チェックする要素を右クリック (Mac の場合は
Commandキーを押しながらクリック) して、Inspect (検査) を選択します。 - {Elements (要素) ウィンドウの Styles (スタイル) タブで、対象の要素の
color値を見つけます。 - 値の横にあるカラーサムネイルをクリックします。
カラーピッカーは、フォントのサイズと太さを考慮して、対象の要素がカラーコントラストの要件を満たしているかどうかを示します。
カラーピッカーを使用して、コントラストが十分に高くなるまで色を調整できます。HSLカラー形式で調整するのが最も簡単です。ピッカーの右側にあるトグルボタンをクリックして、その形式に切り替えます。
基準を満たす color 値を見つけたら、プロジェクトのCSSを更新します。
グラデーションのテキストや画像のテキストといった、より複雑なケースは、UI要素や画像と同様に手動でチェックする必要があります。画像上のテキストの場合は、DevTools の背景色ピッカーを使用すれば、テキストが表示される背景を確認できます。
他の例では、Paciello グループの Colour Contrast Analyser といったツールを使用することを検討してください。
リソース #
- Background and foreground colors do not have a sufficient contrast ratio (背景色と前景色のコントラスト比が不十分である) 監査のソースコード
- Text elements must have sufficient color contrast against the background (テキスト要素は、背景に対する十分なカラーコントラストが必要である) (Deque University)
- Colour Contrast Analyser (カラーコントラストアナライザー)