DevTools のヒント: 低コントラスト テキストを見つけて修正する

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

ウェブでのアクセシビリティに関する主な問題は、低コントラストのテキストです。2022 年 2 月には、上位 100 万ページのうち 83.9% でこの問題が発生していました。詳しくは、WebAIM Million 2022 レポートをご覧ください。

Chrome DevTools では、コントラストの問題を一目で把握して、ボタンを 1 回クリックするだけで修正できます。

次の方法を動画でご確認ください。

  • コントラスト比はインスペクタ モードのツールチップで、推奨される比率値はカラー選択ツールで確認できます。

    ツールチップでコントラスト比を選択できます。カラー選択ツールを使用して、他の色の比率を測定することもできます。配給の基準は AA と AAA です。

  • カラー選択ツールで色の候補を選択するか、WebAIM のガイドラインに沿ってコントラスト比の線より下の色を選択します。

    推奨されるコントラスト比の線は、カラー選択ツールのシェードのプレビューで確認できます。

  • [CSS Overview]（CSS の概要）パネルと（プレビュー）[Issues]（問題）パネルで、コントラストに関する問題をすべて見つけます。

    [CSS の概要] パネルと [問題] タブに表示されているコントラストの問題。

  • 視覚障害をエミュレートして、ページがすべてのユーザーにどのように表示されるかを理解します。

    [レンダリング] タブで選択し、ビューポートでエミュレートした視覚ぼかし。

実践的な学習体験については、ウェブサイトの読みやすさを改善するのチュートリアルをご覧ください。

詳しくは、次をご覧ください。