email/base/border-radius

ID:
email/base/border-radius
Automated score:
97.6
URL:
https://stackoverflow.design/email/base/border-radius
View JSON file

3 violations: Light: 1 Dark: 1 HC Dark: 1

Ensure the contrast between foreground and background colors meets WCAG 2 AAA enhanced contrast ratio thresholds. Elements must meet enhanced color contrast ratio thresholds. Help URL

HTML

<a href="#" class="s-link s-link__muted py8 px12 bar-pill bg-black-225 fc-black-500" data-action="click->

Target

.bg-black-225

Summary

Fix any of the following:

  • Element has insufficient color contrast of 6.8 (foreground color: #e3e6e8, background color: #494d50, font size: 9.8pt (13px), font weight: normal). Expected contrast ratio of 7:1

link-in-text-block

Ensure links are distinguished from surrounding text in a way that does not rely on color. Links must be distinguishable without relying on color. Help URL

HTML

<a href="/email/templates/short-transactional">a simple email</a>

Target

.ff-mono:nth-child(1) > .ff-sans > a

Summary

Fix any of the following:

  • The link has insufficient color contrast of 2.24:1 with the surrounding text. (Minimum contrast is 3:1, link text: #1b75d0, surrounding text: #3b4045)
  • The link has no styling (such as underline) to distinguish it from the surrounding text

HTML

<a href="/email/templates/promotional">a complex promotional email</a>

Target

a[href$="promotional"]

Summary

Fix any of the following:

  • The link has insufficient color contrast of 2.24:1 with the surrounding text. (Minimum contrast is 3:1, link text: #1b75d0, surrounding text: #3b4045)
  • The link has no styling (such as underline) to distinguish it from the surrounding text

link-in-text-block

Ensure links are distinguished from surrounding text in a way that does not rely on color. Links must be distinguishable without relying on color. Help URL

HTML

<a href="/email/templates/short-transactional">a simple email</a>

Target

.ff-mono:nth-child(1) > .ff-sans > a

Summary

Fix any of the following:

  • The link has insufficient color contrast of 1.46:1 with the surrounding text. (Minimum contrast is 3:1, link text: #90c4f9, surrounding text: #e3e6e8)
  • The link has no styling (such as underline) to distinguish it from the surrounding text

HTML

<a href="/email/templates/promotional">a complex promotional email</a>

Target

a[href$="promotional"]

Summary

Fix any of the following:

  • The link has insufficient color contrast of 1.46:1 with the surrounding text. (Minimum contrast is 3:1, link text: #90c4f9, surrounding text: #e3e6e8)
  • The link has no styling (such as underline) to distinguish it from the surrounding text