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

Sofia Emelianova
Sofia Emelianova
GitHub

低コントラストのテキストは、ウェブ上で最も多く報告されるユーザー補助に関する問題です。2022 年 2 月には、上位 100 万件のホームページの 83.9% にこの問題がありました。詳しくは、WebAIM Million 2022 レポートをご覧ください。

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

動画で次の方法を学びます。

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

    コントラスト比はツールチップで確認できます。カラー選択ツールを使用して、代替色のコントラスト比を測定することもできます。給餌の AA と AAA の評価を利用できます。

  • [色選択ツール] で、提案された色を選択するか、WebAIM ガイドラインに準拠するようにコントラスト比の線より下の色を選択します。

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

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

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

  • 色覚異常をエミュレートして、すべてのユーザーにとってページがどのように見えるかを確認します。

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

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

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