CSS Overview Panel

In Chrome DevTools, open the CSS Overview panel via Cmd+Shift+P → "CSS Overview". Click "Capture overview" to analyze the current page's entire stylesheet. The panel summarizes colors, fonts, media queries, and unused declarations.

The Colors section lists every color value used in the page's CSS — hex, rgb, named, and gradient stops — grouped by type. Clicking a color shows which elements and properties use it, revealing unintentional color variation and palette sprawl.

The Fonts section lists every font-family, font-size, and font-weight combination applied to the page. It reveals font stack fallbacks, highlights inconsistent type scales, and shows which elements use each combination.

The Media Queries section lists every @media rule, its breakpoints, and the number of declarations inside it. This overview reveals breakpoint inconsistency — teams sometimes accumulate 15+ slightly different breakpoint values across a codebase.

CSS Overview flags declarations that are never applied due to specificity conflicts or non-matching selectors. This is distinct from Coverage — it catches always-overridden rules without requiring user interaction to activate.

The panel highlights text colors that fail WCAG AA or AAA contrast ratios against their background. Clicking a contrast failure selects the element in the DOM, making it easy to fix accessibility issues without separate tooling.

Use CSS Overview after major redesigns or when onboarding to an existing codebase. The color summary reveals how far the implementation has drifted from design tokens. The font summary reveals typography inconsistency before users notice it.

Run CSS Overview on multiple pages of the same application. Comparing their color and font summaries reveals per-page drift — components that render with different typography or color than their counterparts on other pages.

Export color data from CSS Overview and compare it to your design token palette. Colors in the overview but not in the token palette are hardcoded values that should be converted to token references and removed as standalone values.

List breakpoints from CSS Overview, identify duplicates and near-duplicates (768px, 769px, 770px from different developers), consolidate them into your design system breakpoint scale, and update all media queries to use CSS custom properties or SCSS variables.

CSS Overview analyzes linked stylesheets — not inline styles or CSS-in-JS runtime styles. Dynamic classes added by JavaScript after initial render may not appear. Supplement with Coverage and manual inspection for complete coverage of dynamic styles.

What type of accessibility issue does CSS Overview detect?

CSS Overview provides a page-level audit of colors, fonts, media query breakpoints, and contrast issues. Use it to detect design drift, palette sprawl, typography inconsistency, and accessibility failures before they accumulate into technical debt that's expensive to untangle.