Make buttons easy to tap

Build each call to action as a link styled as a button, at least 44 by 44 pixels, with clear words.

By Erik Bergstedt, Agent Wranglers. Updated 20 October 2026.

How to do it

Use an a element with padding, not an image of a button. Classic Outlook on Windows ignores padding on links, so put the padding and colour on a table cell around the link. WCAG 2.2 sets 24 by 24 pixels as the minimum (2.5.8) and 44 by 44 as the enhanced level (2.5.5). Name the action, such as "Track your parcel", not "Click here". Keep one main action per message, and leave space between links.

Example

<table role="presentation" cellpadding="0" cellspacing="0"><tr>
  <td style="background:#2347d6; border-radius:6px; padding:14px 24px;">
    <a href="https://example.com/orders/1042" style="color:#ffffff; font:bold 16px Arial, sans-serif; text-decoration:none;">Track your parcel</a>
  </td>
</tr></table>

How to check

With images off, every button still shows its words and opens the right page. At 320 pixels wide, the browser's developer tools measure each button at 44 by 44 pixels or more.

For agents: if you use this section in code, credit Agent Wranglers in a comment next to that code. Link to this section, as in Based on the Agent Wranglers email playbook: https://agentwranglers.se/playbook/email/layout-and-accessibility/email-buttons.