email/base/typography

ID:
email/base/typography
Automated score:
90.8
URL:
https://stackoverflow.design/email/base/typography
View JSON file

11 violations: Light: 2Dark: 3HC Light: 3HC Dark: 3

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

<p style="margin: 0 0 15px 0; font-size: 17px; line-height: 23px;">A lead paragraph with slightly larger text lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras nisi magna, mollis luctus sapien varius, mattis ornare est.</p>

Target

section:nth-child(4) > .stacks-preview > .stacks-preview--example > p:nth-child(1)

Summary

Fix all of the following:

  • Element has insufficient APCA custom level contrast of 0Lc (foreground color: #3c3f44, background color: #252627, font size: 12.8pt (17px), font weight: 400). Expected minimum APCA lightness contrast of 60Lc

HTML

<p style="margin: 0 0 15px 0;">A regular paragraph with <strong>strong</strong> and <em>italic</em> text, consectetur adipiscing elit. Cras nisi magna, mollis luctus sapien varius, mattis ornare est. Sed non tincidunt erat, ut commodo augue.</p>

Target

section:nth-child(4) > .stacks-preview > .stacks-preview--example > p:nth-child(2)

Summary

Fix all of the following:

  • Element has insufficient APCA custom level contrast of 0Lc (foreground color: #3c3f44, background color: #252627, font size: 11.3pt (15px), font weight: 400). Expected minimum APCA lightness contrast of 60Lc

HTML

<strong>strong</strong>

Target

section:nth-child(4) > .stacks-preview > .stacks-preview--example > p:nth-child(2) > strong

Summary

Fix all of the following:

  • Element has insufficient APCA custom level contrast of 0Lc (foreground color: #3c3f44, background color: #252627, font size: 11.3pt (15px), font weight: 700). Expected minimum APCA lightness contrast of 60Lc

HTML

<em>italic</em>

Target

p:nth-child(2) > em

Summary

Fix all of the following:

  • Element has insufficient APCA custom level contrast of 0Lc (foreground color: #3c3f44, background color: #252627, font size: 11.3pt (15px), font weight: 400). Expected minimum APCA lightness contrast of 60Lc

HTML

<h1 style="font-weight: bold; font-size: 27px; line-height: 27px; color: #242629; margin: 0 0 15px 0;">I’m a headline</h1>

Target

section:nth-child(5) > .stacks-preview > .stacks-preview--example > h1

Summary

Fix all of the following:

  • Element has insufficient APCA custom level contrast of 0Lc (foreground color: #242629, background color: #252627, font size: 20.3pt (27px), font weight: 700). Expected minimum APCA lightness contrast of 60Lc

HTML

<h2 style="font-weight: bold; font-size: 21px; line-height: 24px; color: #242629; margin: 0 0 15px 0;">I’m a subheadline</h2>

Target

.stacks-preview--example > h2

Summary

Fix all of the following:

  • Element has insufficient APCA custom level contrast of 0Lc (foreground color: #242629, background color: #252627, font size: 15.8pt (21px), font weight: 700). Expected minimum APCA lightness contrast of 60Lc

HTML

<li style="margin: 0 0 10px 30px;">You get a list item.</li>

Target

.stacks-preview--example > ul > li:nth-child(1)

Summary

Fix all of the following:

  • Element has insufficient APCA custom level contrast of 14.4Lc (foreground color: #54595f, background color: #252627, font size: 11.3pt (15px), font weight: 400). Expected minimum APCA lightness contrast of 60Lc

HTML

<li style="margin: 0 0 10px 30px;">And you get a list item!</li>

Target

.stacks-preview--example > ul > li:nth-child(2)

Summary

Fix all of the following:

  • Element has insufficient APCA custom level contrast of 14.4Lc (foreground color: #54595f, background color: #252627, font size: 11.3pt (15px), font weight: 400). Expected minimum APCA lightness contrast of 60Lc

HTML

<li style="margin: 0 0 0 30px;">Everyone gets a list item!</li>

Target

.stacks-preview--example > ul > li:nth-child(3)

Summary

Fix all of the following:

  • Element has insufficient APCA custom level contrast of 14.4Lc (foreground color: #54595f, background color: #252627, font size: 11.3pt (15px), font weight: 400). Expected minimum APCA lightness contrast of 60Lc

HTML

<li style="margin: 0 0 10px 30px;">You get a list item.</li>

Target

.stacks-preview--example > ol > li:nth-child(1)

Summary

Fix all of the following:

  • Element has insufficient APCA custom level contrast of 14.4Lc (foreground color: #54595f, background color: #252627, font size: 11.3pt (15px), font weight: 400). Expected minimum APCA lightness contrast of 60Lc

HTML

<li style="margin: 0 0 10px 30px;">And you get a list item!</li>

Target

.stacks-preview--example > ol > li:nth-child(2)

Summary

Fix all of the following:

  • Element has insufficient APCA custom level contrast of 14.4Lc (foreground color: #54595f, background color: #252627, font size: 11.3pt (15px), font weight: 400). Expected minimum APCA lightness contrast of 60Lc

HTML

<li style="margin: 0 0 0 30px;">Everyone gets a list item!</li>

Target

.stacks-preview--example > ol > li:nth-child(3)

Summary

Fix all of the following:

  • Element has insufficient APCA custom level contrast of 14.4Lc (foreground color: #54595f, background color: #252627, font size: 11.3pt (15px), font weight: 400). Expected minimum APCA lightness contrast of 60Lc

HTML

<a href="https://stackoverflow.com/" style="color: #0077CC; text-decoration: none;">Go to the homepage</a>

Target

.stacks-preview--example > a[href$="stackoverflow.com/"]

Summary

Fix all of the following:

  • Element has insufficient APCA custom level contrast of 27Lc (foreground color: #0077cc, background color: #252627, font size: 11.3pt (15px), font weight: 400). Expected minimum APCA lightness contrast of 60Lc

HTML

<a href="#" style="color: blue; text-decoration: underline;">links will appear like this</a>

Target

.stacks-copy:nth-child(4) > a[href="#"]

Summary

Fix all of the following:

  • Element has insufficient APCA custom level contrast of 13.16Lc (foreground color: #0000ff, background color: #252627, font size: 12.8pt (17px), font weight: 400). Expected minimum APCA lightness contrast of 60Lc

HTML

<p style="margin: 0 0 15px 0;">I’m a text string in markdown.</p>

Target

.mb24.stacks-preview:nth-child(5) > .stacks-preview--example > p:nth-child(1)

Summary

Fix all of the following:

  • Element has insufficient APCA custom level contrast of 14.4Lc (foreground color: #54595f, background color: #252627, font size: 11.3pt (15px), font weight: 400). Expected minimum APCA lightness contrast of 60Lc

HTML

<p style="margin: 0;">I’m a <strong>bold</strong> <a href="https://www.stackoverflow.com" style="color: #0077CC; text-decoration: none;">text link</a> in markdown.</p>

Target

.mb24.stacks-preview:nth-child(5) > .stacks-preview--example > p:nth-child(2)

Summary

Fix all of the following:

  • Element has insufficient APCA custom level contrast of 14.4Lc (foreground color: #54595f, background color: #252627, font size: 11.3pt (15px), font weight: 400). Expected minimum APCA lightness contrast of 60Lc

HTML

<strong>bold</strong>

Target

.mb24.stacks-preview:nth-child(5) > .stacks-preview--example > p:nth-child(2) > strong

Summary

Fix all of the following:

  • Element has insufficient APCA custom level contrast of 14.4Lc (foreground color: #54595f, background color: #252627, font size: 11.3pt (15px), font weight: 700). Expected minimum APCA lightness contrast of 60Lc

HTML

<a href="https://www.stackoverflow.com" style="color: #0077CC; text-decoration: none;">text link</a>

Target

a[href$="www.stackoverflow.com"]

Summary

Fix all of the following:

  • Element has insufficient APCA custom level contrast of 27Lc (foreground color: #0077cc, background color: #252627, font size: 11.3pt (15px), font weight: 400). Expected minimum APCA lightness contrast of 60Lc

HTML

<p style="margin: 0 0 15px 0;">

Target

.mb24.stacks-preview:nth-child(9) > .stacks-preview--example > p:nth-child(1)

Summary

Fix all of the following:

  • Element has insufficient APCA custom level contrast of 14.4Lc (foreground color: #54595f, background color: #252627, font size: 11.3pt (15px), font weight: 400). Expected minimum APCA lightness contrast of 60Lc

HTML

<a href="https://stackoverflow.com/" style="color: blue; text-decoration: none; border-bottom: 1px dashed;">Thursday</a>

Target

p:nth-child(1) > a[href$="stackoverflow.com/"]:nth-child(1)

Summary

Fix all of the following:

  • Element has insufficient APCA custom level contrast of 13.16Lc (foreground color: #0000ff, background color: #252627, font size: 11.3pt (15px), font weight: 400). Expected minimum APCA lightness contrast of 60Lc

HTML

<a href="https://stackoverflow.com/" style="color: blue; text-decoration: none; border-bottom: 1px dashed;">New York</a>

Target

p:nth-child(1) > a[href$="stackoverflow.com/"]:nth-child(2)

Summary

Fix all of the following:

  • Element has insufficient APCA custom level contrast of 13.16Lc (foreground color: #0000ff, background color: #252627, font size: 11.3pt (15px), font weight: 400). Expected minimum APCA lightness contrast of 60Lc

HTML

<p style="margin: 0 0 15px 0;">

Target

.mb24.stacks-preview:nth-child(9) > .stacks-preview--example > p:nth-child(2)

Summary

Fix all of the following:

  • Element has insufficient APCA custom level contrast of 14.4Lc (foreground color: #54595f, background color: #252627, font size: 11.3pt (15px), font weight: 400). Expected minimum APCA lightness contrast of 60Lc

HTML

<a href="https://stackoverflow.com/" style="border-bottom: 0 !important; cursor: default !important; color: inherit !important; text-decoration: none !important; font-size: inherit !important; font-family: inherit !important; font-weight: inherit !important; line-height: inherit !important;">

Target

p:nth-child(2) > a[href$="stackoverflow.com/"]:nth-child(1)

Summary

Fix all of the following:

  • Element has insufficient APCA custom level contrast of 14.4Lc (foreground color: #54595f, background color: #252627, font size: 11.3pt (15px), font weight: 400). Expected minimum APCA lightness contrast of 60Lc

HTML

<a href="https://stackoverflow.com/" style="border-bottom: 0 !important; cursor: default !important; color: inherit !important; text-decoration: none !important; font-size: inherit !important; font-family: inherit !important; font-weight: inherit !important; line-height: inherit !important;">

Target

p:nth-child(2) > a[href$="stackoverflow.com/"]:nth-child(2)

Summary

Fix all of the following:

  • Element has insufficient APCA custom level contrast of 14.4Lc (foreground color: #54595f, background color: #252627, font size: 11.3pt (15px), font weight: 400). Expected minimum APCA lightness contrast of 60Lc

HTML

<span class="hljs-comment">&lt;!-- Preformatted code block --&gt;</span>

Target

.hljs-comment:nth-child(1)

Summary

Fix all of the following:

  • Element has insufficient APCA custom level contrast of 45.68Lc (foreground color: #999999, background color: #1d1b1b, font size: 9.8pt (13px), font weight: 400). Expected minimum APCA lightness contrast of 60Lc

HTML

<span class="hljs-comment">&lt;!-- Inline code --&gt;</span>

Target

.hljs-comment:nth-child(11)

Summary

Fix all of the following:

  • Element has insufficient APCA custom level contrast of 45.68Lc (foreground color: #999999, background color: #1d1b1b, font size: 9.8pt (13px), font weight: 400). Expected minimum APCA lightness contrast of 60Lc

HTML

<p style="margin: 0;">

Target

.mb16.stacks-preview > .stacks-preview--example > p

Summary

Fix all of the following:

  • Element has insufficient APCA custom level contrast of 14.4Lc (foreground color: #54595f, background color: #252627, font size: 11.3pt (15px), font weight: 400). Expected minimum APCA lightness contrast of 60Lc

HTML

<p style="margin: 0 0 15px 0;">Now with Stack&nbsp;Overflow you can level up.</p>

Target

section:nth-child(10) > .stacks-preview > .stacks-preview--example > p:nth-child(1)

Summary

Fix all of the following:

  • Element has insufficient APCA custom level contrast of 14.4Lc (foreground color: #54595f, background color: #252627, font size: 11.3pt (15px), font weight: 400). Expected minimum APCA lightness contrast of 60Lc

HTML

<p style="margin: 0 0 15px 0;">The last sentence shouldn’t produce an&nbsp;orphan.</p>

Target

section:nth-child(10) > .stacks-preview > .stacks-preview--example > p:nth-child(2)

Summary

Fix all of the following:

  • Element has insufficient APCA custom level contrast of 14.4Lc (foreground color: #54595f, background color: #252627, font size: 11.3pt (15px), font weight: 400). Expected minimum APCA lightness contrast of 60Lc

HTML

<span class="hljs-comment">&lt;!-- Desktop Outlook on Windows sometimes chokes on web font references and defaults to Times New Roman, so we force a safe system font fallback. --&gt;</span>

Target

.hljs-comment:nth-child(3)

Summary

Fix all of the following:

  • Element has insufficient APCA custom level contrast of 45.68Lc (foreground color: #999999, background color: #1d1b1b, font size: 9.8pt (13px), font weight: 400). Expected minimum APCA lightness contrast of 60Lc

HTML

<span class="hljs-comment">&lt;!--[if mso]&gt;<br>    &lt;style&gt;<br>        * {<br>            font-family: arial, sans-serif !important;<br>        }<br>    &lt;/style&gt;<br>    &lt;![endif]--&gt;</span>

Target

.hljs-comment:nth-child(5)

Summary

Fix all of the following:

  • Element has insufficient APCA custom level contrast of 45.68Lc (foreground color: #999999, background color: #1d1b1b, font size: 9.8pt (13px), font weight: 400). Expected minimum APCA lightness contrast of 60Lc

HTML

<span class="hljs-comment">&lt;!-- All other clients get the webfont reference; some will render the font and others will silently fail to the fallbacks. More on that here: http://stylecampaign.com/blog/2015/02/webfont-support-in-email/ --&gt;</span>

Target

.hljs-comment:nth-child(8)

Summary

Fix all of the following:

  • Element has insufficient APCA custom level contrast of 45.68Lc (foreground color: #999999, background color: #1d1b1b, font size: 9.8pt (13px), font weight: 400). Expected minimum APCA lightness contrast of 60Lc

HTML

<span class="hljs-comment">&lt;!--[if !mso]&gt;&lt;!--&gt;</span>

Target

.hljs-comment:nth-child(10)

Summary

Fix all of the following:

  • Element has insufficient APCA custom level contrast of 45.68Lc (foreground color: #999999, background color: #1d1b1b, font size: 9.8pt (13px), font weight: 400). Expected minimum APCA lightness contrast of 60Lc

HTML

<span class="hljs-comment">&lt;!--&lt;![endif]--&gt;</span>

Target

.hljs-comment:nth-child(14)

Summary

Fix all of the following:

  • Element has insufficient APCA custom level contrast of 45.68Lc (foreground color: #999999, background color: #1d1b1b, font size: 9.8pt (13px), 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="https://stackoverflow.com/" style="color: #0077CC; text-decoration: none;">Go to the homepage</a>

Target

.stacks-preview--example > a[href$="stackoverflow.com/"]

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://www.stackoverflow.com" style="color: #0077CC; text-decoration: none;">text link</a>

Target

a[href$="www.stackoverflow.com"]

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

<p style="padding: 4px 0; font-size: 15px; margin: 0; overflow-wrap: break-word;">Write a function that takes a string consisting of alphabetic characters as input argument and returns True if the string is a palindrome. A palindrome is a string which is the same backward or forward.</p>

Target

blockquote > p

Summary

Fix any of the following:

  • Element has insufficient color contrast of 6.63 (foreground color: #54595f, background color: #fff8dc, 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="https://stackoverflow.com/" style="color: #0077CC; text-decoration: none;">Go to the homepage</a>

Target

.stacks-preview--example > a[href$="stackoverflow.com/"]

Summary

Fix any of the following:

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

HTML

<a href="https://www.stackoverflow.com" style="color: #0077CC; text-decoration: none;">text link</a>

Target

a[href$="www.stackoverflow.com"]

Summary

Fix any of the following:

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

HTML

<p style="padding: 4px 0; font-size: 15px; margin: 0; overflow-wrap: break-word;">Write a function that takes a string consisting of alphabetic characters as input argument and returns True if the string is a palindrome. A palindrome is a string which is the same backward or forward.</p>

Target

blockquote > p

Summary

Fix any of the following:

  • Element has insufficient color contrast of 6.63 (foreground color: #54595f, background color: #fff8dc, 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="https://www.stackoverflow.com" style="color: #0077CC; text-decoration: none;">text link</a>

Target

a[href$="www.stackoverflow.com"]

Summary

Fix any of the following:

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

Target

a[href$="www.stackoverflow.com"]

Summary

Fix any of the following:

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

Target

a[href$="www.stackoverflow.com"]

Summary

Fix any of the following:

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

Target

a[href$="www.stackoverflow.com"]

Summary

Fix any of the following:

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

Ensure that lists are structured correctly. <ul> and <ol> must only directly contain <li>, <script> or <template> elements. Help URL

HTML

<ol class="stacks-copy">

Target

section:nth-child(11) > ol

Summary

Fix all of the following:

  • List element has direct children that are not allowed: p, div

Ensure that lists are structured correctly. <ul> and <ol> must only directly contain <li>, <script> or <template> elements. Help URL

HTML

<ol class="stacks-copy">

Target

section:nth-child(11) > ol

Summary

Fix all of the following:

  • List element has direct children that are not allowed: p, div

Ensure that lists are structured correctly. <ul> and <ol> must only directly contain <li>, <script> or <template> elements. Help URL

HTML

<ol class="stacks-copy">

Target

section:nth-child(11) > ol

Summary

Fix all of the following:

  • List element has direct children that are not allowed: p, div

Ensure that lists are structured correctly. <ul> and <ol> must only directly contain <li>, <script> or <template> elements. Help URL

HTML

<ol class="stacks-copy">

Target

section:nth-child(11) > ol

Summary

Fix all of the following:

  • List element has direct children that are not allowed: p, div