ウェブサイトを読みやすくする

Sofia Emelianova

キーポイント: 低コントラストのテキストは、ウェブ上で最も多く報告されるユーザー補助に関する問題です。2022 年 2 月には、上位 100 万件のホームページの 83.9% にこの問題がありました。詳しくは、WebAIM Million 2022 レポートをご覧ください。

コントラストの低いテキストは、すべてのユーザーにとって読みづらく、視覚障がいのあるユーザーにとってはさらに読みづらくなります。DevTools では、低コントラストの問題を自動的に検出し、問題を修正するための適切な色を提案できます。

DevTools を使用すると、次のことができます。

• コントラストの問題を検出する。[CSS の概要] パネル、[問題]（プレビュー）タブ、または Lighthouse レポートを使用して、すべての問題のリストを取得します。
• コントラストの問題を修正。インスペクタ モードでツールチップを使用して問題を確認し、カラー選択ツールで提案された色を選択してコントラスト比を修正します。
• 色覚異常をエミュレートします。ユーザーがサイトをどのように表示しているかを確認します。

低コントラストのテキストを検出する

低コントラストのテキストを検出するには:

1. ページで DevTools を開きます。このチュートリアルでは、こちらのデモページを使用できます。

2. 次の 3 つのパネルのいずれかを使用して、すべてのコントラストの問題のリストを取得します。

   • CSS の概要
   • （プレビュー版）問題
   • Lighthouse

[CSS の概要] パネルのコントラストの問題

概要を確認するには:

1. [CSS の概要] を開きます。
2. 概要をキャプチャする。
3. [色] セクションを開き、[コントラストの問題] までスクロールして、問題がある場合はクリックします。

4. [コントラストに関する問題] の表で、要素にカーソルを合わせ、その横にあるリンクをクリックします。

   

5. 低コントラストのテキストを修正するセクションの説明に沿って問題を修正します。

（プレビュー版）[問題] タブのコントラストの問題

注: これはプレビュー機能であり、デフォルトでは無効になっています。

問題のリストを取得するには:

1. [問題] タブでコントラストに関する問題のレポートを有効にします。
   1. [設定] > [試験運用版] を開きます。
   2. フィルタバーで「contrast issue」を検索します。
   3. [[問題] パネルでコントラストに関する問題の自動レポートを有効にする] をオンにします。
   4. 上部のプロンプトで [DevTools を再読み込み] をクリックします。
2. [問題] タブを開きます。

3. DevTools で検出されたコントラストの問題を開き、要素の表を開いて、要素の横にあるリンクをクリックします。

   

4. 低コントラストのテキストを修正するセクションの説明に沿って問題を修正します。

Lighthouse レポートのコントラストに関する問題

レポートを実行するには:

1. DevTools で、 [その他のタブ] > [Lighthouse] を開きます。
2. 次の設定で Lighthouse レポートを生成します。
   • モード: ナビゲーション（デフォルト）
   • カテゴリ: ユーザー補助
   • デバイス: パソコン
3. [ページ読み込みを分析] をクリックし、Lighthouse がレポートを生成するのを待ちます。
4. [コントラスト] セクションまで下にスクロールし、要素リストで、影響を受ける要素へのリンクをクリックします。
5. 低コントラストのテキストを修正するセクションの説明に沿って問題を修正します。

低コントラストのテキストを修正する

低コントラストの問題を修正するには:

1. コントラストの問題を見つけ、CSS の概要パネル、[問題] タブ、Lighthouse レポートで、影響を受ける要素へのリンクをクリックします。DevTools の [要素] パネルに移動し、対応する要素を選択します。たとえば、このデモページでは、影響を受ける最初の要素は h1.line1 です。

2. DevTools の右上にある 検証アイコンをクリックし、ビューポート内の要素にカーソルを合わせます。DevTools にこの要素のツールチップが表示されます。

   

   ツールチップのコントラスト比の値の横にある の警告記号に注目してください。コントラスト比は、前景色（テキストの色）と背景色の明るさの差を測定します。

3. 要素のテキストの色宣言の横にあるカラー選択ツールを開き、カラー選択ツールで [コントラスト比] セクションを開きます。

   

   カラー選択ツールは、コントラスト比が WebAIM ガイドラインの AA レベルまたは AAA レベルを満たしていないことを示します。

4. AAA レベルの横にある [色の候補を使用する] ボタンをクリックします。カラー選択ツールでは、コントラスト比のガイドラインに準拠したテキストの色が適用されます。

   

5. 色を手動で選択するには、色合いのプレビューで円をドラッグします。AA または AAA レベルを維持するには、それぞれ上線または下線の下の色を選択します。

   

6. 同様に、[CSS の概要] パネル、[問題] タブ、Lighthouse レポートで検出されたコントラストの問題をすべて修正します。

変更を保存します。

DevTools で行った変更を保存するには:

• CSS の変更をすべてコピーしてコードに貼り付ける
• DevTools でファイルをソースに直接保存できるように、ワークスペースを設定することを検討してください。

次のステップ

詳細:

• ユーザー補助機能の概要
• 特に色とコントラストのユーザー補助