product/foundation/spots

ID:
product/foundation/spots
Automated score:
99.1
URL:
https://stackoverflow.design/product/foundation/spots/
View JSON file

1 violations: 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="stacks-badge-dotnet--text d-flex flex__center brr-sm px8 py4">Razor</div>

Target

.stacks-badge-dotnet--text

Summary

Fix all of the following:

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

HTML

<span class="hljs-comment">&lt;!-- Razor --&gt;</span>

Target

.stacks-preview:nth-child(5) > pre > .language-html.s-code-block > .hljs-comment:nth-child(1)

Summary

Fix all of the following:

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

HTML

<span class="hljs-comment">&lt;!-- Liquid --&gt;</span>

Target

.stacks-preview:nth-child(5) > pre > .language-html.s-code-block > .hljs-comment:nth-child(5)

Summary

Fix all of the following:

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

HTML

<span class="hljs-comment">&lt;!-- JavaScript Helper --&gt;</span>

Target

.stacks-preview:nth-child(5) > pre > .language-html.s-code-block > .hljs-comment:nth-child(9)

Summary

Fix all of the following:

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

HTML

<span class="hljs-comment">&lt;!-- Razor --&gt;</span>

Target

.stacks-preview:nth-child(8) > pre > .language-html.s-code-block > .hljs-comment:nth-child(1)

Summary

Fix all of the following:

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

HTML

<span class="hljs-comment">&lt;!-- Liquid --&gt;</span>

Target

.stacks-preview:nth-child(8) > pre > .language-html.s-code-block > .hljs-comment:nth-child(5)

Summary

Fix all of the following:

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

HTML

<span class="hljs-comment">&lt;!-- JavaScript Helper --&gt;</span>

Target

.stacks-preview:nth-child(8) > pre > .language-html.s-code-block > .hljs-comment:nth-child(9)

Summary

Fix all of the following:

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