Skip to content
Lines&Frames

· 8 min read

Accessibility decisions that improve everything

Contrast, focus, target size and honest labels are accessibility requirements. They are also the fastest usability wins available.

  • Accessibility
  • Craft
  • UX

The short version

  • Contrast ratios exist for low vision and pay off for everyone on bad screens and long days.
  • A focus indicator is keyboard wayfinding, not visual noise — replace it with something better, never remove it.
  • Give targets real size and label inputs visibly; placeholders vanish exactly when needed.
  • Correct semantics (button, anchor) is the least code for the most robustness.

Accessibility work is usually scheduled as remediation: a report arrives, tickets are filed, contrast gets nudged. Handled that way it feels like tax. Handled as a design constraint it is one of the few interventions that reliably improves the experience for everyone, including the people writing the report.

Contrast is a legibility budget

The ratios exist because low-contrast text fails first for people with reduced vision — and second for everyone else, on a laptop outdoors, on a cheap projector, at the end of a long day. Grey-on-grey secondary text is not subtle; it is a decision to make information optional.

The threshold for normal text is 4.5:1, and 3:1 for large text. The number worth internalising is that a muted grey which looks fine in a design tool at full brightness often lands near 3:1 — comfortably failing. Checking at design time costs nothing and settles the argument with evidence rather than taste.

Where it usually fails

  • Secondary and helper text set in a light grey.
  • Placeholder text, which is frequently the lightest thing on the page and often carries the only label.
  • White text on brand colour — mid-tone brand palettes rarely clear 4.5:1 with white.
  • Disabled states, which need to be distinguishable even while looking inactive.

Focus is navigation, not an outline

Removing the focus ring is still common because it is described as visual noise. It is the only wayfinding a keyboard user has. The design problem is not whether to show it but how to show it well: a deliberate ring, on a considered order, with an obvious skip link to the main content.

  • Never remove a focus indicator without replacing it with something clearer.
  • Give interactive targets real size — small hit areas fail for tremor, for touch, and for anyone in a hurry.
  • Label inputs visibly; a placeholder disappears exactly when it is needed most.
  • Make the tab order match the visual order, then tab through the page once before shipping.

Semantics are the cheapest robustness

A div with a click handler works until someone tabs to it, searches within the page, uses a screen reader, or opens it in a new tab. A button and an anchor come with behaviour that took the platform years to get right. Choosing the correct element is not pedantry — it is the least code for the most correctness.

The same logic covers headings, lists and landmarks. Marking a list as a list costs one tag and gives assistive technology a count; faking it with paragraphs and bullets gives nobody anything. And it has a side benefit: correct semantics is also how search engines and answer engines understand the page.

A pass you can run this afternoon

  1. Tab through your most important flow, start to finish, without touching the mouse.
  2. Check every text colour against its background at the size it is used.
  3. Turn on reduced motion and confirm the interface still explains itself.
  4. Zoom to 200% and see what overlaps or gets cut off.
  5. Read the page with images off — the alt text is the content for anyone who cannot see them.
Every accessibility requirement we have shipped for made the product better for people who did not need it.

Questions we get asked

What are the highest-impact accessibility fixes?
Text contrast, a visible focus indicator, target size, visible input labels, and correct semantic elements. Each is required for assistive technology and each independently improves usability for people not using any.
Is it ever acceptable to remove the focus outline?
Only by replacing it with something clearer. The focus indicator is the only wayfinding a keyboard user has, so the design question is how to draw it well, not whether to show it.
What contrast ratio does text need?
4.5:1 for normal text and 3:1 for large text. The trap is that a muted grey which looks fine at full screen brightness in a design tool often lands near 3:1 — which is exactly where secondary and placeholder text usually sits.
How do you test accessibility without specialist tools?
Tab through your main flow without a mouse, check every text colour against its background at the size used, turn on reduced motion, zoom to 200%, and read the page with images off. That afternoon finds most of what a report would.

If this is the decision in front of you, we can help you make it.

Start a conversation

Related reading