DevTools Tips: Discover and fix low contrast text
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: