カラー ピッカーを使用してテキストと色のコントラストをテストする

視力が低いPeopleは、非常に明るい領域や非常に暗い領域が表示されない場合があります。 すべてが同じレベルの明るさで表示される傾向があるため、アウトラインとエッジを区別するのが難しくなります。

コントラスト比は、テキストの前景と背景の明るさの差を測定します。 テキストのコントラスト比が低い場合、視覚障穏者がサイトを空白の画面として表示する可能性があります。

DevTools では、テキスト要素のコントラスト比を表示する方法の 1 つは、[要素] ツールの [スタイル] タブからカラー ピッカーを使用することです。 カラー ピッカーは、テキストが推奨されるコントラスト比レベルを満たしていることを確認するのに役立ちます。

カラー ピッカーを使用してテキストの色のコントラストをチェックするには:

1. DevTools で、 要素 ツールを開きます。

2. DOM ツリーで、検査するテキスト要素を選択します。

3. [ スタイル ] タブで、要素に適用されている color プロパティを見つけて、 color プロパティの横にある色の四角形をクリックします。

   カラー ピッカーが開きます。

   

4. カラー ピッカーの [コントラスト比 ] セクションを確認します。

   

   [ コントラスト比 ] セクションには、テキストと背景のコントラスト比のスコアと、コントラスト比が推奨事項を満たしているかどうかを示すアイコンが表示されます。

   • 赤いクロスアウトの円は、要素が 最小推奨事項を満たしていないことを意味します。
   • 1 つのチェックマークは、要素が最小推奨事項を満たしていることを意味します。
   • 2 つのチェックマークは、要素が強化された推奨事項を満たしていることを意味します。

5. 詳細については、[ コントラスト比 ] セクションをクリックして展開します。

   

   カラー ピッカーの上部にあるビジュアル ピッカーに、現在の色の円と共に、ビジュアル ピッカー全体で実行されている 2 つの行が表示されます。 現在の色が推奨事項を満たしている場合は、行の同じ側にあるものも推奨事項を満たします。 現在の色が推奨事項を満たしていない場合、同じ側の何も推奨事項を満たしていません。

6. さまざまな色を試すには、ビジュアル ピッカー内をクリックするか、カラー ピッカーの下部にある色見本を選択します。

関連項目

• CSS 機能リファレンスのカラー ピッカーを使用して色を変更する

この作品は 、クリエイティブ・コモンズ属性4.0国際ライセンスに基づきライセンスされています。