product/foundation/colors

ID:: product/foundation/colors
Automated score:: 96.7
URL:: https://stackoverflow.design/product/foundation/colors

4 violations: Light: 1 Dark: 1 HC Light: 1 HC Dark: 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-yellow-400 fc-white">
                                yellow-400
                            </div>

Target

.bg-yellow-400.p12.fc-white

Summary

Fix all of the following:

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

HTML

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

Target

.bg-gold-300.p12.fc-black

Summary

Fix all of the following:

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

HTML

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

Target

.bg-silver-300.p12.fc-black

Summary

Fix all of the following:

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

HTML

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

Target

.bg-bronze-300.p12.fc-black

Summary

Fix all of the following:

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

HTML

<div class="p12 bg-black-350 fc-black">
                                black-350
                            </div>

Target

.bg-black-350.p12.fc-black

Summary

Fix all of the following:

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

HTML

<div class="fc-theme-primary bar-sm d-inline-block p6 ws-nowrap bg-white">.fc-theme-primary</div>

Target

.fc-theme-primary.bg-white.ws-nowrap

Summary

Fix all of the following:

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

HTML

<div class="fc-theme-primary-200 bar-sm d-inline-block p6 ws-nowrap bg-theme-primary-500">.fc-theme-primary-200</div>

Target

.fc-theme-primary-200.bg-theme-primary-500.ws-nowrap

Summary

Fix all of the following:

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

HTML

<div class="fc-theme-primary-300 bar-sm d-inline-block p6 ws-nowrap bg-theme-primary-500">.fc-theme-primary-300</div>

Target

.fc-theme-primary-300.bg-theme-primary-500.ws-nowrap

Summary

Fix all of the following:

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

HTML

<div class="fc-theme-primary-400 bar-sm d-inline-block p6 ws-nowrap bg-white">.fc-theme-primary-400</div>

Target

.fc-theme-primary-400.bg-white.ws-nowrap

Summary

Fix all of the following:

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

HTML

<div class="fc-theme-secondary-300 bar-sm d-inline-block p6 ws-nowrap bg-theme-secondary-500">.fc-theme-secondary-300</div>

Target

.fc-theme-secondary-300.bg-theme-secondary-500.ws-nowrap

Summary

Fix all of the following:

Element has insufficient APCA custom level contrast of 47.33Lc (foreground color: #92c2f2, background color: #155ca2, font size: 9.0pt (12px), font weight: 400). Expected minimum APCA lightness contrast of 60Lc

HTML

<div class="fc-orange-200 bar-sm d-inline-block p6 ws-nowrap bg-orange-500">.fc-orange-200</div>

Target

.fc-orange-200.bg-orange-500.ws-nowrap

Summary

Fix all of the following:

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

HTML

<div class="fc-orange-300 bar-sm d-inline-block p6 ws-nowrap bg-orange-500">.fc-orange-300</div>

Target

.fc-orange-300.bg-orange-500.ws-nowrap

Summary

Fix all of the following:

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

HTML

<div class="fc-orange-400 bar-sm d-inline-block p6 ws-nowrap bg-white">.fc-orange-400</div>

Target

.fc-orange-400.bg-white.ws-nowrap

Summary

Fix all of the following:

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

HTML

<div class="fc-blue-300 bar-sm d-inline-block p6 ws-nowrap bg-blue-500">.fc-blue-300</div>

Target

.fc-blue-300.bg-blue-500.ws-nowrap

Summary

Fix all of the following:

Element has insufficient APCA custom level contrast of 47.33Lc (foreground color: #92c2f2, background color: #155ca2, font size: 9.0pt (12px), font weight: 400). Expected minimum APCA lightness contrast of 60Lc

HTML

<div class="fc-green-300 bar-sm d-inline-block p6 ws-nowrap bg-green-500">.fc-green-300</div>

Target

.fc-green-300.bg-green-500.ws-nowrap

Summary

Fix all of the following:

Element has insufficient APCA custom level contrast of 50.97Lc (foreground color: #94ccae, background color: #0e6235, font size: 9.0pt (12px), font weight: 400). Expected minimum APCA lightness contrast of 60Lc

HTML

<div class="fc-red-300 bar-sm d-inline-block p6 ws-nowrap bg-red-500">.fc-red-300</div>

Target

.fc-red-300.bg-red-500.ws-nowrap

Summary

Fix all of the following:

Element has insufficient APCA custom level contrast of 48.95Lc (foreground color: #eeaaaa, background color: #9c2121, font size: 9.0pt (12px), font weight: 400). Expected minimum APCA lightness contrast of 60Lc

HTML

<div class="fc-yellow-400 bar-sm d-inline-block p6 ws-nowrap bg-white">.fc-yellow-400</div>

Target

.fc-yellow-400.bg-white.ws-nowrap

Summary

Fix all of the following:

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

HTML

<div class="bc-inherit bg-yellow-400 bar-sm d-inline-block fc-white p6 ws-nowrap fc-white">.bg-yellow-400</div>

Target

.bg-yellow-400.bc-inherit.fc-white

Summary

Fix all of the following:

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

HTML

<div class="fc-gold-300 bar-sm d-inline-block p6 ws-nowrap bg-gold-400">.fc-gold-300</div>

Target

.fc-gold-300.bg-gold-400.ws-nowrap

Summary

Fix all of the following:

Element has insufficient APCA custom level contrast of 31.8Lc (foreground color: #d6a100, background color: #7f6305, font size: 9.0pt (12px), font weight: 400). Expected minimum APCA lightness contrast of 60Lc

HTML

<div class="bc-inherit bg-gold-300 bar-sm d-inline-block fc-white p6 ws-nowrap fc-black">.bg-gold-300</div>

Target

.bg-gold-300.bc-inherit.fc-black

Summary

Fix all of the following:

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

HTML

<div class="fc-silver-200 bar-sm d-inline-block p6 ws-nowrap bg-silver-400">.fc-silver-200</div>

Target

.fc-silver-200.bg-silver-400.ws-nowrap

Summary

Fix all of the following:

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

HTML

<div class="fc-silver-300 bar-sm d-inline-block p6 ws-nowrap bg-silver-400">.fc-silver-300</div>

Target

.fc-silver-300.bg-silver-400.ws-nowrap

Summary

Fix all of the following:

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

HTML

<div class="bc-inherit bg-silver-300 bar-sm d-inline-block fc-white p6 ws-nowrap fc-black">.bg-silver-300</div>

Target

.bg-silver-300.bc-inherit.fc-black

Summary

Fix all of the following:

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

HTML

<div class="fc-bronze-200 bar-sm d-inline-block p6 ws-nowrap bg-bronze-400">.fc-bronze-200</div>

Target

.fc-bronze-200.bg-bronze-400.ws-nowrap

Summary

Fix all of the following:

Element has insufficient APCA custom level contrast of 56.37Lc (foreground color: #e8d4bf, background color: #8e6139, font size: 9.0pt (12px), font weight: 400). Expected minimum APCA lightness contrast of 60Lc

HTML

<div class="fc-bronze-300 bar-sm d-inline-block p6 ws-nowrap bg-bronze-400">.fc-bronze-300</div>

Target

.fc-bronze-300.bg-bronze-400.ws-nowrap

Summary

Fix all of the following:

Element has insufficient APCA custom level contrast of 30.69Lc (foreground color: #cca37f, background color: #8e6139, font size: 9.0pt (12px), font weight: 400). Expected minimum APCA lightness contrast of 60Lc

HTML

<div class="bc-inherit bg-bronze-300 bar-sm d-inline-block fc-white p6 ws-nowrap fc-black">.bg-bronze-300</div>

Target

.bg-bronze-300.bc-inherit.fc-black

Summary

Fix all of the following:

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

HTML

<div class="fc-black-350 bar-sm d-inline-block p6 ws-nowrap bg-black-600">.fc-black-350</div>

Target

.fc-black-350.bg-black-600.ws-nowrap

Summary

Fix all of the following:

Element has insufficient APCA custom level contrast of 57.22Lc (foreground color: #a7adb4, background color: #0c0d0e, font size: 9.0pt (12px), font weight: 400). Expected minimum APCA lightness contrast of 60Lc

HTML

<div class="bc-inherit bg-black-350 bar-sm d-inline-block fc-white p6 ws-nowrap fc-black">.bg-black-350</div>

Target

.bg-black-350.bc-inherit.fc-black

Summary

Fix all of the following:

Element has insufficient APCA custom level contrast of 59.34Lc (foreground color: #000000, background color: #a7adb4, font size: 9.0pt (12px), 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

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

Target

.bg-gold-300.p12.fc-black

Summary

Fix all of the following:

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

HTML

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

Target

.bg-silver-300.p12.fc-black

Summary

Fix all of the following:

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

HTML

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

Target

.bg-bronze-300.p12.fc-black

Summary

Fix all of the following:

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

HTML

<div class="p12 bg-black-350 fc-black">
                                black-350
                            </div>

Target

.bg-black-350.p12.fc-black

Summary

Fix all of the following:

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

HTML

<div class="fc-theme-primary-200 bar-sm d-inline-block p6 ws-nowrap bg-theme-primary-500">.fc-theme-primary-200</div>

Target

.fc-theme-primary-200.bg-theme-primary-500.ws-nowrap

Summary

Fix all of the following:

Element has insufficient APCA custom level contrast of 56.68Lc (foreground color: #7e502a, background color: #fac79e, font size: 9.0pt (12px), font weight: 400). Expected minimum APCA lightness contrast of 60Lc

HTML

<div class="fc-theme-primary-300 bar-sm d-inline-block p6 ws-nowrap bg-theme-primary-500">.fc-theme-primary-300</div>

Target

.fc-theme-primary-300.bg-theme-primary-500.ws-nowrap

Summary

Fix all of the following:

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

HTML

<div class="fc-theme-secondary-200 bar-sm d-inline-block p6 ws-nowrap bg-theme-secondary-500">.fc-theme-secondary-200</div>

Target

.fc-theme-secondary-200.bg-theme-secondary-500.ws-nowrap

Summary

Fix all of the following:

Element has insufficient APCA custom level contrast of 57.83Lc (foreground color: #2e5c8a, background color: #b2d6fb, font size: 9.0pt (12px), font weight: 400). Expected minimum APCA lightness contrast of 60Lc

HTML

<div class="fc-theme-secondary-300 bar-sm d-inline-block p6 ws-nowrap bg-theme-secondary-500">.fc-theme-secondary-300</div>

Target

.fc-theme-secondary-300.bg-theme-secondary-500.ws-nowrap

Summary

Fix all of the following:

Element has insufficient APCA custom level contrast of 44.86Lc (foreground color: #3d7ab8, background color: #b2d6fb, font size: 9.0pt (12px), font weight: 400). Expected minimum APCA lightness contrast of 60Lc

HTML

<div class="fc-orange-200 bar-sm d-inline-block p6 ws-nowrap bg-orange-500">.fc-orange-200</div>

Target

.fc-orange-200.bg-orange-500.ws-nowrap

Summary

Fix all of the following:

Element has insufficient APCA custom level contrast of 56.68Lc (foreground color: #7e502a, background color: #fac79e, font size: 9.0pt (12px), font weight: 400). Expected minimum APCA lightness contrast of 60Lc

HTML

<div class="fc-orange-300 bar-sm d-inline-block p6 ws-nowrap bg-orange-500">.fc-orange-300</div>

Target

.fc-orange-300.bg-orange-500.ws-nowrap

Summary

Fix all of the following:

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

HTML

<div class="fc-blue-200 bar-sm d-inline-block p6 ws-nowrap bg-blue-500">.fc-blue-200</div>

Target

.fc-blue-200.bg-blue-500.ws-nowrap

Summary

Fix all of the following:

Element has insufficient APCA custom level contrast of 57.83Lc (foreground color: #2e5c8a, background color: #b2d6fb, font size: 9.0pt (12px), font weight: 400). Expected minimum APCA lightness contrast of 60Lc

HTML

<div class="fc-blue-300 bar-sm d-inline-block p6 ws-nowrap bg-blue-500">.fc-blue-300</div>

Target

.fc-blue-300.bg-blue-500.ws-nowrap

Summary

Fix all of the following:

Element has insufficient APCA custom level contrast of 44.86Lc (foreground color: #3d7ab8, background color: #b2d6fb, font size: 9.0pt (12px), font weight: 400). Expected minimum APCA lightness contrast of 60Lc

HTML

<div class="fc-green-200 bar-sm d-inline-block p6 ws-nowrap bg-green-500">.fc-green-200</div>

Target

.fc-green-200.bg-green-500.ws-nowrap

Summary

Fix all of the following:

Element has insufficient APCA custom level contrast of 58.43Lc (foreground color: #1f603f, background color: #9cdebc, font size: 9.0pt (12px), font weight: 400). Expected minimum APCA lightness contrast of 60Lc

HTML

<div class="fc-green-300 bar-sm d-inline-block p6 ws-nowrap bg-green-500">.fc-green-300</div>

Target

.fc-green-300.bg-green-500.ws-nowrap

Summary

Fix all of the following:

Element has insufficient APCA custom level contrast of 41.63Lc (foreground color: #2d8b5a, background color: #9cdebc, font size: 9.0pt (12px), font weight: 400). Expected minimum APCA lightness contrast of 60Lc

HTML

<div class="fc-red-200 bar-sm d-inline-block p6 ws-nowrap bg-red-500">.fc-red-200</div>

Target

.fc-red-200.bg-red-500.ws-nowrap

Summary

Fix all of the following:

Element has insufficient APCA custom level contrast of 57.58Lc (foreground color: #963c3c, background color: #fcc5c5, font size: 9.0pt (12px), font weight: 400). Expected minimum APCA lightness contrast of 60Lc

HTML

<div class="fc-red-300 bar-sm d-inline-block p6 ws-nowrap bg-red-500">.fc-red-300</div>

Target

.fc-red-300.bg-red-500.ws-nowrap

Summary

Fix all of the following:

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

HTML

<div class="fc-purple-300 bar-sm d-inline-block p6 ws-nowrap bg-purple-600">.fc-purple-300</div>

Target

.fc-purple-300.bg-purple-600.ws-nowrap

Summary

Fix all of the following:

Element has insufficient APCA custom level contrast of 59.36Lc (foreground color: #7275ac, background color: #ebecff, font size: 9.0pt (12px), font weight: 400). Expected minimum APCA lightness contrast of 60Lc

HTML

<div class="fc-gold-200 bar-sm d-inline-block p6 ws-nowrap bg-gold-400">.fc-gold-200</div>

Target

.fc-gold-200.bg-gold-400.ws-nowrap

Summary

Fix all of the following:

Element has insufficient APCA custom level contrast of 55.13Lc (foreground color: #8b7532, background color: #fbe393, font size: 9.0pt (12px), font weight: 400). Expected minimum APCA lightness contrast of 60Lc

HTML

<div class="fc-gold-300 bar-sm d-inline-block p6 ws-nowrap bg-gold-400">.fc-gold-300</div>

Target

.fc-gold-300.bg-gold-400.ws-nowrap

Summary

Fix all of the following:

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

HTML

<div class="bc-inherit bg-gold-300 bar-sm d-inline-block fc-white p6 ws-nowrap fc-black">.bg-gold-300</div>

Target

.bg-gold-300.bc-inherit.fc-black

Summary

Fix all of the following:

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

HTML

<div class="fc-silver-200 bar-sm d-inline-block p6 ws-nowrap bg-silver-400">.fc-silver-200</div>

Target

.fc-silver-200.bg-silver-400.ws-nowrap

Summary

Fix all of the following:

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

HTML

<div class="fc-silver-300 bar-sm d-inline-block p6 ws-nowrap bg-silver-400">.fc-silver-300</div>

Target

.fc-silver-300.bg-silver-400.ws-nowrap

Summary

Fix all of the following:

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

HTML

<div class="bc-inherit bg-silver-300 bar-sm d-inline-block fc-white p6 ws-nowrap fc-black">.bg-silver-300</div>

Target

.bg-silver-300.bc-inherit.fc-black

Summary

Fix all of the following:

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

HTML

<div class="fc-bronze-200 bar-sm d-inline-block p6 ws-nowrap bg-bronze-400">.fc-bronze-200</div>

Target

.fc-bronze-200.bg-bronze-400.ws-nowrap

Summary

Fix all of the following:

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

HTML

<div class="fc-bronze-300 bar-sm d-inline-block p6 ws-nowrap bg-bronze-400">.fc-bronze-300</div>

Target

.fc-bronze-300.bg-bronze-400.ws-nowrap

Summary

Fix all of the following:

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

HTML

<div class="bc-inherit bg-bronze-300 bar-sm d-inline-block fc-white p6 ws-nowrap fc-black">.bg-bronze-300</div>

Target

.bg-bronze-300.bc-inherit.fc-black

Summary

Fix all of the following:

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

HTML

<div class="fc-black-350 bar-sm d-inline-block p6 ws-nowrap bg-black-600">.fc-black-350</div>

Target

.fc-black-350.bg-black-600.ws-nowrap

Summary

Fix all of the following:

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

HTML

<div class="bc-inherit bg-black-350 bar-sm d-inline-block fc-white p6 ws-nowrap fc-black">.bg-black-350</div>

Target

.bg-black-350.bc-inherit.fc-black

Summary

Fix all of the following:

Element has insufficient APCA custom level contrast of 46.24Lc (foreground color: #ffffff, background color: #acb3b9, font size: 9.0pt (12px), 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

.bg-theme-primary-300.p12.fc-black

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.p12.fc-black

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-orange-300 fc-black">
                                orange-300
                            </div>

Target

.bg-orange-300.p12.fc-black

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-blue-300 fc-black">
                                blue-300
                            </div>

Target

.bg-blue-300.p12.fc-black

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-green-300 fc-black">
                                green-300
                            </div>

Target

.bg-green-300.p12.fc-black

Summary

Fix any of the following:

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

HTML

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

Target

.bg-purple-400.p12.fc-white

Summary

Fix any of the following:

Element has insufficient color contrast of 5.56 (foreground color: #ffffff, background color: #555bce, font size: 9.8pt (13px), font weight: normal). Expected contrast ratio of 7:1

HTML

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

Target

.bg-gold-400.p12.fc-white

Summary

Fix any of the following:

Element has insufficient color contrast of 5.69 (foreground color: #ffffff, background color: #7f6305, font size: 9.8pt (13px), font weight: normal). Expected contrast ratio of 7:1

HTML

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

Target

.bg-silver-400.p12.fc-white

Summary

Fix any of the following:

Element has insufficient color contrast of 5.76 (foreground color: #ffffff, background color: #646668, font size: 9.8pt (13px), font weight: normal). Expected contrast ratio of 7:1

HTML

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

Target

.bg-bronze-400.p12.fc-white

Summary

Fix any of the following:

Element has insufficient color contrast of 5.35 (foreground color: #ffffff, background color: #8e6139, font size: 9.8pt (13px), font weight: normal). Expected contrast ratio of 7:1

HTML

<div class="bc-inherit bg-theme-primary-300 bar-sm d-inline-block fc-white p6 ws-nowrap fc-black">.bg-theme-primary-300</div>

Target

.bg-theme-primary-300.bc-inherit.fc-black

Summary

Fix any of the following:

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

HTML

<div class="bc-inherit bg-theme-secondary-300 bar-sm d-inline-block fc-white p6 ws-nowrap fc-black">.bg-theme-secondary-300</div>

Target

.bg-theme-secondary-300.bc-inherit.fc-black

Summary

Fix any of the following:

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

HTML

<div class="bc-inherit bg-orange-300 bar-sm d-inline-block fc-white p6 ws-nowrap fc-black">.bg-orange-300</div>

Target

.bg-orange-300.bc-inherit.fc-black

Summary

Fix any of the following:

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

HTML

<div class="bc-inherit bg-blue-300 bar-sm d-inline-block fc-white p6 ws-nowrap fc-black">.bg-blue-300</div>

Target

.bg-blue-300.bc-inherit.fc-black

Summary

Fix any of the following:

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

HTML

<div class="bc-inherit bg-green-300 bar-sm d-inline-block fc-white p6 ws-nowrap fc-black">.bg-green-300</div>

Target

.bg-green-300.bc-inherit.fc-black

Summary

Fix any of the following:

Element has insufficient color contrast of 4.55 (foreground color: #000000, background color: #18864b, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 7:1

HTML

<div class="fc-yellow-300 bar-sm d-inline-block p6 ws-nowrap bg-yellow-600">.fc-yellow-300</div>

Target

.fc-yellow-300.bg-yellow-600.ws-nowrap

Summary

Fix any of the following:

Element has insufficient color contrast of 4.74 (foreground color: #ecae13, background color: #554507, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 7:1

HTML

<div class="fc-purple-400 bar-sm d-inline-block p6 ws-nowrap bg-white">.fc-purple-400</div>

Target

.fc-purple-400.bg-white.ws-nowrap

Summary

Fix any of the following:

Element has insufficient color contrast of 5.56 (foreground color: #555bce, background color: #ffffff, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 7:1

HTML

<div class="bc-inherit bg-purple-400 bar-sm d-inline-block fc-white p6 ws-nowrap fc-white">.bg-purple-400</div>

Target

.bg-purple-400.bc-inherit.fc-white

Summary

Fix any of the following:

Element has insufficient color contrast of 5.56 (foreground color: #ffffff, background color: #555bce, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 7:1

HTML

<div class="fc-gold-100 bar-sm d-inline-block p6 ws-nowrap bg-gold-400">.fc-gold-100</div>

Target

.fc-gold-100.bg-gold-400.ws-nowrap

Summary

Fix any of the following:

Element has insufficient color contrast of 5.18 (foreground color: #fff4d1, background color: #7f6305, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 7:1

HTML

<div class="bc-gold-100 ba d-inline-block p6">.bc-gold-100</div>

Target

.bc-gold-100

Summary

Fix any of the following:

Element has insufficient color contrast of 5.69 (foreground color: #ffffff, background color: #7f6305, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 7:1

HTML

<div class="fc-gold-200 bar-sm d-inline-block p6 ws-nowrap bg-gold-400">.fc-gold-200</div>

Target

.fc-gold-200.bg-gold-400.ws-nowrap

Summary

Fix any of the following:

Element has insufficient color contrast of 5.18 (foreground color: #fff4d1, background color: #7f6305, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 7:1

HTML

<div class="bc-gold-200 ba d-inline-block p6">.bc-gold-200</div>

Target

.bc-gold-200

Summary

Fix any of the following:

Element has insufficient color contrast of 5.69 (foreground color: #ffffff, background color: #7f6305, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 7:1

HTML

<div class="bc-gold-300 ba d-inline-block p6">.bc-gold-300</div>

Target

.bc-gold-300

Summary

Fix any of the following:

Element has insufficient color contrast of 5.69 (foreground color: #ffffff, background color: #7f6305, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 7:1

HTML

<div class="fc-gold-400 bar-sm d-inline-block p6 ws-nowrap bg-white">.fc-gold-400</div>

Target

.fc-gold-400.bg-white.ws-nowrap

Summary

Fix any of the following:

Element has insufficient color contrast of 5.69 (foreground color: #7f6305, background color: #ffffff, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 7:1

HTML

<div class="bc-inherit bg-gold-400 bar-sm d-inline-block fc-white p6 ws-nowrap fc-white">.bg-gold-400</div>

Target

.bg-gold-400.bc-inherit.fc-white

Summary

Fix any of the following:

Element has insufficient color contrast of 5.69 (foreground color: #ffffff, background color: #7f6305, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 7:1

HTML

<div class="fc-silver-100 bar-sm d-inline-block p6 ws-nowrap bg-silver-400">.fc-silver-100</div>

Target

.fc-silver-100.bg-silver-400.ws-nowrap

Summary

Fix any of the following:

Element has insufficient color contrast of 5.15 (foreground color: #f2f2f2, background color: #646668, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 7:1

HTML

<div class="bc-silver-100 ba d-inline-block p6">.bc-silver-100</div>

Target

.bc-silver-100

Summary

Fix any of the following:

Element has insufficient color contrast of 5.76 (foreground color: #ffffff, background color: #646668, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 7:1

HTML

<div class="fc-silver-200 bar-sm d-inline-block p6 ws-nowrap bg-silver-400">.fc-silver-200</div>

Target

.fc-silver-200.bg-silver-400.ws-nowrap

Summary

Fix any of the following:

Element has insufficient color contrast of 5.15 (foreground color: #f2f2f2, background color: #646668, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 7:1

HTML

<div class="bc-silver-200 ba d-inline-block p6">.bc-silver-200</div>

Target

.bc-silver-200

Summary

Fix any of the following:

Element has insufficient color contrast of 5.76 (foreground color: #ffffff, background color: #646668, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 7:1

HTML

<div class="bc-silver-300 ba d-inline-block p6">.bc-silver-300</div>

Target

.bc-silver-300

Summary

Fix any of the following:

Element has insufficient color contrast of 5.76 (foreground color: #ffffff, background color: #646668, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 7:1

HTML

<div class="fc-silver-400 bar-sm d-inline-block p6 ws-nowrap bg-white">.fc-silver-400</div>

Target

.fc-silver-400.bg-white.ws-nowrap

Summary

Fix any of the following:

Element has insufficient color contrast of 5.76 (foreground color: #646668, background color: #ffffff, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 7:1

HTML

<div class="bc-inherit bg-silver-400 bar-sm d-inline-block fc-white p6 ws-nowrap fc-white">.bg-silver-400</div>

Target

.bg-silver-400.bc-inherit.fc-white

Summary

Fix any of the following:

Element has insufficient color contrast of 5.76 (foreground color: #ffffff, background color: #646668, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 7:1

HTML

<div class="fc-bronze-100 bar-sm d-inline-block p6 ws-nowrap bg-bronze-400">.fc-bronze-100</div>

Target

.fc-bronze-100.bg-bronze-400.ws-nowrap

Summary

Fix any of the following:

Element has insufficient color contrast of 4.51 (foreground color: #f3eae2, background color: #8e6139, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 7:1

HTML

<div class="bc-bronze-100 ba d-inline-block p6">.bc-bronze-100</div>

Target

.bc-bronze-100

Summary

Fix any of the following:

Element has insufficient color contrast of 5.35 (foreground color: #ffffff, background color: #8e6139, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 7:1

HTML

<div class="fc-bronze-200 bar-sm d-inline-block p6 ws-nowrap bg-bronze-400">.fc-bronze-200</div>

Target

.fc-bronze-200.bg-bronze-400.ws-nowrap

Summary

Fix any of the following:

Element has insufficient color contrast of 4.51 (foreground color: #f3eae2, background color: #8e6139, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 7:1

HTML

<div class="bc-bronze-200 ba d-inline-block p6">.bc-bronze-200</div>

Target

.bc-bronze-200

Summary

Fix any of the following:

Element has insufficient color contrast of 5.35 (foreground color: #ffffff, background color: #8e6139, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 7:1

HTML

<div class="bc-bronze-300 ba d-inline-block p6">.bc-bronze-300</div>

Target

.bc-bronze-300

Summary

Fix any of the following:

Element has insufficient color contrast of 5.35 (foreground color: #ffffff, background color: #8e6139, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 7:1

HTML

<div class="fc-bronze-400 bar-sm d-inline-block p6 ws-nowrap bg-white">.fc-bronze-400</div>

Target

.fc-bronze-400.bg-white.ws-nowrap

Summary

Fix any of the following:

Element has insufficient color contrast of 5.35 (foreground color: #8e6139, background color: #ffffff, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 7:1

HTML

<div class="bc-inherit bg-bronze-400 bar-sm d-inline-block fc-white p6 ws-nowrap fc-white">.bg-bronze-400</div>

Target

.bg-bronze-400.bc-inherit.fc-white

Summary

Fix any of the following:

Element has insufficient color contrast of 5.35 (foreground color: #ffffff, background color: #8e6139, font size: 9.0pt (12px), 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="p12 bg-black-250 fc-black">
                                black-250
                            </div>

Target

.bg-black-250.p12.fc-black

Summary

Fix any of the following:

Element has insufficient color contrast of 6.76 (foreground color: #ffffff, background color: #575c60, font size: 9.8pt (13px), font weight: normal). Expected contrast ratio of 7:1

HTML

<div class="fc-silver-100 bar-sm d-inline-block p6 ws-nowrap bg-silver-400">.fc-silver-100</div>

Target

.fc-silver-100.bg-silver-400.ws-nowrap

Summary

Fix any of the following:

Element has insufficient color contrast of 6.69 (foreground color: #414244, background color: #d0d3d7, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 7:1

HTML

<div class="fc-silver-200 bar-sm d-inline-block p6 ws-nowrap bg-silver-400">.fc-silver-200</div>

Target

.fc-silver-200.bg-silver-400.ws-nowrap

Summary

Fix any of the following:

Element has insufficient color contrast of 6.69 (foreground color: #414244, background color: #d0d3d7, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 7:1

HTML

<div class="fc-bronze-100 bar-sm d-inline-block p6 ws-nowrap bg-bronze-400">.fc-bronze-100</div>

Target

.fc-bronze-100.bg-bronze-400.ws-nowrap

Summary

Fix any of the following:

Element has insufficient color contrast of 6.55 (foreground color: #4e443c, background color: #edd2ba, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 7:1

HTML

<div class="fc-bronze-200 bar-sm d-inline-block p6 ws-nowrap bg-bronze-400">.fc-bronze-200</div>

Target

.fc-bronze-200.bg-bronze-400.ws-nowrap

Summary

Fix any of the following:

Element has insufficient color contrast of 6.55 (foreground color: #4e443c, background color: #edd2ba, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 7:1

HTML

<div class="fc-black-250 bar-sm d-inline-block p6 ws-nowrap bg-black-600">.fc-black-250</div>

Target

.fc-black-250.bg-black-600.ws-nowrap

Summary

Fix any of the following:

Element has insufficient color contrast of 6.46 (foreground color: #575c60, background color: #f9fafa, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 7:1

HTML

<div class="bc-inherit bg-black-250 bar-sm d-inline-block fc-white p6 ws-nowrap fc-black">.bg-black-250</div>

Target

.bg-black-250.bc-inherit.fc-black

Summary

Fix any of the following:

Element has insufficient color contrast of 6.76 (foreground color: #ffffff, background color: #575c60, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 7:1