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

Sofia Emelianova

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

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

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

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

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

1. ページで DevTools を開きます。

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

   • CSS の概要
   • [(プレビュー) **問題**]
   • Lighthouse

CodePen を開いて試すことができます。

[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 が [要素] パネルに移動し、対応する要素を選択します。

   

   たとえば、アクセスできないデモ CodePen では、最初の影響を受ける 要素は h1.line1 です。

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

   

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

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

   

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

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

   

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

   

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

変更を保存する

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

• CSS の変更をすべて一度にコピーして、 コードに貼り付けます。
• ワークスペースを設定して、DevTools が ファイルをソースに直接保存できるようにします。

次のステップ

詳細:

• ユーザー補助全般について学ぶ
• 色とコントラスト のユーザー補助について学ぶ