3 violations: Light: 1 Dark: 1 HC Light: 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
<div class="p12 bg-theme-primary fc-white">
theme-primary
</div>
._preview-none.mb24.stacks-preview > .bs-md.baw2.bc-white > .bg-theme-primary.fc-white.p12
Fix all of the following:
<div class="p12 bg-theme-primary-400 fc-white">
theme-primary-400
</div>
._preview-none.mb24.stacks-preview > .bs-md.baw2.bc-white > .fc-white.bg-theme-primary-400.p12
Fix all of the following:
<div class="s-avatar--letter">C</div>
.p16:nth-child(2) > .d\:bg-black-100.bc-black-225.ba > .g24.fd-column.d-flex > .theme-team-002.themed.g8 > .g16.ai-center.d-flex > .s-avatar.s-avatar__32.bg-theme-primary-400 > .s-avatar--letter
Fix all of the following:
<button class="s-btn s-btn__filled s-btn__sm" type="button">Subscribe</button>
.p16:nth-child(2) > .d\:bg-black-100.bc-black-225.ba > .g24.fd-column.d-flex > .theme-team-002.themed.g8 > .g16.ai-center.d-flex > .s-btn__filled.s-btn__sm[type="button"]
Fix all of the following:
<span class="s-pagination--item is-selected">1</span>
.p16:nth-child(2) > .d\:bg-black-100.bc-black-225.ba > .g24.fd-column.d-flex > .theme-team-002.themed.g8 > .g16.ai-center.d-flex > div:nth-child(4) > .s-pagination > .is-selected.s-pagination--item
Fix all of the following:
<div class="s-avatar--letter">C</div>
.theme-light__forced > .g24.fd-column.d-flex > .theme-team-002.themed.g8 > .g16.ai-center.d-flex > .s-avatar.s-avatar__32.bg-theme-primary-400 > .s-avatar--letter
Fix all of the following:
<button class="s-btn s-btn__filled s-btn__sm" type="button">Subscribe</button>
.theme-light__forced > .g24.fd-column.d-flex > .theme-team-002.themed.g8 > .g16.ai-center.d-flex > .s-btn__filled.s-btn__sm[type="button"]
Fix all of the following:
<span class="s-pagination--item is-selected">1</span>
.theme-light__forced > .g24.fd-column.d-flex > .theme-team-002.themed.g8 > .g16.ai-center.d-flex > div:nth-child(4) > .s-pagination > .is-selected.s-pagination--item
Fix all of the following:
<button class="s-btn s-btn__filled s-btn__sm" type="button">Subscribe</button>
.bg-black-100 > .g24.fd-column.d-flex > .theme-team-001.themed.g8 > .g16.ai-center.d-flex > .s-btn__filled.s-btn__sm[type="button"]
Fix all of the following:
<span class="s-pagination--item is-selected">1</span>
.bg-black-100 > .g24.fd-column.d-flex > .theme-team-001.themed.g8 > .g16.ai-center.d-flex > div:nth-child(4) > .s-pagination > .is-selected.s-pagination--item
Fix all of the following:
<div class="s-avatar--letter">C</div>
.bg-black-100 > .g24.fd-column.d-flex > .theme-team-002.themed.g8 > .g16.ai-center.d-flex > .s-avatar.s-avatar__32.bg-theme-primary-400 > .s-avatar--letter
Fix all of the following:
<button class="s-btn s-btn__filled s-btn__sm" type="button">Subscribe</button>
.bg-black-100 > .g24.fd-column.d-flex > .theme-team-003.themed.g8 > .g16.ai-center.d-flex > .s-btn__filled.s-btn__sm[type="button"]
Fix all of the following:
<span class="s-pagination--item is-selected">1</span>
.bg-black-100 > .g24.fd-column.d-flex > .theme-team-003.themed.g8 > .g16.ai-center.d-flex > div:nth-child(4) > .s-pagination > .is-selected.s-pagination--item
Fix all of the following:
Ensures the contrast between foreground and background colors meets APCA custom level conformance minimums thresholds. Elements must meet APCA conformance minimums thresholds. Help URL
<span class="hljs-comment">/* Input */</span>
.hljs-comment:nth-child(1)
Fix all of the following:
<span class="hljs-comment">/* Output */</span>
.hljs-comment:nth-child(13)
Fix all of the following:
<span class="hljs-comment">/* HSL variables */</span>
.hljs-comment:nth-child(18)
Fix all of the following:
<span class="hljs-comment">/* Color variables based on HSL variables */</span>
.hljs-comment:nth-child(29)
Fix all of the following:
<div class="p12 bg-theme-primary fc-white">
theme-primary
</div>
._preview-none.mb24.stacks-preview > .bs-md.baw2.bc-white > .bg-theme-primary.fc-white.p12
Fix all of the following:
<div class="p12 bg-theme-primary-400 fc-white">
theme-primary-400
</div>
._preview-none.mb24.stacks-preview > .bs-md.baw2.bc-white > .fc-white.bg-theme-primary-400.p12
Fix all of the following:
<span class="hljs-comment">/* Override colors for dark mode only */</span>
.language-html.s-code-block > .language-css > .hljs-comment
Fix all of the following:
<button class="s-btn s-btn__filled s-btn__sm" type="button">Subscribe</button>
.p16:nth-child(2) > .d\:bg-black-100.bc-black-225.ba > .g24.fd-column.d-flex > .theme-team-001.themed.g8 > .g16.ai-center.d-flex > .s-btn__filled.s-btn__sm[type="button"]
Fix all of the following:
<span class="s-pagination--item is-selected">1</span>
.p16:nth-child(2) > .d\:bg-black-100.bc-black-225.ba > .g24.fd-column.d-flex > .theme-team-001.themed.g8 > .g16.ai-center.d-flex > div:nth-child(4) > .s-pagination > .is-selected.s-pagination--item
Fix all of the following:
<div class="s-avatar--letter">C</div>
.p16:nth-child(2) > .d\:bg-black-100.bc-black-225.ba > .g24.fd-column.d-flex > .theme-team-002.themed.g8 > .g16.ai-center.d-flex > .s-avatar.s-avatar__32.bg-theme-primary-400 > .s-avatar--letter
Fix all of the following:
<button class="s-btn s-btn__filled s-btn__sm" type="button">Subscribe</button>
.p16:nth-child(2) > .d\:bg-black-100.bc-black-225.ba > .g24.fd-column.d-flex > .theme-team-003.themed.g8 > .g16.ai-center.d-flex > .s-btn__filled.s-btn__sm[type="button"]
Fix all of the following:
<div class="s-avatar--letter">C</div>
.theme-light__forced > .g24.fd-column.d-flex > .theme-team-002.themed.g8 > .g16.ai-center.d-flex > .s-avatar.s-avatar__32.bg-theme-primary-400 > .s-avatar--letter
Fix all of the following:
<button class="s-btn s-btn__filled s-btn__sm" type="button">Subscribe</button>
.theme-light__forced > .g24.fd-column.d-flex > .theme-team-002.themed.g8 > .g16.ai-center.d-flex > .s-btn__filled.s-btn__sm[type="button"]
Fix all of the following:
<span class="s-pagination--item is-selected">1</span>
.theme-light__forced > .g24.fd-column.d-flex > .theme-team-002.themed.g8 > .g16.ai-center.d-flex > div:nth-child(4) > .s-pagination > .is-selected.s-pagination--item
Fix all of the following:
<button class="s-btn s-btn__filled s-btn__sm" type="button">Subscribe</button>
.bg-black-100 > .g24.fd-column.d-flex > .theme-team-001.themed.g8 > .g16.ai-center.d-flex > .s-btn__filled.s-btn__sm[type="button"]
Fix all of the following:
<span class="s-pagination--item is-selected">1</span>
.bg-black-100 > .g24.fd-column.d-flex > .theme-team-001.themed.g8 > .g16.ai-center.d-flex > div:nth-child(4) > .s-pagination > .is-selected.s-pagination--item
Fix all of the following:
<div class="s-avatar--letter">C</div>
.bg-black-100 > .g24.fd-column.d-flex > .theme-team-002.themed.g8 > .g16.ai-center.d-flex > .s-avatar.s-avatar__32.bg-theme-primary-400 > .s-avatar--letter
Fix all of the following:
<button class="s-btn s-btn__filled s-btn__sm" type="button">Subscribe</button>
.bg-black-100 > .g24.fd-column.d-flex > .theme-team-003.themed.g8 > .g16.ai-center.d-flex > .s-btn__filled.s-btn__sm[type="button"]
Fix all of the following:
<span class="s-pagination--item is-selected">1</span>
.bg-black-100 > .g24.fd-column.d-flex > .theme-team-003.themed.g8 > .g16.ai-center.d-flex > div:nth-child(4) > .s-pagination > .is-selected.s-pagination--item
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
<div class="p12 bg-theme-primary-300 fc-black">
theme-primary-300
</div>
div:nth-child(1) > .bs-md.baw2.bc-white > .bg-theme-primary-300.fc-black.p12
Fix any of the following:
<div class="p12 bg-theme-secondary-300 fc-black">
theme-secondary-300
</div>
.bg-theme-secondary-300
Fix any of the following:
<div class="p12 bg-theme-primary-300 fc-black">
theme-primary-300
</div>
._preview-none.mb24.stacks-preview > .bs-md.baw2.bc-white > .bg-theme-primary-300.fc-black.p12
Fix any of the following: