---
title: "Use contrast and more than colour · Agent Wranglers"
url: https://agentwranglers.se/playbook/email/layout-and-accessibility/email-contrast
updated: 2026-10-20
licence: "All rights reserved"
---

# Use contrast and more than colour

By Erik Bergstedt, Agent Wranglers. Updated 2026-10-20.

- Level: Required
- Chapter: [Layout and accessibility](https://agentwranglers.se/playbook/email/layout-and-accessibility)
- Rule: Meet the contrast in [colour contrast](https://agentwranglers.se/playbook/website/accessibility/color-contrast) and never show meaning by colour alone, as [not colour alone](https://agentwranglers.se/playbook/website/accessibility/not-color-alone) says.
- How: Text needs at least 4.5:1. Large text, button borders and meaningful icons need at least 3:1. Check every text and background pair, including text over images and buttons. Mark links with underlines, not colour only. Show errors and status with words or icons as well as colour. These follow WCAG 2.2 criteria 1.4.3 and 1.4.1.
- Check: A contrast checker reports 4.5:1 or more for each text pair, and 3:1 for large text, button borders and icons. A greyscale screenshot still shows every link and status.

**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-contrast`.

- Previous: [Describe every image](https://agentwranglers.se/playbook/email/layout-and-accessibility/image-alt-text)
- Next: [Make email text easy to read](https://agentwranglers.se/playbook/email/layout-and-accessibility/readable-text)
- [Layout and accessibility](https://agentwranglers.se/playbook/email/layout-and-accessibility)