Or: Text Size, Color, Contrast, and Other Crimes
You sit down at a trendy restaurant.
The menu arrives, printed in delicate serif font – pale grey on cream paper, lit only by candlelight.
You squint. You tilt it toward the flame like a moth. You guess. You end up ordering something you don’t want.
Congratulations: you’ve just experienced inaccessible visual design.
The web does this all the time.
Designers love minimalism. Subtlety. Aesthetic.
But when the visual design prioritizes style over clarity, it becomes a barrier.
And if someone can’t read your content, they can’t use your product. Period.
Color isn’t universal
We love to use color to communicate – green for success, red for errors, grey for disabled. But color alone doesn’t cut it.
Not everyone sees color the same way. Not everyone sees color at all. And even if they do, ambient lighting, grayscale displays, and dark mode can all interfere.
So don’t rely on color alone.
- Pair it with text labels
- Add icons or patterns for reinforcement
- Use consistent shapes for meaning (e.g., checkmarks, warning triangles)
That bright red border around a form field? Great – as long as it’s not the only signal that something went wrong.
The color might be pretty. But is it clear?
Contrast is more than just numbers
Technically, WCAG gives you contrast ratios to follow: 4.5:1 for normal text, 3:1 for large. But contrast isn’t just math. It’s about real-world usability.
Light grey on white? Fail.
White text over a photo background? Risky.
Pastel blue on pastel green? Crimes. Actual crimes.
Even if your contrast passes technically, it still needs to pass the “Can someone actually read this?” test.
And don’t forget dynamic elements:
- Hover states
- Active states
- Disabled buttons
Those need contrast too.
If someone has to highlight the text to read it? That’s not design. That’s camouflage.
Whitespace isn’t wasted space
Designers sometimes treat whitespace like dead air. But to users, it’s breathing room.
Good spacing makes it easier to:
- Read
- Scan
- Focus
- Understand how things are grouped
For people using screen magnifiers or neurodivergent users processing one section at a time, spacing becomes navigation.
- Use line height (at least 1.5 for body text)
- Give input boxes room to breathe
- Group related elements clearly – think of it like visual punctuation
Whitespace plays a role in the design. Use it wisely.
Fonts that don’t fight you
Fonts are personality, sure – but if they get in the way of reading, they’ve failed.
Avoid:
- Ultra-thin text
- Handwritten or script fonts
- All-caps body text
- Overly narrow or wide letter spacing
Don’t use decorative fonts in body text. Don’t use them for instructions. Don’t use them for anything people actually need to read.
This isn’t a branding opportunity – it’s a user experience.
Your font isn’t the main character. Your content is.
On mobile, every pixel counts
Small screens aren’t just smaller – they’re different. And when your layout doesn’t adapt, it stops being usable.
If your mobile design:
- Crams everything into one overcrowded view
- Collapses spacing until it’s unreadable
- Forces users to scroll sideways
- Shrinks buttons to pixel-hunting size
- Makes people pinch and zoom just to function
Then congratulations: you’ve built a frustration generator and sprayed it with customer-repellant.
Don’t just squish your desktop site and call it a day.
Design for small screens on purpose.
Checklist: Can your visuals speak for themselves?
- Is your text large enough to read without zooming?
- Is your contrast strong enough in all lighting?
- Can every important distinction be made without relying on color?
- Is your spacing generous enough for easy scanning?
- Is your font clear, calm, and consistent?
When in doubt, make it readable
Good visual design doesn’t just make things look nice.
It makes things feel safe. Clear. Welcoming.
Don’t whisper when users need clarity.
Don’t make them squint, zoom, or guess.
Let your visuals speak – loudly, confidently, and accessibly.