DevTools Tips: Discover and fix low contrast text
Stay organized with collections
Save and categorize content based on your preferences.
Low contrast text is the top accessibility issue on the web. In February 2022, 83.9% of the top million home pages had this issue. Check out the WebAIM Million 2022 report to learn more.
Chrome DevTools lets you discover all contrast issues at a glance and fix them with a click of button.
Watch the video to learn how to:
View contrast ratios in the inspector mode's tooltip and the recommended ratio values in the Color Picker.

In the Color Picker, select suggested colors or pick a color below the contrast ratio lines to comply with the WebAIM guidelines.

Discover all contrast issues in the CSS Overview and (preview) Issues panels.

Emulate vision deficiencies to understand what your page looks like for all your users.

For a more hands-on learning experience, see the Make your website more readable tutorial.
To learn more, see:
Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License, and code samples are licensed under the Apache 2.0 License. For details, see the Google Developers Site Policies. Java is a registered trademark of Oracle and/or its affiliates.
Last updated 2022-10-19 UTC.
[[["Easy to understand","easyToUnderstand","thumb-up"],["Solved my problem","solvedMyProblem","thumb-up"],["Other","otherUp","thumb-up"]],[["Missing the information I need","missingTheInformationINeed","thumb-down"],["Too complicated / too many steps","tooComplicatedTooManySteps","thumb-down"],["Out of date","outOfDate","thumb-down"],["Samples / code issue","samplesCodeIssue","thumb-down"],["Other","otherDown","thumb-down"]],["Last updated 2022-10-19 UTC."],[],[]]