system/foundation/colors

ID:: system/foundation/colors
Automated score:: 91.7
URL:: https://stackoverflow.design/system/foundation/colors

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="p12 bg-theme-primary-100 fc-theme-primary-400">
                                theme-primary-100
                            </div>

Target

.bg-theme-primary-100.fc-theme-primary-400.p12

Summary

Fix all of the following:

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

HTML

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

Target

.bg-theme-primary-200.fc-theme-primary-500.p12

Summary

Fix all of the following:

Element has insufficient APCA custom level contrast of 54.12Lc (foreground color: #bf4904, background color: #ffd5bd, 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

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

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

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-orange-100 fc-orange-400">
                                orange-100
                            </div>

Target

.bg-orange-100.fc-orange-400.p12

Summary

Fix all of the following:

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

HTML

<div class="p12 bg-orange-200 fc-orange-500">
                                orange-200
                            </div>

Target

.bg-orange-200.fc-orange-500.p12

Summary

Fix all of the following:

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

HTML

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

Target

.bg-orange-300.p12.fc-white

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

Target

.bg-blue-300.p12.fc-white

Summary

Fix all of the following:

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

HTML

<div class="p12 bg-green-100 fc-green-400">
                                green-100
                            </div>

Target

.bg-green-100.fc-green-400.p12

Summary

Fix all of the following:

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

HTML

<div class="p12 bg-green-200 fc-green-500">
                                green-200
                            </div>

Target

.bg-green-200.fc-green-500.p12

Summary

Fix all of the following:

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

HTML

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

Target

.bg-green-300.p12.fc-white

Summary

Fix all of the following:

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

HTML

<div class="p12 bg-red-200 fc-red-500">
                                red-200
                            </div>

Target

.bg-red-200.fc-red-500.p12

Summary

Fix all of the following:

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

HTML

<div class="p12 bg-yellow-100 fc-yellow-400">
                                yellow-100
                            </div>

Target

.bg-yellow-100.fc-yellow-400.p12

Summary

Fix all of the following:

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

HTML

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

Target

.bg-yellow-300.p12.fc-white

Summary

Fix all of the following:

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

HTML

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

Target

.bg-purple-300.p12.fc-white

Summary

Fix all of the following:

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

HTML

<div class="p12 bg-pink-100 fc-pink-400">
                                pink-100
                            </div>

Target

.bg-pink-100.fc-pink-400.p12

Summary

Fix all of the following:

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

HTML

<div class="p12 bg-pink-200 fc-pink-500">
                                pink-200
                            </div>

Target

.bg-pink-200.fc-pink-500.p12

Summary

Fix all of the following:

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

HTML

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

Target

.bg-pink-300.p12.fc-white

Summary

Fix all of the following:

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

HTML

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

Target

.bg-black-300.p12.fc-white

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 fc-black bg-brand">
                            brand
                        </div>

Target

.bg-brand

Summary

Fix all of the following:

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

HTML

<div class="p12 fc-black bg-brand-brown-light">
                            brand-brown-light
                        </div>

Target

.bg-brand-brown-light

Summary

Fix all of the following:

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

HTML

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

Target

.bg-brand-green

Summary

Fix all of the following:

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

HTML

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

Target

.bg-brand-purple

Summary

Fix all of the following:

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

HTML

<div class="fc-theme-primary-200 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 57.63Lc (foreground color: #ffd5bd, background color: #bf4904, font size: 9.8pt (13px), font weight: 300). Expected minimum APCA lightness contrast of 60Lc

HTML

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

Target

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

Summary

Fix all of the following:

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

HTML

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

Target

.bg-theme-primary-300.bc-inherit.ws-nowrap

Summary

Fix all of the following:

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

HTML

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

Target

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

Summary

Fix all of the following:

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

HTML

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

Target

.bg-theme-secondary-300.bc-inherit.ws-nowrap

Summary

Fix all of the following:

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

HTML

<div class="fc-orange-200 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 57.63Lc (foreground color: #ffd5bd, background color: #bf4904, font size: 9.8pt (13px), font weight: 300). Expected minimum APCA lightness contrast of 60Lc

HTML

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

Target

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

Summary

Fix all of the following:

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

HTML

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

Target

.bg-orange-300.bc-inherit.ws-nowrap

Summary

Fix all of the following:

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

HTML

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

Target

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

Summary

Fix all of the following:

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

HTML

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

Target

.bg-blue-300.bc-inherit.ws-nowrap

Summary

Fix all of the following:

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

HTML

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

Target

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

Summary

Fix all of the following:

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

HTML

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

Target

.bg-green-300.bc-inherit.ws-nowrap

Summary

Fix all of the following:

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

HTML

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

Target

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

Summary

Fix all of the following:

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

HTML

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

Target

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

Summary

Fix all of the following:

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

HTML

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

Target

.bg-yellow-300.bc-inherit.ws-nowrap

Summary

Fix all of the following:

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

HTML

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

Target

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

Summary

Fix all of the following:

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

HTML

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

Target

.bg-purple-300.bc-inherit.ws-nowrap

Summary

Fix all of the following:

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

HTML

<div class="fc-pink-300 d-inline-block p6 ws-nowrap bg-white">.fc-pink-300</div>

Target

.fc-pink-300.bg-white.ws-nowrap

Summary

Fix all of the following:

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

HTML

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

Target

.bg-pink-300.bc-inherit.ws-nowrap

Summary

Fix all of the following:

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

HTML

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

Target

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

Summary

Fix all of the following:

Element has insufficient APCA custom level contrast of 54.3Lc (foreground color: #a7aab0, background color: #211d1e, font size: 9.8pt (13px), font weight: 300). Expected minimum APCA lightness contrast of 60Lc

HTML

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

Target

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

Summary

Fix all of the following:

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

HTML

<div class="fc-black-350 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 36.17Lc (foreground color: #84878c, background color: #211d1e, font size: 9.8pt (13px), font weight: 300). Expected minimum APCA lightness contrast of 60Lc

HTML

<div class="bc-inherit bg-black-350 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 40.41Lc (foreground color: #000000, background color: #84878c, 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="p12 bg-theme-primary-300 fc-white">
                                theme-primary-300
                            </div>

Target

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

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

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

Target

.bg-orange-300.p12.fc-white

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

Target

.bg-blue-300.p12.fc-white

Summary

Fix all of the following:

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

HTML

<div class="p12 bg-green-200 fc-green-500">
                                green-200
                            </div>

Target

.bg-green-200.fc-green-500.p12

Summary

Fix all of the following:

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

HTML

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

Target

.bg-green-300.p12.fc-white

Summary

Fix all of the following:

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

HTML

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

Target

.bg-red-300.p12.fc-white

Summary

Fix all of the following:

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

HTML

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

Target

.bg-yellow-300.p12.fc-white

Summary

Fix all of the following:

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

HTML

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

Target

.bg-purple-100.fc-purple-400.p12

Summary

Fix all of the following:

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

HTML

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

Target

.bg-purple-300.p12.fc-white

Summary

Fix all of the following:

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

HTML

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

Target

.bg-pink-300.p12.fc-white

Summary

Fix all of the following:

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

HTML

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

Target

.bg-black-300.p12.fc-white

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-black-350 fc-white">
                                black-350
                            </div>

Target

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

Summary

Fix all of the following:

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

HTML

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

Target

.bg-brand

Summary

Fix all of the following:

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

HTML

<div class="p12 fc-black bg-brand-brown-light">
                            brand-brown-light
                        </div>

Target

.bg-brand-brown-light

Summary

Fix all of the following:

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

HTML

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

Target

.bg-brand-green

Summary

Fix all of the following:

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

HTML

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

Target

.bg-brand-purple

Summary

Fix all of the following:

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

HTML

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

Target

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

Summary

Fix all of the following:

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

HTML

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

Target

.bg-theme-primary-300.bc-inherit.ws-nowrap

Summary

Fix all of the following:

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

HTML

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

Target

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

Summary

Fix all of the following:

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

HTML

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

Target

.bg-theme-secondary-300.bc-inherit.ws-nowrap

Summary

Fix all of the following:

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

HTML

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

Target

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

Summary

Fix all of the following:

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

HTML

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

Target

.bg-orange-300.bc-inherit.ws-nowrap

Summary

Fix all of the following:

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

HTML

<div class="fc-blue-200 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 58.14Lc (foreground color: #4d6699, background color: #ccddff, font size: 9.8pt (13px), font weight: 300). Expected minimum APCA lightness contrast of 60Lc

HTML

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

Target

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

Summary

Fix all of the following:

Element has insufficient APCA custom level contrast of 48.64Lc (foreground color: #7b9de0, background color: #141414, font size: 9.8pt (13px), font weight: 300). Expected minimum APCA lightness contrast of 60Lc

HTML

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

Target

.bg-blue-300.bc-inherit.ws-nowrap

Summary

Fix all of the following:

Element has insufficient APCA custom level contrast of 50.56Lc (foreground color: #141414, background color: #7b9de0, font size: 9.8pt (13px), font weight: 300). Expected minimum APCA lightness contrast of 60Lc

HTML

<div class="fc-green-200 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 56.19Lc (foreground color: #5c7334, background color: #cce6a1, font size: 9.8pt (13px), font weight: 300). Expected minimum APCA lightness contrast of 60Lc

HTML

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

Target

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

Summary

Fix all of the following:

Element has insufficient APCA custom level contrast of 55Lc (foreground color: #96b364, background color: #141414, font size: 9.8pt (13px), font weight: 300). Expected minimum APCA lightness contrast of 60Lc

HTML

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

Target

.bg-green-300.bc-inherit.ws-nowrap

Summary

Fix all of the following:

Element has insufficient APCA custom level contrast of 56.68Lc (foreground color: #141414, background color: #96b364, font size: 9.8pt (13px), font weight: 300). Expected minimum APCA lightness contrast of 60Lc

HTML

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

Target

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

Summary

Fix all of the following:

Element has insufficient APCA custom level contrast of 29.88Lc (foreground color: #b35d5d, background color: #141414, font size: 9.8pt (13px), font weight: 300). Expected minimum APCA lightness contrast of 60Lc

HTML

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

Target

.bg-red-300.bc-inherit.ws-nowrap

Summary

Fix all of the following:

Element has insufficient APCA custom level contrast of 32.04Lc (foreground color: #141414, background color: #b35d5d, font size: 9.8pt (13px), font weight: 300). Expected minimum APCA lightness contrast of 60Lc

HTML

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

Target

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

Summary

Fix all of the following:

Element has insufficient APCA custom level contrast of 44.18Lc (foreground color: #a6944b, background color: #141414, font size: 9.8pt (13px), font weight: 300). Expected minimum APCA lightness contrast of 60Lc

HTML

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

Target

.bg-yellow-300.bc-inherit.ws-nowrap

Summary

Fix all of the following:

Element has insufficient APCA custom level contrast of 46.22Lc (foreground color: #141414, background color: #a6944b, font size: 9.8pt (13px), font weight: 300). Expected minimum APCA lightness contrast of 60Lc

HTML

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

Target

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

Summary

Fix all of the following:

Element has insufficient APCA custom level contrast of 25.89Lc (foreground color: #7262b3, background color: #141414, font size: 9.8pt (13px), font weight: 300). Expected minimum APCA lightness contrast of 60Lc

HTML

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

Target

.bg-purple-300.bc-inherit.ws-nowrap

Summary

Fix all of the following:

Element has insufficient APCA custom level contrast of 28.01Lc (foreground color: #141414, background color: #7262b3, font size: 9.8pt (13px), font weight: 300). Expected minimum APCA lightness contrast of 60Lc

HTML

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

Target

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

Summary

Fix all of the following:

Element has insufficient APCA custom level contrast of 59.41Lc (foreground color: #b6a6f7, background color: #141414, font size: 9.8pt (13px), font weight: 300). Expected minimum APCA lightness contrast of 60Lc

HTML

<div class="fc-pink-300 d-inline-block p6 ws-nowrap bg-white">.fc-pink-300</div>

Target

.fc-pink-300.bg-white.ws-nowrap

Summary

Fix all of the following:

Element has insufficient APCA custom level contrast of 45.55Lc (foreground color: #bf81c7, background color: #141414, font size: 9.8pt (13px), font weight: 300). Expected minimum APCA lightness contrast of 60Lc

HTML

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

Target

.bg-pink-300.bc-inherit.ws-nowrap

Summary

Fix all of the following:

Element has insufficient APCA custom level contrast of 47.55Lc (foreground color: #141414, background color: #bf81c7, font size: 9.8pt (13px), font weight: 300). Expected minimum APCA lightness contrast of 60Lc

HTML

<div class="fc-black-350 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 47.93Lc (foreground color: #a6a6a6, background color: #ffffff, font size: 9.8pt (13px), font weight: 300). Expected minimum APCA lightness contrast of 60Lc

HTML

<div class="bc-inherit bg-black-350 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 52.95Lc (foreground color: #ffffff, background color: #a6a6a6, 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="p12 bg-theme-primary fc-theme-primary-100">
                                theme-primary
                            </div>

Target

.bg-theme-primary.fc-theme-primary-100.p12

Summary

Fix any of the following:

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

HTML

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

Target

.bg-theme-primary-100.fc-theme-primary-400.p12

Summary

Fix any of the following:

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

HTML

<div class="p12 bg-orange-100 fc-orange-400">
                                orange-100
                            </div>

Target

.bg-orange-100.fc-orange-400.p12

Summary

Fix any of the following:

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

HTML

<div class="p12 bg-green-100 fc-green-400">
                                green-100
                            </div>

Target

.bg-green-100.fc-green-400.p12

Summary

Fix any of the following:

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

HTML

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

Target

.bg-red-300.p12.fc-white

Summary

Fix any of the following:

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

HTML

<div class="p12 bg-yellow-100 fc-yellow-400">
                                yellow-100
                            </div>

Target

.bg-yellow-100.fc-yellow-400.p12

Summary

Fix any of the following:

Element has insufficient color contrast of 6.67 (foreground color: #6b5600, background color: #fcf8e8, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 7:1

HTML

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

Target

.bg-purple-300.p12.fc-white

Summary

Fix any of the following:

Element has insufficient color contrast of 5.31 (foreground color: #ffffff, background color: #6e50e6, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 7:1

HTML

<div class="p12 bg-pink-100 fc-pink-400">
                                pink-100
                            </div>

Target

.bg-pink-100.fc-pink-400.p12

Summary

Fix any of the following:

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

HTML

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

Target

.bg-brand

Summary

Fix any of the following:

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

HTML

<div class="p12 fc-black bg-brand-brown-light">
                            brand-brown-light
                        </div>

Target

.bg-brand-brown-light

Summary

Fix any of the following:

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

HTML

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

Target

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

Summary

Fix any of the following:

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

HTML

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

Target

.bg-red-300.bc-inherit.ws-nowrap

Summary

Fix any of the following:

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

HTML

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

Target

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

Summary

Fix any of the following:

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

HTML

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

Target

.bg-purple-300.bc-inherit.ws-nowrap

Summary

Fix any of the following:

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

HTML

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

Target

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

Summary

Fix any of the following:

Element has insufficient color contrast of 5.44 (foreground color: #91939c, background color: #211d1e, font size: 9.8pt (13px), font weight: normal). Expected contrast ratio of 7:1

HTML

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

Target

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

Summary

Fix any of the following:

Element has insufficient color contrast of 6.85 (foreground color: #000000, background color: #91939c, font size: 9.8pt (13px), 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-theme-secondary-200 fc-theme-secondary-500">
                                theme-secondary-200
                            </div>

Target

.bg-theme-secondary-200.fc-theme-secondary-500.p12

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="p12 bg-theme-secondary-300 fc-white">
                                theme-secondary-300
                            </div>

Target

.bg-theme-secondary-300.p12.fc-white

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

HTML

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

Target

.bg-black-200.fc-black-500.p12

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="p12 bg-black-225 fc-black-600">
                                black-225
                            </div>

Target

.bg-black-225.fc-black-600.p12

Summary

Fix any of the following:

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

HTML

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

Target

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

Summary

Fix any of the following:

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

HTML

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

Target

.bg-black-300.p12.fc-white

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

HTML

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

Target

.bg-brand

Summary

Fix any of the following:

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

HTML

<div class="p12 fc-black bg-brand-brown-light">
                            brand-brown-light
                        </div>

Target

.bg-brand-brown-light

Summary

Fix any of the following:

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

HTML

<div class="fc-theme-secondary-200 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 any of the following:

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

HTML

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

Target

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

Summary

Fix any of the following:

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

HTML

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

Target

.bg-theme-secondary-300.bc-inherit.ws-nowrap

Summary

Fix any of the following:

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

HTML

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

Target

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

Summary

Fix any of the following:

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

HTML

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

Target

.bg-black-225.bc-inherit.fc-black

Summary

Fix any of the following:

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

HTML

<div class="fc-black-250 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 4.74 (foreground color: #737373, background color: #ffffff, font size: 9.8pt (13px), font weight: normal). Expected contrast ratio of 7:1

HTML

<div class="bc-inherit bg-black-250 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 4.74 (foreground color: #ffffff, background color: #737373, font size: 9.8pt (13px), font weight: normal). Expected contrast ratio of 7:1