product/foundation/theming

ID:: product/foundation/theming
Automated score:: 97.4
URL:: https://stackoverflow.design/product/foundation/theming

3 violations: Light: 1 Dark: 1 HC Light: 1

color-contrast-apca-custom

Light Serious Go to issue color-contrast-apca-custom-light

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

color-contrast-apca-custom

Dark Serious Go to issue color-contrast-apca-custom-dark

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

color-contrast-enhanced

HC Light Serious Go to issue color-contrast-enhanced-light-highcontrast

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