Accessible Hierarchy: Why Two Visual Differences Are Better Than One

In the world of digital design, we talk a lot about accessibility,  but often the conversation focuses on things like contrast ratios alt text, or screen reader support. Those are all essential. But there’s another layer that’s just as important and often overlooked: visual hierarchy.

The hierarchy problem

When usersland on a page or interface, they instantly start scanning. They look for cues:

• What’s important?
• Where should I click?
• What goes together? (and what doesn’t?)

Ifeverything looks the same, nothing stands out. And if things look kind of different but not clearly so, users must work harder to process what they’re seeing. Especially users with visual impairments, cognitive challenges, or just… a short attention span (so, all of us).

This is where a simple design rule comes in, one I heard a few years back that really stuck with me: “When you want to differentiate two related elements, use AT LEAST two visual differences.”

What do I mean by “two visual differences”?

Let’s say you’re designing a headline and a subline. You might change:

• Font size
• Font weight
• Colour
• Letter spacing
• Case (e.g. uppercase vs sentence case)
• Position or spacing

The key is to layer at least two of these properties. If your headline is large and bold, the subline could be smaller and lighter. Or same size, but grey and regularweight. Two (or more) differences = more clarity.

Real-world examples

1. Headline & Subline

• Headline: 32px, heavy weight, white
• Subline: 18px, medium weight, grey

This combo makes it obvious which is which,  even for users with low contrast perception.

2. Primary vs. Secondary Buttons

• Primary button: Filled lime green (#CCF856), black text, high contrast
• Secondary button: Outlined with lime green, no fill, dark grey text

Here, the shape, fill, and text colour are all working together to make the hierarchy clear.

3. Images or Cards of Importance

• You might highlight key cards with a shadow and a thicker border or pull them forward with both size and position.

Why this matters for accessibility

The Web Content Accessibility Guidelines (WCAG) are clear: colour alonemust not be the only method of conveying information. That’s because not everyone perceives colour the same way, and even users with perfect vision benefit from multiple visual cues.

Similarly, Google’s Material Design system talks about hierarchy using size, weight,and colour as the foundational tools to guide users through content.

And if you look at inclusive design principles, you’ll see a common theme: reduce cognitiveload, don’t make people guess, and offer redundancy. That’s exactly what thisapproach supports.

TL;DR

• When elements are meant to feel different,  like headlines vs sublines or primary vs secondary buttons, make them clearly different
• Use at least two visual differences (e.g. size + colour, weight + fill)
• This isn’t just a design preference, it improves accessibility, clarity and usability for everyone
• Reference: WCAG 2.1, Material Design hierarchy, Microsoft Inclusive Design

Bonus: Want to make your own checklist?

Try asking:

• Can I tell the difference between these two elements without relying on colour?
• Have I used at least two properties to show that difference?
• Would someone quickly scanning this page understand the hierarchy?

At LOOP Agencies we believe Good design is readable. Great design is accessible.

‍