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:

• Color and contrast accessibility
• WebAIM guidelines
• Learn Accessibility’s color and contrast module
• Learn Accessibility in general