Every year, WebAIM reviews the home pages of the top one million websites. And every year, the same accessibility problems keep showing up.

Designers can help stop a lot of them before a single line of code is written.

Introduction

Accessibility shouldn't be an afterthought. It shouldn't be something developers patch on at the end. When we design, we make decisions that directly impact whether someone can use our product — or not.

Designers hold incredible power. The decisions we make in Figma, before any code exists, set the foundation for accessibility — or accessibility debt.

1. Low-contrast text

This is still the most common accessibility issue on the web.

According to WebAIM's reports, low contrast appears on nearly every site they test. It's not a complex issue to fix — it's often just overlooked.

WCAG 2.2 requires 4.5:1 contrast for normal text and 3:1 for large text (18px+ or 14px+ bold).

What designers can do:

  • Check text and icon colors against their backgrounds in your design tool
  • Don't forget small text, placeholders, disabled states, and badges
  • Use approved color tokens in handoff instead of loose color values
  • A quick contrast check in design can prevent a lot of avoidable fixes later

2. Missing alternative text

Developers add alt text, but designers usually know what an image is supposed to communicate.

What designers can do:

  • Mark decorative images clearly (no semantic meaning)
  • Suggest alt text for images that carry meaning
  • Avoid putting important text inside images when you can
  • If an image says something important, that message needs to exist in words too

Icon-only links are a common trap. They may look obvious visually, but to assistive tech they can be meaningless.

What designers can do:

  • Avoid unlabeled icon-only links
  • Add the accessible name in your specs for every icon link
  • Make sure the link's purpose is clear, not just its visual style
  • A screen reader user should know exactly where a link goes before they activate it

4. Empty buttons

Icon-only buttons have the same problem. They may look clear on the screen and still be invisible to a screen reader.

What designers can do:

  • Label every icon button in your design files
  • Include the intended accessible name, like "Search", "Close", or "Download"
  • Don't assume the icon explains the action on its own
  • If a button does something, it needs a real label

5. Missing form labels

Placeholder text is not a label. It disappears, and once it does, users are left guessing.

What designers can do:

  • Give every form field a persistent label
  • Design error messages that tell people how to fix the issue
  • Keep labels visible after typing starts
  • Clear forms are easier for everyone, not just people using assistive technology

Conclusion

WebAIM's Million reports keep showing the same failures because too many of them are baked in early. Developers can fix a lot, but designers can prevent a surprising amount by handing off clear, accessible specs.

Accessibility starts in design. Check contrast. Label icons. Describe images. Design forms that make sense.

That's how accessibility gets built in instead of patched on later.