brand/data-visualization

ID:: brand/data-visualization
Automated score:: 98
URL:: https://stackoverflow.design/brand/data-visualization

2 violations: Light: 1Dark: 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

<span>#0095ff</span>

Target

.ff-mono.mb32.theme-light__forced:nth-child(5) > .bg-blue-400.fc-dark.p12 > span:nth-child(1)

Summary

Fix all of the following:

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

HTML

<span>blue-400</span>

Target

.ff-mono.mb32.theme-light__forced:nth-child(5) > .bg-blue-400.fc-dark.p12 > span:nth-child(2)

Summary

Fix all of the following:

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

HTML

<span>#48a868</span>

Target

.ff-mono.mb32.theme-light__forced:nth-child(8) > .bg-green-400.fc-dark.p12 > span:nth-child(1)

Summary

Fix all of the following:

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

HTML

<span>color-500</span>

Target

.ff-mono.mb32.theme-light__forced:nth-child(8) > .bg-green-400.fc-dark.p12 > span:nth-child(2)

Summary

Fix all of the following:

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

HTML

<span>#de535e</span>

Target

.bg-red-400.fc-dark.p12 > span:nth-child(1)

Summary

Fix all of the following:

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

HTML

<span>red-400</span>

Target

.bg-red-400.fc-dark.p12 > span:nth-child(2)

Summary

Fix all of the following:

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

HTML

<span>#f2720c</span>

Target

.bg-orange-400 > span:nth-child(1)

Summary

Fix all of the following:

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

HTML

<span>orange-400</span>

Target

.bg-orange-400 > span:nth-child(2)

Summary

Fix all of the following:

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

HTML

<span>#48a868</span>

Target

.bg-green-400.mb6.bar-lg > span:nth-child(1)

Summary

Fix all of the following:

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

HTML

<span>green-400</span>

Target

.bg-green-400.mb6.bar-lg > span:nth-child(2)

Summary

Fix all of the following:

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

HTML

<span>#379fef</span>

Target

.bg-blue-400.mb6.bar-lg > span:nth-child(1)

Summary

Fix all of the following:

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

HTML

<span>blue-400</span>

Target

.bg-blue-400.mb6.bar-lg > span:nth-child(2)

Summary

Fix all of the following:

Element has insufficient APCA custom level contrast of 31.89Lc (foreground color: #0c0d0e, background color: #1b75d0, font size: 9.8pt (13px), 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

<span>#0095ff</span>

Target

.ff-mono.mb32.theme-light__forced:nth-child(5) > .bg-blue-400.fc-dark.p12 > span:nth-child(1)

Summary

Fix all of the following:

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

HTML

<span>blue-400</span>

Target

.ff-mono.mb32.theme-light__forced:nth-child(5) > .bg-blue-400.fc-dark.p12 > span:nth-child(2)

Summary

Fix all of the following:

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

HTML

<span>#48a868</span>

Target

.ff-mono.mb32.theme-light__forced:nth-child(8) > .bg-green-400.fc-dark.p12 > span:nth-child(1)

Summary

Fix all of the following:

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

HTML

<span>color-500</span>

Target

.ff-mono.mb32.theme-light__forced:nth-child(8) > .bg-green-400.fc-dark.p12 > span:nth-child(2)

Summary

Fix all of the following:

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

HTML

<span>#de535e</span>

Target

.bg-red-400.fc-dark.p12 > span:nth-child(1)

Summary

Fix all of the following:

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

HTML

<span>red-400</span>

Target

.bg-red-400.fc-dark.p12 > span:nth-child(2)

Summary

Fix all of the following:

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

HTML

<span>#f2720c</span>

Target

.bg-orange-400 > span:nth-child(1)

Summary

Fix all of the following:

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

HTML

<span>orange-400</span>

Target

.bg-orange-400 > span:nth-child(2)

Summary

Fix all of the following:

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

HTML

<span>#48a868</span>

Target

.bg-green-400.mb6.bar-lg > span:nth-child(1)

Summary

Fix all of the following:

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

HTML

<span>green-400</span>

Target

.bg-green-400.mb6.bar-lg > span:nth-child(2)

Summary

Fix all of the following:

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

HTML

<span>#379fef</span>

Target

.bg-blue-400.mb6.bar-lg > span:nth-child(1)

Summary

Fix all of the following:

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

HTML

<span>blue-400</span>

Target

.bg-blue-400.mb6.bar-lg > span:nth-child(2)

Summary

Fix all of the following:

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