product/foundation/theming

ID:
product/foundation/theming
Automated score:
97.4
View JSON file

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

HTML

<div class="p12 bg-theme-primary fc-white">
                            theme-primary
                            </div>

Target

._preview-none.mb24.stacks-preview > .bs-md.baw2.bc-white > .bg-theme-primary.fc-white.p12

Summary

Fix all of the following:

  • Element has insufficient APCA custom level contrast of 59.53Lc (foreground color: #ffffff, background color: #4da89c, font size: 9.8pt (13px), font weight: 400). Expected minimum APCA lightness contrast of 60Lc

HTML

<div class="p12 bg-theme-primary-400 fc-white">
                            theme-primary-400
                            </div>

Target

._preview-none.mb24.stacks-preview > .bs-md.baw2.bc-white > .fc-white.bg-theme-primary-400.p12

Summary

Fix all of the following:

  • Element has insufficient APCA custom level contrast of 59.53Lc (foreground color: #ffffff, background color: #4da89c, font size: 9.8pt (13px), font weight: 400). Expected minimum APCA lightness contrast of 60Lc

HTML

<div class="s-avatar--letter">C</div>

Target

.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

Summary

Fix all of the following:

  • Element has insufficient APCA custom level contrast of 36.12Lc (foreground color: #ffffff, background color: #f8b830, font size: 16.5pt (22px), font weight: 700). Expected minimum APCA lightness contrast of 60Lc

HTML

<button class="s-btn s-btn__filled s-btn__sm" type="button">Subscribe</button>

Target

.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"]

Summary

Fix all of the following:

  • Element has insufficient APCA custom level contrast of 36.12Lc (foreground color: #ffffff, background color: #f8b830, font size: 9.0pt (12px), font weight: 400). Expected minimum APCA lightness contrast of 60Lc

HTML

<span class="s-pagination--item is-selected">1</span>

Target

.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

Summary

Fix all of the following:

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

HTML

<div class="s-avatar--letter">C</div>

Target

.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

Summary

Fix all of the following:

  • Element has insufficient APCA custom level contrast of 36.12Lc (foreground color: #ffffff, background color: #f8b830, font size: 16.5pt (22px), font weight: 700). Expected minimum APCA lightness contrast of 60Lc

HTML

<button class="s-btn s-btn__filled s-btn__sm" type="button">Subscribe</button>

Target

.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"]

Summary

Fix all of the following:

  • Element has insufficient APCA custom level contrast of 36.12Lc (foreground color: #ffffff, background color: #f8b830, font size: 9.0pt (12px), font weight: 400). Expected minimum APCA lightness contrast of 60Lc

HTML

<span class="s-pagination--item is-selected">1</span>

Target

.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

Summary

Fix all of the following:

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

HTML

<button class="s-btn s-btn__filled s-btn__sm" type="button">Subscribe</button>

Target

.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"]

Summary

Fix all of the following:

  • Element has insufficient APCA custom level contrast of 34.92Lc (foreground color: #252627, background color: #eb3d5d, font size: 9.0pt (12px), font weight: 400). Expected minimum APCA lightness contrast of 60Lc

HTML

<span class="s-pagination--item is-selected">1</span>

Target

.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

Summary

Fix all of the following:

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

HTML

<div class="s-avatar--letter">C</div>

Target

.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

Summary

Fix all of the following:

  • Element has insufficient APCA custom level contrast of 36.12Lc (foreground color: #ffffff, background color: #f8b830, font size: 16.5pt (22px), font weight: 700). Expected minimum APCA lightness contrast of 60Lc

HTML

<button class="s-btn s-btn__filled s-btn__sm" type="button">Subscribe</button>

Target

.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"]

Summary

Fix all of the following:

  • Element has insufficient APCA custom level contrast of 37.17Lc (foreground color: #252627, background color: #b56bc7, font size: 9.0pt (12px), font weight: 400). Expected minimum APCA lightness contrast of 60Lc

HTML

<span class="s-pagination--item is-selected">1</span>

Target

.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

Summary

Fix all of the following:

  • Element has insufficient APCA custom level contrast of 37.17Lc (foreground color: #252627, background color: #b56bc7, font size: 9.8pt (13px), 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

<span class="hljs-comment">/* Input */</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">/* Output */</span>

Target

.hljs-comment:nth-child(13)

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">/* HSL variables */</span>

Target

.hljs-comment:nth-child(18)

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">/* Color variables based on HSL variables */</span>

Target

.hljs-comment:nth-child(29)

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

<div class="p12 bg-theme-primary fc-white">
                            theme-primary
                            </div>

Target

._preview-none.mb24.stacks-preview > .bs-md.baw2.bc-white > .bg-theme-primary.fc-white.p12

Summary

Fix all of the following:

  • Element has insufficient APCA custom level contrast of 45.83Lc (foreground color: #252627, background color: #4da89c, font size: 9.8pt (13px), font weight: 400). Expected minimum APCA lightness contrast of 60Lc

HTML

<div class="p12 bg-theme-primary-400 fc-white">
                            theme-primary-400
                            </div>

Target

._preview-none.mb24.stacks-preview > .bs-md.baw2.bc-white > .fc-white.bg-theme-primary-400.p12

Summary

Fix all of the following:

  • Element has insufficient APCA custom level contrast of 45.83Lc (foreground color: #252627, background color: #4da89c, font size: 9.8pt (13px), font weight: 400). Expected minimum APCA lightness contrast of 60Lc

HTML

<span class="hljs-comment">/* Override colors for dark mode only */</span>

Target

.language-html.s-code-block > .language-css > .hljs-comment

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

<button class="s-btn s-btn__filled s-btn__sm" type="button">Subscribe</button>

Target

.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"]

Summary

Fix all of the following:

  • Element has insufficient APCA custom level contrast of 34.92Lc (foreground color: #252627, background color: #eb3d5d, font size: 9.0pt (12px), font weight: 400). Expected minimum APCA lightness contrast of 60Lc

HTML

<span class="s-pagination--item is-selected">1</span>

Target

.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

Summary

Fix all of the following:

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

HTML

<div class="s-avatar--letter">C</div>

Target

.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

Summary

Fix all of the following:

  • Element has insufficient APCA custom level contrast of 36.12Lc (foreground color: #ffffff, background color: #f8b830, font size: 16.5pt (22px), font weight: 700). Expected minimum APCA lightness contrast of 60Lc

HTML

<button class="s-btn s-btn__filled s-btn__sm" type="button">Subscribe</button>

Target

.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"]

Summary

Fix all of the following:

  • Element has insufficient APCA custom level contrast of 37.17Lc (foreground color: #252627, background color: #b56bc7, font size: 9.0pt (12px), font weight: 400). Expected minimum APCA lightness contrast of 60Lc

HTML

<div class="s-avatar--letter">C</div>

Target

.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

Summary

Fix all of the following:

  • Element has insufficient APCA custom level contrast of 36.12Lc (foreground color: #ffffff, background color: #f8b830, font size: 16.5pt (22px), font weight: 700). Expected minimum APCA lightness contrast of 60Lc

HTML

<button class="s-btn s-btn__filled s-btn__sm" type="button">Subscribe</button>

Target

.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"]

Summary

Fix all of the following:

  • Element has insufficient APCA custom level contrast of 36.12Lc (foreground color: #ffffff, background color: #f8b830, font size: 9.0pt (12px), font weight: 400). Expected minimum APCA lightness contrast of 60Lc

HTML

<span class="s-pagination--item is-selected">1</span>

Target

.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

Summary

Fix all of the following:

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

HTML

<button class="s-btn s-btn__filled s-btn__sm" type="button">Subscribe</button>

Target

.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"]

Summary

Fix all of the following:

  • Element has insufficient APCA custom level contrast of 34.92Lc (foreground color: #252627, background color: #eb3d5d, font size: 9.0pt (12px), font weight: 400). Expected minimum APCA lightness contrast of 60Lc

HTML

<span class="s-pagination--item is-selected">1</span>

Target

.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

Summary

Fix all of the following:

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

HTML

<div class="s-avatar--letter">C</div>

Target

.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

Summary

Fix all of the following:

  • Element has insufficient APCA custom level contrast of 36.12Lc (foreground color: #ffffff, background color: #f8b830, font size: 16.5pt (22px), font weight: 700). Expected minimum APCA lightness contrast of 60Lc

HTML

<button class="s-btn s-btn__filled s-btn__sm" type="button">Subscribe</button>

Target

.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"]

Summary

Fix all of the following:

  • Element has insufficient APCA custom level contrast of 37.17Lc (foreground color: #252627, background color: #b56bc7, font size: 9.0pt (12px), font weight: 400). Expected minimum APCA lightness contrast of 60Lc

HTML

<span class="s-pagination--item is-selected">1</span>

Target

.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

Summary

Fix all of the following:

  • Element has insufficient APCA custom level contrast of 37.17Lc (foreground color: #252627, background color: #b56bc7, 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

<div class="p12 bg-theme-primary-300 fc-black">
                                        theme-primary-300
                                    </div>

Target

div:nth-child(1) > .bs-md.baw2.bc-white > .bg-theme-primary-300.fc-black.p12

Summary

Fix any of the following:

  • Element has insufficient color contrast of 6.72 (foreground color: #000000, background color: #e7700d, font size: 9.8pt (13px), font weight: normal). Expected contrast ratio of 7:1

HTML

<div class="p12 bg-theme-secondary-300 fc-black">
                                        theme-secondary-300
                                    </div>

Target

.bg-theme-secondary-300

Summary

Fix any of the following:

  • Element has insufficient color contrast of 4.77 (foreground color: #000000, background color: #257ad0, font size: 9.8pt (13px), font weight: normal). Expected contrast ratio of 7:1

HTML

<div class="p12 bg-theme-primary-300 fc-black">
                            theme-primary-300
                            </div>

Target

._preview-none.mb24.stacks-preview > .bs-md.baw2.bc-white > .bg-theme-primary-300.fc-black.p12

Summary

Fix any of the following:

  • Element has insufficient color contrast of 6.72 (foreground color: #000000, background color: #e7700d, font size: 9.8pt (13px), font weight: normal). Expected contrast ratio of 7:1