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

ソフィア・エメリアノバ
Sofia Emelianova
GitHub

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

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

低コントラストのテキストを見つけます

低コントラストのテキストを見つけるには:

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

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

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

概要を確認するには:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    適用した色はガイドラインに準拠しています。

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

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

  6. 同様に、[CSS の概要] パネル、[Issues] タブ、または Lighthouse レポートで見つかったコントラストに関する問題をすべて修正します。

変更を保存します。

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

次のステップ

詳細: