DevTools Tips: Discover and fix low contrast text

Sofia Emelianova
Sofia Emelianova
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: