Good design is accessible design. It’s not an aesthetic choice. It’s a usability one.
This page covers the core principles behind accessible interfaces – before we even get into specific needs like low vision, cognitive load, or mobile. These are the basics: the foundations that hold everything else up.
Visual hierarchy and structure
Think of your page like a map. People need to know where they are, what’s nearby, and where they’re allowed to go. Layout isn’t just about visual appeal – it’s about helping users make sense of what’s in front of them.
Start with headings. Use them properly and in order. Give each section a short, descriptive heading that tells you what to expect. Use spacing and contrast to make these headings stand out.
Think about layout in layers. What’s the main message? What’s supporting it? What actions are people supposed to take, and what’s optional? Design should guide people through that experience, like a story with a clear beginning, middle, and end.
White space and spacing
White space improves legibility, focus, and ease of use. It’s not wasted space – it’s breathing room.
Whitespace helps group related elements together and separate different blocks of content. Without it, everything runs together into a dense blob. People lose their place. They miss important information. They get overwhelmed.
You’ll see this theme pop up again when we talk about mobile, magnification, and different ways of seeing. For now, the short version is this: if your layout feels cramped, it probably is.
Color and contrast
This one can feel obvious – until you notice how many websites get it wrong.
Text needs to be easy to read against its background. That means enough contrast. Not faint grey on white. Not yellow on cream. And definitely not tiny type on a complex image.
Try this: Squint at the image below. Can you still read it?
This works everywhere. Squint at your own designs. Step back from your screen. If everything mushes together when you squint, your contrast needs work.
Good contrast helps everyone, especially in bright light, low light, or when your eyes are tired. It also helps users with color blindness or low vision – but it’s not just about disability. It’s about clarity.
Use contrast checkers during design. Test your text over backgrounds and images. Make sure buttons and links are still readable when hovered or focused.
And remember: color should never be the only way you convey meaning. Add labels, patterns, or icons to back it up.
We’ll dig into the specific contrast ratios and what they mean in the next section.
Buttons and links
There’s a difference between buttons and links – not just in what they look like, but in what they do. A link moves you somewhere. A button does something.
We’ll get into why this matters (and how misusing them breaks trust) in the section on design patterns. For now, just remember: consistent visual language helps people know what to expect.
Form controls and feedback
If you design forms, there are a few simple things you can do that make a massive difference.
Use visible labels. Don’t rely on placeholders – they disappear as soon as someone starts typing, and that’s no good if the user gets distracted or needs to double-check what the field was.
Give buttons clear names that match what they do. Use predictable positions for key actions like submit, cancel, or save. Don’t put the only submit button in the top-left corner – nobody will find it.
Make sure interactive elements are clearly marked. If someone’s using a keyboard, they need to see where the focus is. If someone’s using a screen reader, they need to know what kind of input is expected and what will happen when they press a button.
Help people fix mistakes. If there’s an error, explain what went wrong and how to fix it – ideally next to the field with the problem. Don’t make people go hunting for a generic message at the top of the form.
Keyboard-friendly layouts
Keyboard users tab through the page in source order, not visual order. That means your layout needs to make sense both visually and structurally.
Group related fields together. Use the correct input types. Don’t hide important actions off-screen or force people through dozens of tabs to get to a button. Let people skip sections that repeat, and make sure they can reach everything they need without using a mouse.
Put it all together, and you’ve got the foundation of an accessible experience. Not just one that looks nice, but one that helps people get where they need to go – clearly, comfortably, and without unnecessary friction.
Design choices either help people get through the door or get in their way. Build layouts that invite people in.