email/patterns/columns

ID:
email/patterns/columns
Automated score:
98.3
URL:
https://stackoverflow.design/email/patterns/columns
View JSON file

2 violations: Dark: 1 HC Dark: 1

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

<span class="hljs-comment">&lt;!--[if mso]&gt;<br>            &lt;table role="presentation" border="0" cellspacing="0" cellpadding="0" width="640"&gt;<br>            &lt;tr&gt;<br>            &lt;td align="left" valign="top" width="320"&gt;<br>            &lt;![endif]--&gt;</span>

Target

section:nth-child(3) > .stacks-preview._preview-none.mb24 > pre > code > .hljs-comment:nth-child(7)

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;/td&gt;<br>            &lt;td align="left" valign="top" width="320"&gt;<br>            &lt;![endif]--&gt;</span>

Target

section:nth-child(3) > .stacks-preview._preview-none.mb24 > pre > code > .hljs-comment:nth-child(26)

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;/td&gt;<br>            &lt;/tr&gt;<br>            &lt;/table&gt;<br>            &lt;![endif]--&gt;</span>

Target

section:nth-child(3) > .stacks-preview._preview-none.mb24 > pre > code > .hljs-comment:nth-child(45)

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;table role="presentation" border="0" cellspacing="0" cellpadding="0" width="620"&gt;<br>            &lt;tr&gt;<br>            &lt;td align="left" valign="top" width="158"&gt;<br>            &lt;![endif]--&gt;</span>

Target

section:nth-child(4) > .stacks-preview._preview-none.mb24 > pre > code > .hljs-comment:nth-child(7)

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;/td&gt;<br>            &lt;td align="left" valign="top" width="462"&gt;<br>            &lt;![endif]--&gt;</span>

Target

section:nth-child(4) > .stacks-preview._preview-none.mb24 > pre > code > .hljs-comment:nth-child(27)

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;/td&gt;<br>            &lt;/tr&gt;<br>            &lt;/table&gt;<br>            &lt;![endif]--&gt;</span>

Target

section:nth-child(4) > .stacks-preview._preview-none.mb24 > pre > code > .hljs-comment:nth-child(46)

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;table role="presentation" border="0" cellspacing="0" cellpadding="0" width="620"&gt;<br>            &lt;tr&gt;<br>            &lt;td align="left" valign="top" width="158"&gt;<br>            &lt;![endif]--&gt;</span>

Target

section:nth-child(5) > .stacks-preview._preview-none.mb24 > pre > code > .hljs-comment:nth-child(7)

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;/td&gt;<br>            &lt;td align="left" valign="top" width="462"&gt;<br>            &lt;![endif]--&gt;</span>

Target

section:nth-child(5) > .stacks-preview._preview-none.mb24 > pre > code > .hljs-comment:nth-child(27)

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;/td&gt;<br>            &lt;/tr&gt;<br>            &lt;/table&gt;<br>            &lt;![endif]--&gt;</span>

Target

section:nth-child(5) > .stacks-preview._preview-none.mb24 > pre > code > .hljs-comment:nth-child(46)

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;table role="presentation" border="0" cellspacing="0" cellpadding="0" width="640"&gt;<br>            &lt;tr&gt;<br>            &lt;td align="left" valign="top" width="213"&gt;<br>            &lt;![endif]--&gt;</span>

Target

section:nth-child(6) > .stacks-preview._preview-none.mb24 > pre > code > .hljs-comment:nth-child(7)

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;/td&gt;<br>            &lt;td align="left" valign="top" width="213"&gt;<br>            &lt;![endif]--&gt;</span>

Target

section:nth-child(6) > .stacks-preview._preview-none.mb24 > pre > code > .hljs-comment:nth-child(26)

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;/td&gt;<br>            &lt;td align="left" valign="top" width="213"&gt;<br>            &lt;![endif]--&gt;</span>

Target

section:nth-child(6) > .stacks-preview._preview-none.mb24 > pre > code > .hljs-comment:nth-child(45)

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;/td&gt;<br>            &lt;/tr&gt;<br>            &lt;/table&gt;<br>            &lt;![endif]--&gt;</span>

Target

.hljs-comment:nth-child(64)

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="#" class="s-link s-link__muted py8 px12 bar-pill bg-black-225 fc-black-500" data-action="click->

Target

section:nth-child(3) > .stacks-preview._preview-none.mb24 > .stacks-preview--example.p0[data-controller="docs-resizer"] > .list-reset.bb.bc-black-225 > li:nth-child(2) > .bg-black-225.fc-black-500[data-action="click->docs-resizer#large"]

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="#" class="s-link s-link__muted py8 px12 bar-pill bg-black-225 fc-black-500" data-action="click->

Target

section:nth-child(4) > .stacks-preview._preview-none.mb24 > .stacks-preview--example.p0[data-controller="docs-resizer"] > .list-reset.bb.bc-black-225 > li:nth-child(2) > .bg-black-225.fc-black-500[data-action="click->docs-resizer#large"]

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="#" class="s-link s-link__muted py8 px12 bar-pill bg-black-225 fc-black-500" data-action="click->

Target

section:nth-child(5) > .stacks-preview._preview-none.mb24 > .stacks-preview--example.p0[data-controller="docs-resizer"] > .list-reset.bb.bc-black-225 > li:nth-child(2) > .bg-black-225.fc-black-500[data-action="click->docs-resizer#large"]

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="#" class="s-link s-link__muted py8 px12 bar-pill bg-black-225 fc-black-500" data-action="click->

Target

section:nth-child(6) > .stacks-preview._preview-none.mb24 > .stacks-preview--example.p0[data-controller="docs-resizer"] > .list-reset.bb.bc-black-225 > li:nth-child(2) > .bg-black-225.fc-black-500[data-action="click->docs-resizer#large"]

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