product/foundation/color-fundamentals

ID:
product/foundation/color-fundamentals
Automated score:
96.7
URL:
https://stackoverflow.design/product/foundation/color-fundamentals
View JSON file

4 violations: Light: 1 Dark: 1 HC Light: 1 HC Dark: 1

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 57.31Lc (foreground color: #3b4045, background color: #babfc5, font size: 11.3pt (15px), font weight: 400). 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 47.62Lc (foreground color: #3b4045, background color: #a7adb4, font size: 11.3pt (15px), font weight: 400). Expected minimum APCA lightness contrast of 60Lc

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 59.89Lc (foreground color: #e3e6e8, background color: #73787d, font size: 11.3pt (15px), font weight: 400). 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 29.7Lc (foreground color: #e3e6e8, background color: #acb3b9, font size: 11.3pt (15px), font weight: 400). Expected minimum APCA lightness contrast of 60Lc

HTML

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

Target

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

Summary

Fix all of the following:

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

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="ta-center w100">Default background color</div>

Target

.mb8 > .ta-center.w100

Summary

Fix any of the following:

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

HTML

<div class="ta-center w100">Background layers</div>

Target

.fc-light.fs-italic.overflow-visible:nth-child(3) > .ta-center.w100

Summary

Fix any of the following:

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

HTML

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

Target

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

Summary

Fix any of the following:

  • Element has insufficient color contrast of 5.65 (foreground color: #3b4045, background color: #babfc5, font size: 11.3pt (15px), font weight: normal). Expected contrast ratio of 7:1

HTML

<div class="ta-center w100">Decorative borders</div>

Target

section:nth-child(6) > .p32.bar-lg.bg-black-100 > .w100.d-flex > .fc-light.fs-italic.overflow-visible:nth-child(1) > .ta-center.w100

Summary

Fix any of the following:

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

HTML

<div class="ta-center w100">Input borders</div>

Target

section:nth-child(6) > .p32.bar-lg.bg-black-100 > .w100.d-flex > .mx-auto.fc-light.fs-italic > .ta-center.w100

Summary

Fix any of the following:

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

HTML

<div class="ta-center w100">Text</div>

Target

section:nth-child(7) > .p32.bar-lg.bg-black-100 > .w100.d-flex > .fc-light.fs-italic.overflow-visible:nth-child(1) > .ta-center.w100

Summary

Fix any of the following:

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

HTML

<div class="ta-center w100">Heading</div>

Target

section:nth-child(7) > .p32.bar-lg.bg-black-100 > .w100.d-flex > .mx-auto.fc-light.fs-italic > .ta-center.w100

Summary

Fix any of the following:

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

HTML

<div class="ta-center w100">Illustrations</div>

Target

section:nth-child(8) > .p32.bar-lg.bg-black-100 > .w100.d-flex > .mx-auto.fc-light.fs-italic > .ta-center.w100

Summary

Fix any of the following:

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

HTML

<div class="ta-center w100">Icons</div>

Target

section:nth-child(8) > .p32.bar-lg.bg-black-100 > .w100.d-flex > .fc-light.fs-italic.overflow-visible:nth-child(2) > .ta-center.w100

Summary

Fix any of the following:

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

HTML

<div class="ta-center w100">Bold</div>

Target

.md\:grid__2 > div:nth-child(1) > .fc-light.fs-italic.overflow-visible > .ta-center.w100

Summary

Fix any of the following:

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

HTML

<div class="ta-center w100">Default</div>

Target

.md\:grid__2 > div:nth-child(2) > .fc-light.fs-italic.overflow-visible > .ta-center.w100

Summary

Fix any of the following:

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

HTML

<div class="ta-center w100">Subtle</div>

Target

.md\:grid__2 > div:nth-child(3) > .fc-light.fs-italic.overflow-visible > .ta-center.w100

Summary

Fix any of the following:

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

HTML

<div class="ta-center w100">Bold</div>

Target

.gx16.gy32.d-grid:nth-child(2) > .ta-center:nth-child(1) > .mx-auto.fc-light.fs-italic > .ta-center.w100

Summary

Fix any of the following:

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

HTML

<div class="ta-center w100">Default</div>

Target

.gx16.gy32.d-grid:nth-child(2) > .ta-center:nth-child(2) > .mx-auto.fc-light.fs-italic > .ta-center.w100

Summary

Fix any of the following:

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

HTML

<div class="fs-title fc-black-400">Text</div>

Target

.fc-black-400

Summary

Fix any of the following:

  • Element has insufficient color contrast of 6.79 (foreground color: #525960, background color: #f9fafa, font size: 15.8pt (21px), font weight: normal). Expected contrast ratio of 7:1

HTML

<div class="ta-center w100">Subtle</div>

Target

.gx16.gy32.d-grid:nth-child(2) > .ta-center:nth-child(3) > .mx-auto.fc-light.fs-italic > .ta-center.w100

Summary

Fix any of the following:

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

HTML

<div class="ta-center w100">Default</div>

Target

.ta-center.w100:nth-child(1) > .mx-auto.fc-light.fs-italic > .ta-center.w100

Summary

Fix any of the following:

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

HTML

<div class="ta-center w100">Hover</div>

Target

.ta-center.w100:nth-child(2) > .mx-auto.fc-light.fs-italic > .ta-center.w100

Summary

Fix any of the following:

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

HTML

<div class="ta-center w100">Selected</div>

Target

.ta-center.w100:nth-child(3) > .mx-auto.fc-light.fs-italic > .ta-center.w100

Summary

Fix any of the following:

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

HTML

<div class="ta-center w100">Disabled</div>

Target

.ta-center.w100:nth-child(4) > .mx-auto.fc-light.fs-italic > .ta-center.w100

Summary

Fix any of the following:

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

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.8 (foreground color: #e3e6e8, background color: #494d50, font size: 11.3pt (15px), font weight: normal). Expected contrast ratio of 7:1