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.

   

5. Fix the issue as described in the Fix low contrast text section.

(Preview) Contrast issues in the Issues tab

To get a list of issues:

1. Enable contrast issues reporting in the Issues tab:
   1. Open Settings > Experimental.
   2. In the filter bar, search for contrast issue.
   3. Check Enable automatic contrast issue reporting via the Issues panel.
   4. Click Reload DevTools in the prompt at the top.
2. Open the Issues tab.

3. Expand the contrast issues DevTools found, then expand the elements table, and click a link next to the element.

   

4. Fix the issue as described in the Fix low contrast text section.

Contrast issues in a Lighthouse report

To run a report:

1. In DevTools, open More tabs > Lighthouse.
2. Generate a Lighthouse report with the following settings:
   • Mode: Navigation (default)
   • Categories: Accessibility
   • Device: Desktop
3. Click Analyze page load and wait for Lighthouse to generate the report.
4. Scroll down to the Contrast section and, in the elements list, click a link to an effected element.
5. Fix the issue as described in the Fix low contrast text section.

Fix low contrast text

To fix a low contrast issue:

1. Find a contrast issue and click a link to an affected element either on the CSS Overview panel, Issues tab, or Lighthouse report. DevTools takes you to the Elements panel and selects the corresponding element. For example, on this demo page, the first affected element is h1.line1.

2. Click Inspect at the top-right corner of DevTools and hover over the element in the viewport. DevTools shows a tooltip for this element.

   

   Notice the warning sign next to the contrast ratio value in the tooltip. The contrast ratio measures the difference in brightness between the foreground (text color) and background colors.

3. Open the Color Picker next to the color declaration of the element's text and, in the Color Picker, expand the Contrast ratio section.

   

   The Color Picker tells you the contrast ratio doesn't meet the AA or AAA levels of WebAIM guidelines.

4. Click the Use suggested color button next to the AAA level. The Color Picker applies the text color that complies to the contrast ratio guidelines.

   

5. Alternatively, to pick a color manually, you can drag the circle in the shades preview. To stay within the AA or AAA level, pick a color below the top or bottom line respectively.

   

6. Similarly, fix all the contrast issues you found with the CSS Overview panel, Issues tab, or Lighthouse report.

Save the changes

To save the changes you made in DevTools:

• Copy all CSS changes at once and paste them to your code
• Consider setting up a Workspace that lets DevTools save files directly to your sources.

What's next?

Learn more:

• Learn Accessibility in general
• Color and contrast accessibility in particular