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:
This post is also available in:
English