product/components/progress-bars

ID:
product/components/progress-bars
Automated score:
97.5
URL:
https://stackoverflow.design/product/components/progress-bars
View JSON file

3 violations: Light: 1 Dark: 2

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;!-- Brand --&gt;</span>

Target

section:nth-child(5) > .stacks-preview > 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;!-- Info --&gt;</span>

Target

.hljs-comment:nth-child(11)

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;!-- Gold Badge --&gt;</span>

Target

section:nth-child(8) > .stacks-preview > 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;!-- Silver Badge --&gt;</span>

Target

.hljs-comment:nth-child(19)

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;!-- Bronze Badge --&gt;</span>

Target

.hljs-comment:nth-child(37)

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

link-in-text-block

Ensure links are distinguished from surrounding text in a way that does not rely on color. Links must be distinguishable without relying on color. Help URL

HTML

<a href="https://www.w3.org/TR/wai-aria-1.1/#progressbar" target="_blank">Source</a>

Target

tr:nth-child(1) > td > a[target="_blank"]

Summary

Fix any of the following:

  • The link has insufficient color contrast of 2.24:1 with the surrounding text. (Minimum contrast is 3:1, link text: #1b75d0, surrounding text: #3b4045)
  • The link has no styling (such as underline) to distinguish it from the surrounding text

HTML

<a href="https://www.w3.org/TR/wai-aria-1.1/#aria-valuemin" target="_blank">Source</a>

Target

tr:nth-child(2) > td > a[target="_blank"]

Summary

Fix any of the following:

  • The link has insufficient color contrast of 2.24:1 with the surrounding text. (Minimum contrast is 3:1, link text: #1b75d0, surrounding text: #3b4045)
  • The link has no styling (such as underline) to distinguish it from the surrounding text

HTML

<a href="https://www.w3.org/TR/wai-aria-1.1/#aria-valuemax" target="_blank">Source</a>

Target

tr:nth-child(3) > td > a[target="_blank"]

Summary

Fix any of the following:

  • The link has insufficient color contrast of 2.24:1 with the surrounding text. (Minimum contrast is 3:1, link text: #1b75d0, surrounding text: #3b4045)
  • The link has no styling (such as underline) to distinguish it from the surrounding text

HTML

<a href="https://www.w3.org/TR/wai-aria-1.1/#aria-valuenow" target="_blank">Source</a>

Target

tr:nth-child(4) > td > a[target="_blank"]

Summary

Fix any of the following:

  • The link has insufficient color contrast of 2.24:1 with the surrounding text. (Minimum contrast is 3:1, link text: #1b75d0, surrounding text: #3b4045)
  • The link has no styling (such as underline) to distinguish it from the surrounding text

link-in-text-block

Ensure links are distinguished from surrounding text in a way that does not rely on color. Links must be distinguishable without relying on color. Help URL

HTML

<a href="https://www.w3.org/TR/wai-aria-1.1/#progressbar" target="_blank">Source</a>

Target

tr:nth-child(1) > td > a[target="_blank"]

Summary

Fix any of the following:

  • The link has insufficient color contrast of 1.46:1 with the surrounding text. (Minimum contrast is 3:1, link text: #90c4f9, surrounding text: #e3e6e8)
  • The link has no styling (such as underline) to distinguish it from the surrounding text

HTML

<a href="https://www.w3.org/TR/wai-aria-1.1/#aria-valuemin" target="_blank">Source</a>

Target

tr:nth-child(2) > td > a[target="_blank"]

Summary

Fix any of the following:

  • The link has insufficient color contrast of 1.46:1 with the surrounding text. (Minimum contrast is 3:1, link text: #90c4f9, surrounding text: #e3e6e8)
  • The link has no styling (such as underline) to distinguish it from the surrounding text

HTML

<a href="https://www.w3.org/TR/wai-aria-1.1/#aria-valuemax" target="_blank">Source</a>

Target

tr:nth-child(3) > td > a[target="_blank"]

Summary

Fix any of the following:

  • The link has insufficient color contrast of 1.46:1 with the surrounding text. (Minimum contrast is 3:1, link text: #90c4f9, surrounding text: #e3e6e8)
  • The link has no styling (such as underline) to distinguish it from the surrounding text

HTML

<a href="https://www.w3.org/TR/wai-aria-1.1/#aria-valuenow" target="_blank">Source</a>

Target

tr:nth-child(4) > td > a[target="_blank"]

Summary

Fix any of the following:

  • The link has insufficient color contrast of 1.46:1 with the surrounding text. (Minimum contrast is 3:1, link text: #90c4f9, surrounding text: #e3e6e8)
  • The link has no styling (such as underline) to distinguish it from the surrounding text