Before anyone reads a word on a screen, they've already scanned it. Size, colour and contrast tell them where to look first. When that hierarchy is clear, an interface feels easy. When it isn't, everything competes for attention and nothing wins.
Decide what matters most
Every screen should have one obvious starting point. Ask yourself: if someone only notices one thing here, what should it be? Make that the most prominent element and let everything else step back.
There are several tools for building hierarchy, and they work best together:
- Size: larger elements get noticed first.
- Weight: bold text stands out from regular text.
- Colour and contrast: high contrast draws the eye, low contrast recedes.
- Space: an element with room around it feels important.
A common mistake is making everything big, bold or bright. If everything is emphasised, nothing is.
Use colour with intent
A restrained palette is easier to use well. Most interfaces need:
- neutral colours for text, backgrounds and borders
- one primary brand colour for key actions and highlights
- a few functional colours for success, warning and error states
Keep colour meanings consistent. If blue means "you can tap this" on one screen, don't use blue as decoration on the next.
How much contrast is enough?
Light grey text on white looks elegant in a mockup and becomes unreadable on a phone in sunlight. The Web Content Accessibility Guidelines (WCAG) set clear minimums at level AA:
| Applies to | Minimum contrast ratio | WCAG criterion |
|---|---|---|
| Normal body text | 4.5:1 | 1.4.3 Contrast (Minimum) |
| Large text | 3:1 | 1.4.3 Contrast (Minimum) |
| Important interface elements, like input borders and icons | 3:1 | 1.4.11 Non-text Contrast |
Contrast checkers are free and quick. Checking every text and background pairing in a design system takes an afternoon, and it prevents problems across the entire product.
Never rely on colour alone
Around one in twelve men has some form of colour vision deficiency. If an error is shown only by turning a border red, some people simply won't see it. Pair colour with something else: an icon, a written message or a change in shape.
Test in the conditions people use
- look at designs on real phones, outdoors if you can
- check them in dark mode, if you support it
- try a greyscale view: if the hierarchy still works without colour, it's solid
Readable, well-ordered interfaces are the foundation of our product design work.
- #Colour
- #Contrast
- #Visual hierarchy
- #Accessibility
- #UI design