![Sofia Emelianova](https://web.dev/images/authors/sofiayem.jpg) Sofia Emelianova [GitHub](https://github.com/sofiayem)

<br />

The **CSS Overview** panel in DevTools lets you find potential CSS improvements on your page at a glance.

[Video](https://www.youtube.com/watch?v=OAP_Sr0zb5I)

To get a report, open DevTools \> ![More.](https://developer.chrome.com/static/blog/devtools-tips-1/image/more-0f2a10469d404.svg) \> **More tools** \> **CSS Overview** and click **Capture overview**.

The report shows you several sections:

- A summary with statistics on styles, selectors, and media queries.
- A breakdown of used colors including [contrast issues](https://developer.chrome.com/docs/devtools/accessibility/contrast.md.txt)---the most [common issues on the web](https://webaim.org/projects/million/#wcag).
- A breakdown of used fonts with statistics on size, weight, and line height.
- Unused CSS declarations.
- Statistics on media queries sorted by number of occurrences in descending order.

For a more hands-on learning experience, see [CSS Overview: Identify potential CSS improvements](https://developer.chrome.com/docs/devtools/css-overview.md.txt).

To learn more on contrast issues, see [Make your website more readable](https://developer.chrome.com/docs/devtools/accessibility/contrast.md.txt).