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

Sofia Emelianova
Sofia Emelianova
GitHub

テキストのコントラストが低いと、どのユーザーにとってもウェブサイトが読みにくくなり、視覚障がいのあるユーザーにとってはさらに読みづらくなります。DevTools では、低コントラストの問題が自動的に検出され、修正に役立つ、より適切な色が提案されます。

DevTools を使用して以下のことを行います。

低コントラスト テキストの検出

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

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

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

CSS の概要パネルのコントラストに関する問題

概要を確認するには:

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

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

    「CSS の概要」のコントラストに関する問題のリスト。

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

（プレビュー）[問題] タブのコントラストに関する問題

問題の一覧を取得するには:

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

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

    [問題] タブにある、コントラストに問題がある要素の表。

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

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

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

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

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

低コントラストの問題を解決するには:

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

  2. DevTools の右上隅にある 検査する。 [Inspect] をクリックし、ビューポートの要素にカーソルを合わせます。DevTools に、この要素のツールチップが表示されます。

    ツールチップでは、コントラスト値の横に警告記号が表示されます。

    ツールチップのコントラスト比の値の横に、事前警告です。 という警告が表示されます。コントラスト比は、前景（テキストの色）と背景色の明るさの差を表します。

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

    カラー選択ツールの [コントラスト比] セクション。

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

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

    適用した色がガイドラインに準拠している。

  5. または、シェードのプレビューで円をドラッグして、手動で色を選択することもできます。AA または AAA のレベルに収めるには、それぞれ上端または下端より下の色を選択します。

    AAA レベルを維持するために、ボトムラインより下のカラーシェードを選択します。

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

変更を保存します。

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

次のステップ

詳細: