system/base/opacity

ID:
system/base/opacity
Automated score:
96.2
URL:
https://stackoverflow.design/system/base/opacity
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="o5 bg-black-200 p12 ba bc-black-225">.o5</div>

Target

.o5

Summary

Fix all of the following:

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

HTML

<div class="o10 bg-black-200 p12 ba bc-black-225">.o10</div>

Target

.o10

Summary

Fix all of the following:

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

HTML

<div class="o20 bg-black-200 p12 ba bc-black-225">.o20</div>

Target

.o20

Summary

Fix all of the following:

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

HTML

<div class="o30 bg-black-200 p12 ba bc-black-225">.o30</div>

Target

.o30

Summary

Fix all of the following:

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

HTML

<div class="o40 bg-black-200 p12 ba bc-black-225">.o40</div>

Target

.o40

Summary

Fix all of the following:

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

HTML

<div class="o50 bg-black-200 p12 ba bc-black-225">.o50</div>

Target

.o50

Summary

Fix all of the following:

  • Element has insufficient APCA custom level contrast of 50.87Lc (foreground color: #908e8f, background color: #eff0f1, font size: 9.8pt (13px), font weight: 400). Expected minimum APCA lightness contrast of 60Lc

HTML

<div class="o60 bg-black-200 p12 ba bc-black-225">.o60</div>

Target

.o60

Summary

Fix all of the following:

  • Element has insufficient APCA custom level contrast of 59.47Lc (foreground color: #7a7778, background color: #ebecee, font size: 9.8pt (13px), 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="o5 bg-black-200 p12 ba bc-black-225">.o5</div>

Target

.o5

Summary

Fix all of the following:

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

HTML

<div class="o10 bg-black-200 p12 ba bc-black-225">.o10</div>

Target

.o10

Summary

Fix all of the following:

  • Element has insufficient APCA custom level contrast of 0Lc (foreground color: #2c2c2c, background color: #1b1b1b, font size: 9.8pt (13px), font weight: 400). Expected minimum APCA lightness contrast of 60Lc

HTML

<div class="o20 bg-black-200 p12 ba bc-black-225">.o20</div>

Target

.o20

Summary

Fix all of the following:

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

HTML

<div class="o30 bg-black-200 p12 ba bc-black-225">.o30</div>

Target

.o30

Summary

Fix all of the following:

  • Element has insufficient APCA custom level contrast of 15.04Lc (foreground color: #5b5b5b, background color: #282828, font size: 9.8pt (13px), font weight: 400). Expected minimum APCA lightness contrast of 60Lc

HTML

<div class="o40 bg-black-200 p12 ba bc-black-225">.o40</div>

Target

.o40

Summary

Fix all of the following:

  • Element has insufficient APCA custom level contrast of 23.4Lc (foreground color: #727272, background color: #2f2f2f, font size: 9.8pt (13px), font weight: 400). Expected minimum APCA lightness contrast of 60Lc

HTML

<div class="o50 bg-black-200 p12 ba bc-black-225">.o50</div>

Target

.o50

Summary

Fix all of the following:

  • Element has insufficient APCA custom level contrast of 32.9Lc (foreground color: #8a8a8a, background color: #363636, font size: 9.8pt (13px), font weight: 400). Expected minimum APCA lightness contrast of 60Lc

HTML

<div class="o60 bg-black-200 p12 ba bc-black-225">.o60</div>

Target

.o60

Summary

Fix all of the following:

  • Element has insufficient APCA custom level contrast of 42.88Lc (foreground color: #a1a1a1, background color: #3c3c3c, font size: 9.8pt (13px), font weight: 400). Expected minimum APCA lightness contrast of 60Lc

HTML

<div class="o70 bg-black-200 p12 ba bc-black-225">.o70</div>

Target

.o70

Summary

Fix all of the following:

  • Element has insufficient APCA custom level contrast of 53.85Lc (foreground color: #b9b9b9, background color: #434343, font size: 9.8pt (13px), 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="o70 bg-black-200 p12 ba bc-black-225">.o70</div>

Target

.o70

Summary

Fix any of the following:

  • Element has insufficient color contrast of 5.04 (foreground color: #646162, background color: #e8e9eb, font size: 9.8pt (13px), 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="o70 bg-black-200 p12 ba bc-black-225">.o70</div>

Target

.o70

Summary

Fix any of the following:

  • Element has insufficient color contrast of 5.18 (foreground color: #b3b3b3, background color: #3d3d3d, font size: 9.8pt (13px), font weight: normal). Expected contrast ratio of 7:1

HTML

<div class="o80 bg-black-200 p12 ba bc-black-225">.o80</div>

Target

.o80

Summary

Fix any of the following:

  • Element has insufficient color contrast of 5.87 (foreground color: #cccccc, background color: #464646, font size: 9.8pt (13px), font weight: normal). Expected contrast ratio of 7:1

HTML

<div class="o90 bg-black-200 p12 ba bc-black-225">.o90</div>

Target

.o90

Summary

Fix any of the following:

  • Element has insufficient color contrast of 6.66 (foreground color: #e6e6e6, background color: #4e4e4e, font size: 9.8pt (13px), font weight: normal). Expected contrast ratio of 7:1