system/foundation/colors

ID:
system/foundation/colors
Automated score:
95.8
URL:
https://stackoverflow.design/system/foundation/colors
View JSON file

4 violations: Light: 1Dark: 1HC Light: 1HC 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="p12 bg-theme-primary-100 fc-theme-primary-400">theme-primary-100</div>

Target

.bg-theme-primary-100

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

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

Summary

Fix all of the following:

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

HTML

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

Target

.bg-theme-secondary-300

Summary

Fix all of the following:

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

HTML

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

Target

.bg-orange-100

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Summary

Fix all of the following:

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

HTML

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

Target

.bg-theme-secondary-300

Summary

Fix all of the following:

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

HTML

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

Target

.bg-orange-300

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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