Visual Hierarchy That Survives Real Content
A page fails when everything competes for attention. How scale, contrast, and grouping—checked against WCAG contrast minimums—guide the eye without inventing a false sense of clarity.
Open a busy homepage and the problem is often immediate: several headlines, cards, and buttons share nearly the same size, weight, and color. The eye has nowhere to land. Nielsen Norman Group calls this a failure of visual hierarchy—the organization of design elements so the eye consumes them in the order of intended importance.
That definition matters for business websites because hierarchy is not decoration. It is the control system for attention. When the hierarchy matches the content priorities, visitors can find the offer and the next step. When it does not, even strong copy and a thoughtful brand palette underperform.
Why equal emphasis breaks a page
Kelley Gordon’s NN/g overview (January 17, 2021) frames the practical tension clearly: if people struggle to find focus on a screen, the layout is likely missing a clear visual hierarchy. The page’s hierarchy controls how information moves from the system to the reader. It tells them where to look first.
Think of a control panel with every indicator lit at the same brightness. The panel still contains information, but the operator cannot tell which signal matters now. Web pages behave the same way when type sizes flatten, accent colors multiply, and whitespace collapses. Visitors must parse clutter instead of following a path.
NN/g’s guidance starts before Figma: define the hierarchy of the content and the key points you want the user to take away. Only then apply visual variation. Skipping that order produces layouts that look finished while still reading as noise.
How hierarchy is built: three levers
Gordon identifies three primary levers: color and contrast, scale, and grouping. Each does a different job. Used together carefully, they create a readable order. Used everywhere at once, they cancel each other out.
Color and contrast
Color can make some elements advance and others recede, but NN/g emphasizes that it is not the hue alone that creates hierarchy. What matters is contrast in value and saturation between an element and its context—including the background and nearby items. Type weight and style work the same way: bold stands out against regular text; a differently styled word attracts attention.
Their practical limits are useful for studio work:
- Prefer bright, saturated accents for important items; mute secondary material.
- Avoid too many colors of similar value; common uncomplicated designs often stay near two primary and two secondary colors.
- Use no more than about three contrast treatments for complex designs—header, subheader, and body is a typical pattern.
- Do not rely on color alone to communicate importance; people with color vision deficiencies may miss hue-only cues.
Scale
Bigger elements attract attention, so size can mark importance. NN/g recommends roughly three sizes—small, medium, and large—so relationships stay clear. On the web, their illustrative ranges include about 14–16px for body text, 18–22px for subheaders, and up to about 32px for headers. Make the most important element the largest, and limit how many elements share that large size so the hierarchy does not flatten again.
Grouping
Grouping shows the bones of a page: navigation, content, forms, secondary modules. NN/g describes grouping through proximity and white space, or through enclosure (borders and backgrounds). Related items sit closer together; unrelated items get more separation. An element with more space around it reads as its own group and often receives more attention. Containers help when spacing alone is not enough, but they should be used sparingly to avoid new clutter.
Responsive layouts deserve a caution that NN/g also notes in related Gestalt writing: scaling a design down can crush or stretch spacing and destroy groupings that worked on desktop. Hierarchy has to be checked at the widths people actually use.
The measurable floor: WCAG contrast
Visual hierarchy that cannot be read is not hierarchy—it is ornament. The W3C’s Web Content Accessibility Guidelines provide a published floor for text contrast. Under Success Criterion 1.4.3 Contrast (Minimum) in WCAG 2.1 (Level AA), the visual presentation of text and images of text needs a contrast ratio of at least 4.5:1, with a lower threshold of 3:1 for large-scale text (and parallel exceptions for incidental text, inactive UI components, and logotypes).
W3C’s Understanding document explains the intent: enough light–dark contrast for people with moderately low vision or impaired contrast perception, without requiring contrast-enhancing assistive technology. The 4.5:1 ratio is described as accounting for losses that accompany moderately low acuity, certain color deficiencies, and typical aging-related changes in contrast sensitivity. The calculation is designed so hue is not the key factor—light–dark difference is.
That distinction matters for designers who treat “brand color” as a free pass. A soft gray on white may feel refined in a mockup and still fail the minimum. Hierarchy tools such as accent color only work if the text and controls remain distinguishable.
A limitation to keep in view: meeting SC 1.4.3 does not by itself guarantee a clear page hierarchy. Contrast compliance is necessary for legibility; content priority, scale, and grouping still decide whether the right elements win attention.
A check that catches template illusions
NN/g describes a simple diagnostic from design practice: the squint test—or a slight blur—to reveal what the layout emphasizes when text is no longer readable. Groupings and dominant blocks should still make sense. Their Spotify example shows a further complication: content can overturn a template. A strongly colored image or card may dominate even when the layout intended it as secondary. Editors and designers have to evaluate hierarchy with real content, not only empty components.
| Lever | What it changes | Common failure | Studio check |
|---|---|---|---|
| Contrast / color | What advances vs. recedes | Too many similar accents | ≤ ~3 type contrast roles; accents for primary actions |
| Scale | What reads as most important | Everything large | One primary large element; three size tiers |
| Grouping | What belongs together | Flat fields of equal spacing | Related items closer; sections separated |
| WCAG floor | Whether text stays readable | Soft brand grays on light grounds | ≥ 4.5:1 normal text; ≥ 3:1 large text (AA) |
What to do on the next design pass
- Rank the content before styling. Name the one or two takeaways the page must deliver.
- Assign hierarchy with few levers. Prefer three type sizes, limited contrast roles, and deliberate whitespace over more decoration.
- Reserve accent color for the primary action. Treat secondary links and chrome as quieter.
- Verify WCAG AA contrast for body text, headings, and critical controls against their actual backgrounds.
- Squint-test with real content—including photos and long titles—at mobile and desktop widths.
The next step after a clearer hierarchy is validation with the people the site serves. NN/g’s closing point is operational: when visual hierarchy matches importance, users understand the page more easily and can complete tasks with less friction. That is the practical outcome business websites are after—attention that arrives in the right order.
Ready to Discuss Your Website?
If you are planning a new website, a service redesign, or custom development for your business, we’re here to help shape the work.
- Explore Our Services: Web Design · Web Development · Website Redesign
- Start a Conversation: Tell us about your project via our Contact Form or email us directly at
hello@windware.dev.