CSS Overview tool

The CSS Overview tool displays a summary of CSS-related information about the webpage. This tool lists the colors, fonts, and media queries the webpage uses. The tool also lists the elements on your page that have color contrast issues, and the unused CSS declarations. The CSS Overview Accessible Colors Demo page has an example of a color contrast issue.

To view a list of elements that have a color contrast issue, on Contrast issues, click Text.

To open the element in the Elements tool, click an element in the list. To help fix contrast issues, DevTools automatically provides color suggestions.

For updates on this feature in the Chromium open-source project, see Issue #1120316.

Low color contrast issues.

Note

Portions of this page are modifications based on work created and shared by Google and used according to terms described in the Creative Commons Attribution 4.0 International License. The original page is found here and is authored by Jecelyn Yeen (Developer advocate, Chrome DevTools).

Creative Commons License. This work is licensed under a Creative Commons Attribution 4.0 International License.