Accessibility is a design decision, not a checklist

Automated accessibility tools catch about a third of real issues. The rest were decided long before the build — in the moment someone picked a grey that looked elegant, or drew a form with the label inside the field.

The four decisions that cause most of the damage

1. Text contrast

Light grey on white is the most common failure on the web, and it is always a design choice. Body text needs a 4.5:1 ratio against its background. Large headings can go to 3:1. Check it in the design file, not after launch.

2. Placeholder-only labels

A placeholder disappears the moment someone types. If it was the only label, the user has now lost the question. Keep a visible label, or accept that half your form errors will be unexplainable.

3. Focus states

Removing the focus ring because it “looks messy” makes the site unusable by keyboard. If the default ring is ugly, design a better one — a two-pixel outline in your primary colour with a small offset looks intentional and works everywhere.

4. Meaning carried only by colour

Red for error, green for success — fine, as long as there is also an icon or a word. Around one in twelve men cannot reliably tell those two apart.

What this buys you

Better contrast helps everyone reading on a phone in sunlight. Visible focus helps power users. Real labels help anyone filling in a form while distracted, which is everyone.

Accessibility work almost never makes a design worse. It usually reveals that the design was relying on the reader having perfect conditions.

Build the four checks into your review and the audit at the end stops being frightening.

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *

Keep reading

More from the journal

Get started

Ready to build something people remember?

Start from a polished foundation and ship a site your team is proud of — in days, not months.

Client
Client
Client
Client

Joining 120+ teams who launched with Origin