email/templates/short-transactional

ID:
email/templates/short-transactional
Automated score:
93.8
URL:
https://stackoverflow.design/email/templates/short-transactional
View JSON file

8 violations: Light: 2Dark: 2HC Light: 2HC Dark: 2

Ensures the contrast between foreground and background colors meets APCA custom level conformance minimums thresholds. Elements must meet APCA conformance minimums thresholds. Help URL

HTML

<td style="padding-bottom: 10px; font-size: 12px; line-height: 15px; font-family: arial, sans-serif; color: #9199A1; text-align: left;">
                                    You're receiving this message because $reason$.
                                </td>

Target

iframe,table[width="100%"][align="left"] > tbody > tr:nth-child(1) > td

Summary

Fix all of the following:

  • Element has insufficient APCA custom level contrast of 48.09Lc (foreground color: #9199a1, background color: #f3f3f5, font size: 9.0pt (12px), font weight: 400). Expected minimum APCA lightness contrast of 60Lc

HTML

<a href="https://stackoverflow.email/subscriptions/manage?{{#data}}" style="color: #9199A1; text-decoration: underline;">Edit email settings</a>

Target

iframe,tr:nth-child(2) > td > a:nth-child(1)

Summary

Fix all of the following:

  • Element has insufficient APCA custom level contrast of 48.09Lc (foreground color: #9199a1, background color: #f3f3f5, font size: 9.0pt (12px), font weight: 400). Expected minimum APCA lightness contrast of 60Lc

HTML

<a href="https://stackoverflow.com/company/contact" style="color: #9199A1; text-decoration: underline;">Contact us</a>

Target

iframe,td > a:nth-child(2)

Summary

Fix all of the following:

  • Element has insufficient APCA custom level contrast of 48.09Lc (foreground color: #9199a1, background color: #f3f3f5, font size: 9.0pt (12px), font weight: 400). Expected minimum APCA lightness contrast of 60Lc

HTML

<a href="Urls.Legal.PrivacyPolicy" style="color: #9EA3A9; text-decoration: underline;">Privacy</a>

Target

iframe,a[href$="Urls.Legal.PrivacyPolicy"]

Summary

Fix all of the following:

  • Element has insufficient APCA custom level contrast of 42.74Lc (foreground color: #9ea3a9, background color: #f3f3f5, font size: 9.0pt (12px), font weight: 400). Expected minimum APCA lightness contrast of 60Lc

HTML

<strong>Stack Overflow</strong>

Target

iframe,td > strong

Summary

Fix all of the following:

  • Element has insufficient APCA custom level contrast of 48.09Lc (foreground color: #9199a1, background color: #f3f3f5, font size: 9.0pt (12px), font weight: 700). Expected minimum APCA lightness contrast of 60Lc

HTML

<span class="unstyle-auto-detected-links">110 William Street, 28th Floor, New York, NY 10038</span>

Target

iframe,span

Summary

Fix all of the following:

  • Element has insufficient APCA custom level contrast of 48.09Lc (foreground color: #9199a1, background color: #f3f3f5, font size: 9.0pt (12px), font weight: 400). Expected minimum APCA lightness contrast of 60Lc

HTML

<div style="border-radius: 1px; border: 1px solid #D6D9DC; padding: 4px 6px 3px 6px; font-size: 11px; line-height: 11px; font-family: Consolas, monospace; color: #E06C77;" title="because we care">&lt;3</div>

Target

iframe,div[title="because we care"]

Summary

Fix all of the following:

  • Element has insufficient APCA custom level contrast of 58.59Lc (foreground color: #e06c77, background color: #ffffff, font size: 8.3pt (11px), font weight: 400). Expected minimum APCA lightness contrast of 60Lc

Ensures the contrast between foreground and background colors meets APCA custom level conformance minimums thresholds. Elements must meet APCA conformance minimums thresholds. Help URL

HTML

<td style="padding-bottom: 10px; font-size: 12px; line-height: 15px; font-family: arial, sans-serif; color: #9199A1; text-align: left;">
                                    You're receiving this message because $reason$.
                                </td>

Target

iframe,table[width="100%"][align="left"] > tbody > tr:nth-child(1) > td

Summary

Fix all of the following:

  • Element has insufficient APCA custom level contrast of 48.09Lc (foreground color: #9199a1, background color: #f3f3f5, font size: 9.0pt (12px), font weight: 400). Expected minimum APCA lightness contrast of 60Lc

HTML

<a href="https://stackoverflow.email/subscriptions/manage?{{#data}}" style="color: #9199A1; text-decoration: underline;">Edit email settings</a>

Target

iframe,tr:nth-child(2) > td > a:nth-child(1)

Summary

Fix all of the following:

  • Element has insufficient APCA custom level contrast of 48.09Lc (foreground color: #9199a1, background color: #f3f3f5, font size: 9.0pt (12px), font weight: 400). Expected minimum APCA lightness contrast of 60Lc

HTML

<a href="https://stackoverflow.com/company/contact" style="color: #9199A1; text-decoration: underline;">Contact us</a>

Target

iframe,td > a:nth-child(2)

Summary

Fix all of the following:

  • Element has insufficient APCA custom level contrast of 48.09Lc (foreground color: #9199a1, background color: #f3f3f5, font size: 9.0pt (12px), font weight: 400). Expected minimum APCA lightness contrast of 60Lc

HTML

<a href="Urls.Legal.PrivacyPolicy" style="color: #9EA3A9; text-decoration: underline;">Privacy</a>

Target

iframe,a[href$="Urls.Legal.PrivacyPolicy"]

Summary

Fix all of the following:

  • Element has insufficient APCA custom level contrast of 42.74Lc (foreground color: #9ea3a9, background color: #f3f3f5, font size: 9.0pt (12px), font weight: 400). Expected minimum APCA lightness contrast of 60Lc

HTML

<strong>Stack Overflow</strong>

Target

iframe,td > strong

Summary

Fix all of the following:

  • Element has insufficient APCA custom level contrast of 48.09Lc (foreground color: #9199a1, background color: #f3f3f5, font size: 9.0pt (12px), font weight: 700). Expected minimum APCA lightness contrast of 60Lc

HTML

<span class="unstyle-auto-detected-links">110 William Street, 28th Floor, New York, NY 10038</span>

Target

iframe,span

Summary

Fix all of the following:

  • Element has insufficient APCA custom level contrast of 48.09Lc (foreground color: #9199a1, background color: #f3f3f5, font size: 9.0pt (12px), font weight: 400). Expected minimum APCA lightness contrast of 60Lc

HTML

<div style="border-radius: 1px; border: 1px solid #D6D9DC; padding: 4px 6px 3px 6px; font-size: 11px; line-height: 11px; font-family: Consolas, monospace; color: #E06C77;" title="because we care">&lt;3</div>

Target

iframe,div[title="because we care"]

Summary

Fix all of the following:

  • Element has insufficient APCA custom level contrast of 58.59Lc (foreground color: #e06c77, background color: #ffffff, font size: 8.3pt (11px), font weight: 400). Expected minimum APCA lightness contrast of 60Lc

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="#" style="color: #0077CC; text-decoration: none;">links</a>

Target

iframe,a[href="#"]

Summary

Fix any of the following:

  • Element has insufficient color contrast of 4.65 (foreground color: #0077cc, background color: #ffffff, font size: 11.3pt (15px), font weight: normal). Expected contrast ratio of 7:1

HTML

<a href="https://stackoverflow.design/email/base/typography#links-in-markdown" target="_parent" style="color: #0077CC; text-decoration: none;">Read this</a>

Target

iframe,.has-markdown > a[target="_parent"]

Summary

Fix any of the following:

  • Element has insufficient color contrast of 4.65 (foreground color: #0077cc, background color: #ffffff, font size: 11.3pt (15px), font weight: normal). Expected contrast ratio of 7: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

HTML

<a href="#" style="color: #0077CC; text-decoration: none;">links</a>

Target

iframe,a[href="#"]

Summary

Fix any of the following:

  • Element has insufficient color contrast of 4.65 (foreground color: #0077cc, background color: #ffffff, font size: 11.3pt (15px), font weight: normal). Expected contrast ratio of 7:1

HTML

<a href="https://stackoverflow.design/email/base/typography#links-in-markdown" target="_parent" style="color: #0077CC; text-decoration: none;">Read this</a>

Target

iframe,.has-markdown > a[target="_parent"]

Summary

Fix any of the following:

  • Element has insufficient color contrast of 4.65 (foreground color: #0077cc, background color: #ffffff, font size: 11.3pt (15px), 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="#" style="color: #0077CC; text-decoration: none;">links</a>

Target

iframe,a[href="#"]

Summary

Fix any of the following:

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

HTML

<a href="https://stackoverflow.design/email/base/typography#links-in-markdown" target="_parent" style="color: #0077CC; text-decoration: none;">Read this</a>

Target

iframe,.has-markdown > a[target="_parent"]

Summary

Fix any of the following:

  • The link has insufficient color contrast of 2.27:1 with the surrounding text. (Minimum contrast is 3:1, link text: #0077cc, surrounding text: #3c3f44)
  • 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="#" style="color: #0077CC; text-decoration: none;">links</a>

Target

iframe,a[href="#"]

Summary

Fix any of the following:

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

HTML

<a href="https://stackoverflow.design/email/base/typography#links-in-markdown" target="_parent" style="color: #0077CC; text-decoration: none;">Read this</a>

Target

iframe,.has-markdown > a[target="_parent"]

Summary

Fix any of the following:

  • The link has insufficient color contrast of 2.27:1 with the surrounding text. (Minimum contrast is 3:1, link text: #0077cc, surrounding text: #3c3f44)
  • 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="#" style="color: #0077CC; text-decoration: none;">links</a>

Target

iframe,a[href="#"]

Summary

Fix any of the following:

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

HTML

<a href="https://stackoverflow.design/email/base/typography#links-in-markdown" target="_parent" style="color: #0077CC; text-decoration: none;">Read this</a>

Target

iframe,.has-markdown > a[target="_parent"]

Summary

Fix any of the following:

  • The link has insufficient color contrast of 2.27:1 with the surrounding text. (Minimum contrast is 3:1, link text: #0077cc, surrounding text: #3c3f44)
  • 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="#" style="color: #0077CC; text-decoration: none;">links</a>

Target

iframe,a[href="#"]

Summary

Fix any of the following:

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

HTML

<a href="https://stackoverflow.design/email/base/typography#links-in-markdown" target="_parent" style="color: #0077CC; text-decoration: none;">Read this</a>

Target

iframe,.has-markdown > a[target="_parent"]

Summary

Fix any of the following:

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