system/components/links

ID:
system/components/links
Automated score:
97.2
URL:
https://stackoverflow.design/system/components/links
View JSON file

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

<span class="fc-black-350">N/A</span>

Target

section[aria-labelledby="link-classes"] > .overflow-x-auto[role="region"][aria-label="Class table"] > table > tbody > tr:nth-child(1) > td:nth-child(3) > .fc-black-350

Summary

Fix all of the following:

  • Element has insufficient APCA custom level contrast of 53.33Lc (foreground color: #a6a6a6, background color: #141414, font size: 9.8pt (13px), font weight: 300). Expected minimum APCA lightness contrast of 60Lc

HTML

<span class="fc-black-350">N/A</span>

Target

section[aria-labelledby="anchor-classes"] > .overflow-x-auto[role="region"][aria-label="Class table"] > table > tbody > tr:nth-child(1) > td:nth-child(3) > .fc-black-350

Summary

Fix all of the following:

  • Element has insufficient APCA custom level contrast of 53.33Lc (foreground color: #a6a6a6, background color: #141414, font size: 9.8pt (13px), font weight: 300). 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="#">links</a>

Target

.ba.bc-black-225.p16:nth-child(8) > .s-anchors__danger.docs-card.s-anchors > a[href="#"]:nth-child(1)

Summary

Fix any of the following:

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

HTML

<a href="#">outer box</a>

Target

.ba.bc-black-225.p16:nth-child(8) > .s-anchors__danger.docs-card.s-anchors > a[href="#"]:nth-child(2)

Summary

Fix any of the following:

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

HTML

<a href="#">dangerous</a>

Target

.ba.bc-black-225.p16:nth-child(8) > .s-anchors__danger.docs-card.s-anchors > a[href="#"]:nth-child(3)

Summary

Fix any of the following:

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

HTML

<a href="#">links</a>

Target

.ba.bc-black-225.p16:nth-child(11) > .s-anchors__danger.docs-card.s-anchors > a[href="#"]:nth-child(1)

Summary

Fix any of the following:

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

HTML

<a href="#">box</a>

Target

.ba.bc-black-225.p16:nth-child(11) > .s-anchors__danger.docs-card.s-anchors > a[href="#"]:nth-child(2)

Summary

Fix any of the following:

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

HTML

<a href="#">dangerous</a>

Target

.ba.bc-black-225.p16:nth-child(11) > .s-anchors__danger.docs-card.s-anchors > a[href="#"]:nth-child(3)

Summary

Fix any of the following:

  • The link has insufficient color contrast of 2.92:1 with the surrounding text. (Minimum contrast is 3:1, link text: #bf3030, surrounding text: #211d1e)
  • 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="#">links</a>

Target

.ba.bc-black-225.p16:nth-child(8) > .s-anchors__danger.docs-card.s-anchors > a[href="#"]:nth-child(1)

Summary

Fix any of the following:

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

HTML

<a href="#">outer box</a>

Target

.ba.bc-black-225.p16:nth-child(8) > .s-anchors__danger.docs-card.s-anchors > a[href="#"]:nth-child(2)

Summary

Fix any of the following:

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

HTML

<a href="#">dangerous</a>

Target

.ba.bc-black-225.p16:nth-child(8) > .s-anchors__danger.docs-card.s-anchors > a[href="#"]:nth-child(3)

Summary

Fix any of the following:

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

HTML

<a href="#">links</a>

Target

.ba.bc-black-225.p16:nth-child(11) > .s-anchors__danger.docs-card.s-anchors > a[href="#"]:nth-child(1)

Summary

Fix any of the following:

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

HTML

<a href="#">box</a>

Target

.ba.bc-black-225.p16:nth-child(11) > .s-anchors__danger.docs-card.s-anchors > a[href="#"]:nth-child(2)

Summary

Fix any of the following:

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

HTML

<a href="#">dangerous</a>

Target

.ba.bc-black-225.p16:nth-child(11) > .s-anchors__danger.docs-card.s-anchors > a[href="#"]:nth-child(3)

Summary

Fix any of the following:

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