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

Sofia Emelianova
Sofia Emelianova
GitHub

ウェブにおけるユーザー補助の主な問題は、低コントラストのテキストです。2022 年 2 月には、上位 100 万件のホームページの 83.9% でこの問題が発生しています。詳しくは、WebAIM Million 2022 レポートをご覧ください。

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

この動画で以下の方法をご確認ください。

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

    コントラスト比はツールチップに表示され、カラー選択ツールで代替色の比率を確認できます。分配には AA または AAA のグレードがあります。

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

    カラー選択ツールのシェード プレビューで、推奨されるコントラスト比のラインを利用できます。

  • コントラストに関する問題はすべて、[CSS の概要] パネルと [問題] パネル（プレビュー）で確認できます。

    [CSS の概要] パネルと [問題] タブに表示される問題を比較する

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

    [レンダリング] タブでぼかしの視界が選択され、ビューポートでエミュレートされている。

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

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