system/foundation/theming

ID:: system/foundation/theming
Automated score:: 93.2
URL:: https://stackoverflow.design/system/foundation/theming

7 violations: Light: 2Dark: 2HC Light: 1HC Dark: 2

button-name

Light Critical Go to issue button-name-light

Ensure buttons have discernible text. Buttons must have discernible text. Help URL

HTML

<button class="s-btn h:fc-blue-400 px0 s-btn__clear s-btn__icon">

Target

.h\:fc-blue-400

Summary

Fix any of the following:

Element does not have inner text that is visible to screen readers
aria-label attribute does not exist or is empty
aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty
Element has no title attribute
Element does not have an implicit (wrapped) <label>
Element does not have an explicit <label>
Element's default semantics were not overridden with role="none" or role="presentation"

button-name

Dark Critical Go to issue button-name-dark

Ensure buttons have discernible text. Buttons must have discernible text. Help URL

HTML

<button class="s-btn h:fc-blue-400 px0 s-btn__clear s-btn__icon">

Target

.h\:fc-blue-400

Summary

Fix any of the following:

Element does not have inner text that is visible to screen readers
aria-label attribute does not exist or is empty
aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty
Element has no title attribute
Element does not have an implicit (wrapped) <label>
Element does not have an explicit <label>
Element's default semantics were not overridden with role="none" or role="presentation"

button-name

HC Light Critical Go to issue button-name-light-highcontrast

Ensure buttons have discernible text. Buttons must have discernible text. Help URL

HTML

<button class="s-btn h:fc-blue-400 px0 s-btn__clear s-btn__icon">

Target

.h\:fc-blue-400

Summary

Fix any of the following:

Element does not have inner text that is visible to screen readers
aria-label attribute does not exist or is empty
aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty
Element has no title attribute
Element does not have an implicit (wrapped) <label>
Element does not have an explicit <label>
Element's default semantics were not overridden with role="none" or role="presentation"

button-name

HC Dark Critical Go to issue button-name-dark-highcontrast

Ensure buttons have discernible text. Buttons must have discernible text. Help URL

HTML

<button class="s-btn h:fc-blue-400 px0 s-btn__clear s-btn__icon">

Target

.h\:fc-blue-400

Summary

Fix any of the following:

Element does not have inner text that is visible to screen readers
aria-label attribute does not exist or is empty
aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty
Element has no title attribute
Element does not have an implicit (wrapped) <label>
Element does not have an explicit <label>
Element's default semantics were not overridden with role="none" or role="presentation"

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-300 fc-white">
                                        theme-primary-300
                                    </div>

Target

.bs-md.baw2.bc-white > .bg-theme-primary-300.fc-white.p12

Summary

Fix all of the following:

Element has insufficient APCA custom level contrast of 50.52Lc (foreground color: #ffffff, background color: #f59056, font size: 12.0pt (16px), font weight: 300). Expected minimum APCA lightness contrast of 60Lc

HTML

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

Target

.bg-theme-secondary-300

Summary

Fix all of the following:

Element has insufficient APCA custom level contrast of 50.84Lc (foreground color: #ffffff, background color: #a7aab0, font size: 12.0pt (16px), font weight: 300). Expected minimum APCA lightness contrast of 60Lc

HTML

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

Target

.bs-none > div > .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: 12.0pt (16px), font weight: 300). Expected minimum APCA lightness contrast of 60Lc

HTML

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

Target

.bs-none > div > .bg-theme-primary-300.fc-white.p12

Summary

Fix all of the following:

Element has insufficient APCA custom level contrast of 31.13Lc (foreground color: #ffffff, background color: #a4d5cf, font size: 12.0pt (16px), font weight: 300). Expected minimum APCA lightness contrast of 60Lc

HTML

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

Target

.bs-none > div > .bg-theme-primary-400.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: 12.0pt (16px), font weight: 300). 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

<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

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

Target

.theme-dark__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

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

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

Target

.bs-md.baw2.bc-white > .bg-theme-primary-300.fc-white.p12

Summary

Fix all of the following:

Element has insufficient APCA custom level contrast of 48.65Lc (foreground color: #141414, background color: #c78c69, font size: 12.0pt (16px), font weight: 300). Expected minimum APCA lightness contrast of 60Lc

HTML

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

Target

.bg-theme-secondary-300

Summary

Fix all of the following:

Element has insufficient APCA custom level contrast of 41.98Lc (foreground color: #141414, background color: #8c8c8c, font size: 12.0pt (16px), font weight: 300). Expected minimum APCA lightness contrast of 60Lc

HTML

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

Target

.bs-none > div > .bg-theme-primary.fc-white.p12

Summary

Fix all of the following:

Element has insufficient APCA custom level contrast of 48.81Lc (foreground color: #141414, background color: #4da89c, font size: 12.0pt (16px), font weight: 300). Expected minimum APCA lightness contrast of 60Lc

HTML

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

Target

.bs-none > div > .bg-theme-primary-300.fc-white.p12

Summary

Fix all of the following:

Element has insufficient APCA custom level contrast of 29.87Lc (foreground color: #141414, background color: #497b75, font size: 12.0pt (16px), font weight: 300). Expected minimum APCA lightness contrast of 60Lc

HTML

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

Target

.bs-none > div > .bg-theme-primary-400.fc-white.p12

Summary

Fix all of the following:

Element has insufficient APCA custom level contrast of 48.81Lc (foreground color: #141414, background color: #4da89c, font size: 12.0pt (16px), font weight: 300). 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

<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

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

Target

.theme-dark__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

color-contrast-enhanced

HC Dark Serious Go to issue color-contrast-enhanced-dark-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-secondary-300 fc-white">
                                        theme-secondary-300
                                    </div>

Target

.bg-theme-secondary-300

Summary

Fix any of the following:

Element has insufficient color contrast of 6.24 (foreground color: #000000, background color: #8c8c8c, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 7:1