DevTools のヒント: 低コントラスト テキストを見つけて修正する
bookmark_borderbookmark
コレクションでコンテンツを整理
必要に応じて、コンテンツの保存と分類を行います。
低コントラストのテキストは、ウェブ上で最も多く報告されるユーザー補助に関する問題です。2022 年 2 月には、上位 100 万件のホームページの 83.9% にこの問題がありました。詳しくは、WebAIM Million 2022 レポートをご覧ください。
Chrome DevTools を使用すると、すべてのコントラストの問題を一目で検出し、ボタンをクリックするだけで修正できます。
動画で次の方法を学びます。
コントラスト比はインスペクタ モードのツールチップで確認できます。推奨される比率の値はカラー選択ツールで確認できます。

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

[CSS の概要] パネルと(プレビュー版)[問題] パネルで、コントラストに関するすべての問題を確認できます。
![[CSS の概要] パネルと [問題] タブに表示されるコントラストの問題。](https://developer.chrome.com/static/blog/devtools-tips-5/image/contrast-issues-listed-t-051a3ac90b9ad.png?hl=ja)
色覚異常をエミュレートして、すべてのユーザーにとってページがどのように見えるかを確認します。
![[レンダリング] タブで選択し、ビューポートでエミュレートしたぼやけた視界。](https://developer.chrome.com/static/blog/devtools-tips-5/image/blurred-vision-selected-ea48a1087f22b.png?hl=ja)
実践的な学習については、ウェブサイトの読みやすさを高めるチュートリアルをご覧ください。
詳しくは、次をご覧ください。
特に記載のない限り、このページのコンテンツはクリエイティブ・コモンズの表示 4.0 ライセンスにより使用許諾されます。コードサンプルは Apache 2.0 ライセンスにより使用許諾されます。詳しくは、Google Developers サイトのポリシーをご覧ください。Java は Oracle および関連会社の登録商標です。
最終更新日 2022-10-19 UTC。
[[["わかりやすい","easyToUnderstand","thumb-up"],["問題の解決に役立った","solvedMyProblem","thumb-up"],["その他","otherUp","thumb-up"]],[["必要な情報がない","missingTheInformationINeed","thumb-down"],["複雑すぎる / 手順が多すぎる","tooComplicatedTooManySteps","thumb-down"],["最新ではない","outOfDate","thumb-down"],["翻訳に関する問題","translationIssue","thumb-down"],["サンプル / コードに問題がある","samplesCodeIssue","thumb-down"],["その他","otherDown","thumb-down"]],["最終更新日 2022-10-19 UTC。"],[],[]]