Overview Open Chrome DevTools Simulate mobile devices with Device Mode Performance insights: Get actionable insights on your website's performance Animations: Inspect and modify CSS animation effects Changes: Track your HTML, CSS, and JavaScript changes Coverage: Find unused JavaScript and CSS CSS Overview: Identify potential CSS improvements Issues: Find and fix problems Media: View and debug media players information Memory Inspector: Inspect ArrayBuffer, TypedArray, DataView, and Wasm Memory. Network conditions: Override the user agent string Security: Understand security issues Search: Find text across all loaded resources WebAuthn: Emulate authenticators
Overview Open Chrome DevTools Simulate mobile devices with Device Mode Performance insights: Get actionable insights on your website's performance Animations: Inspect and modify CSS animation effects Changes: Track your HTML, CSS, and JavaScript changes Coverage: Find unused JavaScript and CSS CSS Overview: Identify potential CSS improvements Issues: Find and fix problems Media: View and debug media players information Memory Inspector: Inspect ArrayBuffer, TypedArray, DataView, and Wasm Memory. Network conditions: Override the user agent string Security: Understand security issues Search: Find text across all loaded resources WebAuthn: Emulate authenticators

Make your website more readable

Published on

Gotchas

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.

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

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.

    List of contrast issues in CSS Overview.
  5. Fix the issue as described in the Fix low contrast text section.

(Preview) Contrast issues in the Issues tab

Note: This is a preview feature disabled by default.

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. Enable contrast issue reporting.
    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.

    Table of elements with contrast issues in the Issues tab.
  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. More tabs > Lighthouse.
  2. Generate a Lighthouse report with the following settings:
    • Mode: Navigation (default)
    • Categories: Accessibility
    • Device: Desktop Lighthouse report with Navigation, Accessibility, and Desktop settings.
  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. The Contrast section of the Lighthouse report with a list of elements that have contrast issues.
  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. An element with a contrast issue selected in the Elements panel. For example, on this demo page, the first affected element is h1.line1.

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

    The tooltip shows a warning sign next to the contrast value.

    Notice the Warning. 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 Contrast ratio section of the Color Picker.

    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. Use suggested color button next to the AAA level. The Color Picker applies the text color that complies to the contrast ratio guidelines.

    The applied color complies with the 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.

    Picking a color shade below the bottom line to stay in AAA level.
  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:

What's next?

Learn more:

Updated on Improve article

We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.