11 violations: Light: 2 Dark: 3 HC Light: 3 HC 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
<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>
section:nth-child(4) > .stacks-preview > .stacks-preview--example > p:nth-child(1)
Fix all of the following:
<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>
section:nth-child(4) > .stacks-preview > .stacks-preview--example > p:nth-child(2)
Fix all of the following:
<strong>strong</strong>
section:nth-child(4) > .stacks-preview > .stacks-preview--example > p:nth-child(2) > strong
Fix all of the following:
<em>italic</em>
p:nth-child(2) > em
Fix all of the following:
<h1 style="font-weight: bold; font-size: 27px; line-height: 27px; color: #242629; margin: 0 0 15px 0;">I’m a headline</h1>
section:nth-child(5) > .stacks-preview > .stacks-preview--example > h1
Fix all of the following:
<h2 style="font-weight: bold; font-size: 21px; line-height: 24px; color: #242629; margin: 0 0 15px 0;">I’m a subheadline</h2>
.stacks-preview--example > h2
Fix all of the following:
<li style="margin: 0 0 10px 30px;">You get a list item.</li>
.stacks-preview--example > ul > li:nth-child(1)
Fix all of the following:
<li style="margin: 0 0 10px 30px;">And you get a list item!</li>
.stacks-preview--example > ul > li:nth-child(2)
Fix all of the following:
<li style="margin: 0 0 0 30px;">Everyone gets a list item!</li>
.stacks-preview--example > ul > li:nth-child(3)
Fix all of the following:
<li style="margin: 0 0 10px 30px;">You get a list item.</li>
.stacks-preview--example > ol > li:nth-child(1)
Fix all of the following:
<li style="margin: 0 0 10px 30px;">And you get a list item!</li>
.stacks-preview--example > ol > li:nth-child(2)
Fix all of the following:
<li style="margin: 0 0 0 30px;">Everyone gets a list item!</li>
.stacks-preview--example > ol > li:nth-child(3)
Fix all of the following:
<a href="https://stackoverflow.com/" style="color: #0077CC; text-decoration: none;">Go to the homepage</a>
.stacks-preview--example > a[href$="stackoverflow.com/"]
Fix all of the following:
<a href="#" style="color: blue; text-decoration: underline;">links will appear like this</a>
.stacks-copy:nth-child(4) > a[href="#"]
Fix all of the following:
<p style="margin: 0 0 15px 0;">I’m a text string in markdown.</p>
.mb24.stacks-preview:nth-child(5) > .stacks-preview--example > p:nth-child(1)
Fix all of the following:
<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>
.mb24.stacks-preview:nth-child(5) > .stacks-preview--example > p:nth-child(2)
Fix all of the following:
<strong>bold</strong>
.mb24.stacks-preview:nth-child(5) > .stacks-preview--example > p:nth-child(2) > strong
Fix all of the following:
<a href="https://www.stackoverflow.com" style="color: #0077CC; text-decoration: none;">text link</a>
a[href$="www.stackoverflow.com"]
Fix all of the following:
<p style="margin: 0 0 15px 0;">
.mb24.stacks-preview:nth-child(9) > .stacks-preview--example > p:nth-child(1)
Fix all of the following:
<a href="https://stackoverflow.com/" style="color: blue; text-decoration: none; border-bottom: 1px dashed;">Thursday</a>
p:nth-child(1) > a[href$="stackoverflow.com/"]:nth-child(1)
Fix all of the following:
<a href="https://stackoverflow.com/" style="color: blue; text-decoration: none; border-bottom: 1px dashed;">New York</a>
p:nth-child(1) > a[href$="stackoverflow.com/"]:nth-child(2)
Fix all of the following:
<p style="margin: 0 0 15px 0;">
.mb24.stacks-preview:nth-child(9) > .stacks-preview--example > p:nth-child(2)
Fix all of the following:
<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;">
p:nth-child(2) > a[href$="stackoverflow.com/"]:nth-child(1)
Fix all of the following:
<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;">
p:nth-child(2) > a[href$="stackoverflow.com/"]:nth-child(2)
Fix all of the following:
<span class="hljs-comment"><!-- Preformatted code block --></span>
.hljs-comment:nth-child(1)
Fix all of the following:
<span class="hljs-comment"><!-- Inline code --></span>
.hljs-comment:nth-child(11)
Fix all of the following:
<p style="margin: 0;">
.mb16.stacks-preview > .stacks-preview--example > p
Fix all of the following:
<p style="margin: 0 0 15px 0;">Now with Stack Overflow you can level up.</p>
section:nth-child(10) > .stacks-preview > .stacks-preview--example > p:nth-child(1)
Fix all of the following:
<p style="margin: 0 0 15px 0;">The last sentence shouldn’t produce an orphan.</p>
section:nth-child(10) > .stacks-preview > .stacks-preview--example > p:nth-child(2)
Fix all of the following:
<span class="hljs-comment"><!-- Desktop Outlook on Windows sometimes chokes on web font references and defaults to Times New Roman, so we force a safe system font fallback. --></span>
.hljs-comment:nth-child(3)
Fix all of the following:
<span class="hljs-comment"><!--[if mso]><br> <style><br> * {<br> font-family: arial, sans-serif !important;<br> }<br> </style><br> <![endif]--></span>
.hljs-comment:nth-child(5)
Fix all of the following:
<span class="hljs-comment"><!-- 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/ --></span>
.hljs-comment:nth-child(8)
Fix all of the following:
<span class="hljs-comment"><!--[if !mso]><!--></span>
.hljs-comment:nth-child(10)
Fix all of the following:
<span class="hljs-comment"><!--<![endif]--></span>
.hljs-comment:nth-child(14)
Fix all of the following:
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
<a href="https://stackoverflow.com/" style="color: #0077CC; text-decoration: none;">Go to the homepage</a>
.stacks-preview--example > a[href$="stackoverflow.com/"]
Fix any of the following:
<a href="https://www.stackoverflow.com" style="color: #0077CC; text-decoration: none;">text link</a>
a[href$="www.stackoverflow.com"]
Fix any of the following:
<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>
blockquote > p
Fix any of the following:
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
<a href="https://stackoverflow.com/" style="color: #0077CC; text-decoration: none;">Go to the homepage</a>
.stacks-preview--example > a[href$="stackoverflow.com/"]
Fix any of the following:
<a href="https://www.stackoverflow.com" style="color: #0077CC; text-decoration: none;">text link</a>
a[href$="www.stackoverflow.com"]
Fix any of the following:
<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>
blockquote > p
Fix any of the following:
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
<a href="https://www.stackoverflow.com" style="color: #0077CC; text-decoration: none;">text link</a>
a[href$="www.stackoverflow.com"]
Fix any of the following:
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
<a href="https://www.stackoverflow.com" style="color: #0077CC; text-decoration: none;">text link</a>
a[href$="www.stackoverflow.com"]
Fix any of the following:
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
<a href="https://www.stackoverflow.com" style="color: #0077CC; text-decoration: none;">text link</a>
a[href$="www.stackoverflow.com"]
Fix any of the following:
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
<a href="https://www.stackoverflow.com" style="color: #0077CC; text-decoration: none;">text link</a>
a[href$="www.stackoverflow.com"]
Fix any of the following:
Ensure that lists are structured correctly. <ul> and <ol> must only directly contain <li>, <script> or <template> elements. Help URL
<ol class="stacks-copy">
section:nth-child(11) > ol
Fix all of the following:
Ensure that lists are structured correctly. <ul> and <ol> must only directly contain <li>, <script> or <template> elements. Help URL
<ol class="stacks-copy">
section:nth-child(11) > ol
Fix all of the following:
Ensure that lists are structured correctly. <ul> and <ol> must only directly contain <li>, <script> or <template> elements. Help URL
<ol class="stacks-copy">
section:nth-child(11) > ol
Fix all of the following:
Ensure that lists are structured correctly. <ul> and <ol> must only directly contain <li>, <script> or <template> elements. Help URL
<ol class="stacks-copy">
section:nth-child(11) > ol
Fix all of the following: