How to Audit Visual Hierarchy in an Existing Web Design

New design work usually starts with hierarchy in mind. Inherited or evolved codebases rarely do. Designs that were hierarchically sound when launched often lose their structure over time as new features are added, copy is revised, and components are repurposed for contexts they were not designed for. The result is a page where visual weights no longer reflect functional importance.

An audit identifies where hierarchy has broken down and what to fix. This process requires no special tools - just a structured set of observations and the browser DevTools you already use.

Step 1: The Blur Test

Start before you open DevTools. Take a screenshot of the page and apply a Gaussian blur of 10-15px in any image editing tool or browser extension. Look at the blurred result and ask: what can I still see?

Elements that remain visible through blur have high contrast relative to their backgrounds. Elements that disappear had low contrast. The blur test reveals the raw visual weight hierarchy of the page independent of content.

The expected result for a well-hierarchized page: the primary heading and primary CTA remain clearly visible. Secondary content is softer but present. Decorative elements and body text mostly disappear.

Common failure pattern: a prominent decorative image or bold border remains clearly visible while the primary CTA disappears. This indicates the CTA has lower visual weight than a decorative element, which means users will notice the decoration before they notice the action.

Step 2: Heading Level Audit

In DevTools, run this in the console to list all headings on the page with their computed font sizes:

const headings = document.querySelectorAll('h1, h2, h3, h4, h5, h6');
headings.forEach(h => {
  const styles = getComputedStyle(h);
  console.log(
    h.tagName,
    `${styles.fontSize} / ${styles.fontWeight}`,
    h.textContent.trim().substring(0, 50)
  );
});

Review the output for these problems:

Heading levels with identical computed sizes. If H2 and H3 have the same font-size, the structural relationship they represent is not visually communicated. A user cannot determine from visual appearance alone whether a section is a sub-topic of the previous section or a parallel section.

H1 that is not the largest heading. The H1 represents the primary topic of the page. If another element has a larger font-size, the visual and semantic hierarchies are in conflict. Search engines and screen readers use heading order to understand page structure; visual hierarchy should match.

Font weights that do not distinguish levels. Size alone is not always sufficient for heading distinction at close size ratios. Check that heading levels also differ in font-weight or color for additional visual differentiation.

Step 3: Color and Contrast Audit

The browser accessibility tree in DevTools includes contrast ratio data. In Chrome: select an element, open the Computed tab, click the color swatch next to the color property. The color picker shows the contrast ratio against the current background.

Run this check for each of the following:

• Primary CTA background vs. page background: should be at least 3:1 (for UI components per WCAG 1.4.11), preferably higher
• Primary CTA text vs. CTA background: should be at least 4.5:1 (WCAG AA for normal text)
• H1 text vs. page background: should be at least 4.5:1
• Body text vs. background: at least 4.5:1
• Secondary/subtle text vs. background: typically 3:1 to 4.5:1 (intentionally lower than primary text)
• Disabled state text vs. background: intentionally low, often below 3:1 - this is acceptable for disabled states

The audit goal is not to maximize contrast everywhere. Elements that should be less prominent should have lower contrast than elements that should be more prominent. A body text contrast ratio of 7:1 and a caption contrast ratio of 4.5:1 is a correct hierarchy. A body text ratio of 4.5:1 and a primary heading ratio of 4.5:1 is a hierarchy failure - nothing distinguishes the heading from the body text except size.

Step 4: Spacing Audit

Inconsistent spacing is the most common cause of ambiguous grouping. When the margin between a heading and its related content is the same as the margin between different sections, users cannot visually determine whether items belong together.

Extract spacing values with this console script:

// Get margins for all section-level block elements
const blocks = document.querySelectorAll('section, article, .card, .panel, .module');
blocks.forEach(el => {
  const styles = getComputedStyle(el);
  console.log(
    el.tagName + (el.className ? '.' + el.className.split(' ')[0] : ''),
    'margin-top:', styles.marginTop,
    'margin-bottom:', styles.marginBottom,
    'padding:', styles.padding
  );
});

Look for:

Equal spacing between grouped and ungrouped elements. If a label has 16px below it and the next unrelated section also has 16px above it, there is no visual difference between "this label is related to what follows" and "this section follows the previous section." Grouped items should have less space between them than ungrouped items.

Spacing that does not follow a scale. If spacing values are a mix of 13px, 17px, 24px, 30px, and 40px, no systematic relationship exists. Inconsistent spacing creates visual noise that users cannot decode into grouping information. Replace ad-hoc values with a defined spacing scale.

No whitespace isolation around high-priority elements. If the primary CTA button is flush with surrounding content with only 8px of separation, it does not receive the visual prominence that whitespace isolation provides. Primary CTAs should have noticeably more whitespace around them than secondary elements.

Photo by Jessica Lewis 🦋 thepaintedsquare on Pexels

Step 5: Primary Action Weight Test

For pages where a specific action matters, run a direct comparison of visual weights between the primary action element and other elements on the page.

Using DevTools, select the primary CTA and note:

• Background color and computed contrast ratio
• Font size and weight
• Padding dimensions (determines button size)
• Border treatment

Then select the three most visually prominent non-CTA elements on the page and note the same properties.

The primary CTA should have the highest or near-highest contrast ratio on the page. If a decorative badge, promotional banner, or navigation item has higher contrast, those elements are drawing more visual weight than the primary action. Either the CTA needs more visual weight, or the competing elements need less.

A common finding: the site's brand accent color is used liberally throughout the page on non-interactive elements. The primary CTA uses the same color. The result is that the CTA does not stand out from the decorative uses of the same color. The fix is usually to reserve the highest-contrast version of the brand color for CTAs only, or to introduce a distinct action color that does not appear elsewhere.

Step 6: Document and Prioritize Findings

Hierarchy audits produce many findings. Prioritizing them ensures that the highest-impact fixes are addressed first.

A simple triage framework:

Critical: Visual weight of the primary action is lower than a non-essential element. This directly reduces conversion rates and needs fixing before anything else.

High: Heading levels cannot be distinguished visually. Users cannot determine page structure while scanning.

Medium: Spacing does not communicate grouping clearly. Users must read content rather than scan structure to understand what belongs together.

Low: Decorative elements have higher contrast than intended. Reduces but does not eliminate hierarchy effectiveness.

For each finding, document the specific element, the observed value, the expected value, and the CSS change required.

Common Fixes and Their CSS

Heading visual distinction:

/* Before: H2 and H3 are too similar */
h2 { font-size: 1.4rem; font-weight: 600; }
h3 { font-size: 1.2rem; font-weight: 600; }

/* After: Clear size and weight distinction */
h2 { font-size: 1.75rem; font-weight: 700; color: var(--color-text-strong); }
h3 { font-size: 1.25rem; font-weight: 600; color: var(--color-text-default); }

CTA isolation:

/* Before: CTA embedded in content with minimal spacing */
.cta-section { margin-top: 1rem; }

/* After: CTA isolated with significant whitespace */
.cta-section {
  margin-block: 3rem;
  padding: 2rem;
  display: flex;
  justify-content: center;
}

Spacing scale for grouping:

/* Before: arbitrary spacing */
.section { margin-bottom: 30px; }
.subsection { margin-bottom: 20px; }
.item { margin-bottom: 20px; }

/* After: clear distinction between section and item spacing */
.section { margin-bottom: 4rem; }
.subsection { margin-bottom: 1.5rem; }
.item { margin-bottom: 0.5rem; }

The MDN Web Docs covers all CSS properties referenced in this audit process. The W3C WCAG guidelines define the contrast ratios used as reference points throughout. The Axe DevTools browser extension automates contrast ratio checking across all elements simultaneously, which is useful for large-scale audits.

For the design principles behind what this audit is measuring, this visual hierarchy guide from 137Foundry explains how scale, contrast, whitespace, color, and typography work together to create hierarchy, and what each dimension looks like when it is working correctly versus when it has failed.