Get Inspired
Docs
Blog
Articles
DevTools Tips hero logo

DevTools Tips: Discover and fix low contrast text

Published on

Sofia Emelianova
Sofia Emelianova

Technical Writer, Google Chrome

GitHub

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.

    Contrast ratios are available in a tooltip, with a Color Picker to measure the ratio of alternative colors. AA and AAA grading of the ration is available.

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

    Recommended contrast ratio lines are available in the shades preview of the Color Picker.

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

    Contrast issues listed in the CSS Overview panel and Issues tab.

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

    Blurred vision selected in the Rendering tab and emulated in the viewport.

For a more hands-on learning experience, see the Make your website more readable tutorial.

To learn more, see:

Published on • Improve article

Back

Increasing the Privacy Sandbox Relevance and Measurement origin trial to 5%

Next

Trust Tokens renamed Private State Tokens

This site uses cookies to deliver and enhance the quality of its services and to analyze traffic. If you agree, cookies are also used to serve advertising and to personalize the content and advertisements that you see. Learn more about our use of cookies.