Make your website more readable

Sofia Emelianova

Low contrast texts make your website less readable for all users, even more so for users with vision deficiencies. DevTools can automatically find low contrast issues and suggest better colors to help you fix them.

Use DevTools to:

• Discover contrast issues. Use the CSS Overview panel, (preview) Issues tab, or a Lighthouse report to get a list of all issues.
• Fix contrast issues. View the issues with a tooltip in inspector mode and select colors that the Color Picker suggests to fix the contrast ratio.
• Emulate vision deficiencies. Look at your site the way your users see it.

Discover low contrast text

To discover low contrast text:

1. Open DevTools on your page. In this tutorial, you can use this demo page.

2. Get a list of all contrast issues using one of the three panels:

   • CSS Overview
   • (Preview) Issues
   • Lighthouse

Contrast issues in the CSS Overview panel

To get an overview:

1. Open CSS Overview.
2. Capture an overview.
3. Open the Colors section, scroll to Contrast issues, and click an issue, if any.

4. In the Contrast issues table, hover over an element and click the link next to it.