email/templates/code/promotional.html

ID:
email/templates/code/promotional.html
Automated score:
86.7
URL:
https://stackoverflow.design/email/templates/code/promotional.html
View JSON file

8 violations: Light: 2 Dark: 2 HC Light: 2 HC 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

table[align="left"][width="100%"] > 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="{{hostedUnsubscribeUrl}}" style="color: #9199A1; text-decoration: underline;">Unsubscribe from emails like this</a>

Target

a[href$="{{hostedUnsubscribeUrl}}"]

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

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

Target

a:nth-child(3)

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

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

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

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

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

table[align="left"][width="100%"] > 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="{{hostedUnsubscribeUrl}}" style="color: #9199A1; text-decoration: underline;">Unsubscribe from emails like this</a>

Target

a[href$="{{hostedUnsubscribeUrl}}"]

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

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

Target

a:nth-child(3)

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

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

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

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

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 class="s-btn s-btn__white" href="#" style="background: #ffffff; border: 1px solid #ffffff; font-family: arial, sans-serif; font-size: 17px; line-height: 17px; color: #0077cc; text-align: center; text-decoration: none; padding: 13px 17px; display: block; border-radius: 4px; white-space: nowrap;">

Target

.s-btn.s-btn__white[href="#"]

Summary

Fix any of the following:

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

HTML

<a href="#" style="color: #0077CC; text-decoration: none;">Change your profile »</a>

Target

p:nth-child(3) > 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

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 class="s-btn s-btn__white" href="#" style="background: #ffffff; border: 1px solid #ffffff; font-family: arial, sans-serif; font-size: 17px; line-height: 17px; color: #0077cc; text-align: center; text-decoration: none; padding: 13px 17px; display: block; border-radius: 4px; white-space: nowrap;">

Target

.s-btn.s-btn__white[href="#"]

Summary

Fix any of the following:

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

HTML

<a href="#" style="color: #0077CC; text-decoration: none;">Change your profile »</a>

Target

p:nth-child(3) > 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

Ensure each HTML document contains a non-empty <title> element. Documents must have <title> element to aid in navigation. Help URL

HTML

<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:v="urn:schemas-microsoft-com:vml">

Target

html

Summary

Fix any of the following:

  • Document does not have a non-empty <title> element

Ensure each HTML document contains a non-empty <title> element. Documents must have <title> element to aid in navigation. Help URL

HTML

<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:v="urn:schemas-microsoft-com:vml">

Target

html

Summary

Fix any of the following:

  • Document does not have a non-empty <title> element

Ensure each HTML document contains a non-empty <title> element. Documents must have <title> element to aid in navigation. Help URL

HTML

<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:v="urn:schemas-microsoft-com:vml">

Target

html

Summary

Fix any of the following:

  • Document does not have a non-empty <title> element

Ensure each HTML document contains a non-empty <title> element. Documents must have <title> element to aid in navigation. Help URL

HTML

<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:v="urn:schemas-microsoft-com:vml">

Target

html

Summary

Fix any of the following:

  • Document does not have a non-empty <title> element