system/foundation/color-fundamentals

ID:: system/foundation/color-fundamentals
Automated score:: 92.6
URL:: https://stackoverflow.design/system/foundation/color-fundamentals

8 violations: Light: 2Dark: 2HC Light: 2HC 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="mr16 md:mr0 sm:mr16">300</div>

Target

.bg-black-300.h64.sm\:h32 > .mr16.md\:mr0.sm\:mr16

Summary

Fix all of the following:

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

HTML

<div class="mr16 md:mr0 sm:mr16">350</div>

Target

.bg-black-350.h64.sm\:h32 > .mr16.md\:mr0.sm\:mr16

Summary

Fix all of the following:

Element has insufficient APCA custom level contrast of 25.47Lc (foreground color: #46484d, background color: #84878c, font size: 12.0pt (16px), font weight: 300). Expected minimum APCA lightness contrast of 60Lc

HTML

<div class="bg-yellow-400 fc-black bar-pill ta-center px8 py2">Robots</div>

Target

.bg-yellow-400.fc-black.bar-pill

Summary

Fix all of the following:

Element has insufficient APCA custom level contrast of 43.61Lc (foreground color: #000000, background color: #ab8900, font size: 9.8pt (13px), font weight: 300). 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="mr16 md:mr0 sm:mr16">300</div>

Target

.bg-black-300.h64.sm\:h32 > .mr16.md\:mr0.sm\:mr16

Summary

Fix all of the following:

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

HTML

<div class="mr16 md:mr0 sm:mr16">350</div>

Target

.bg-black-350.h64.sm\:h32 > .mr16.md\:mr0.sm\:mr16

Summary

Fix all of the following:

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

HTML

<div class="bg-yellow-400 fc-black bar-pill ta-center px8 py2">Robots</div>

Target

.bg-yellow-400.fc-black.bar-pill

Summary

Fix all of the following:

Element has insufficient APCA custom level contrast of 27.49Lc (foreground color: #ffffff, background color: #e6d17e, font size: 9.8pt (13px), font weight: 300). 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="mr16 md:mr0 sm:mr16">225</div>

Target

.bg-black-225.h64.sm\:h32 > .mr16.md\:mr0.sm\:mr16

Summary

Fix any of the following:

Element has insufficient color contrast of 6.62 (foreground color: #44464b, background color: #d7d8db, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 7:1

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="mr16 md:mr0 sm:mr16">200</div>

Target

section:nth-child(4) > .p32.bg-black-100.fd-column > .sm\:fd-column.overflow-hidden.bar-md > .bg-black-200.h64.sm\:h32 > .mr16.md\:mr0.sm\:mr16

Summary

Fix any of the following:

Element has insufficient color contrast of 6.21 (foreground color: #f2ede9, background color: #575757, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 7:1

HTML

<div class="mr16 md:mr0 sm:mr16">200</div>

Target

section:nth-child(5) > .p32.bg-black-100.fd-column > .sm\:fd-column.overflow-hidden.bar-md > .bg-black-200.h64.sm\:h32 > .mr16.md\:mr0.sm\:mr16

Summary

Fix any of the following:

Element has insufficient color contrast of 6.21 (foreground color: #f2ede9, background color: #575757, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 7:1

HTML

<div class="mr16 md:mr0 sm:mr16">225</div>

Target

.bg-black-225.h64.sm\:h32 > .mr16.md\:mr0.sm\:mr16

Summary

Fix any of the following:

Element has insufficient color contrast of 4.93 (foreground color: #f2ede9, background color: #666666, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 7:1