product/components/link-previews

ID:: product/components/link-previews
Automated score:: 96.7
URL:: https://stackoverflow.design/product/components/link-previews

4 violations: Light: 2 Dark: 2

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

<div>1</div>

Target

.s-code-block--line-numbers > div:nth-child(1)

Summary

Fix all of the following:

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

HTML

<div>2</div>

Target

.s-code-block--line-numbers > div:nth-child(2)

Summary

Fix all of the following:

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

HTML

<div>3</div>

Target

.s-code-block--line-numbers > div:nth-child(3)

Summary

Fix all of the following:

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

HTML

<div>4</div>

Target

.s-code-block--line-numbers > div:nth-child(4)

Summary

Fix all of the following:

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

HTML

<div>5</div>

Target

.s-code-block--line-numbers > div:nth-child(5)

Summary

Fix all of the following:

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

HTML

<div>6</div>

Target

.s-code-block--line-numbers > div:nth-child(6)

Summary

Fix all of the following:

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

HTML

<div>7</div>

Target

.s-code-block--line-numbers > div:nth-child(7)

Summary

Fix all of the following:

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

HTML

<div>8</div>

Target

div:nth-child(8)

Summary

Fix all of the following:

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

HTML

<div>9</div>

Target

.s-code-block--line-numbers > div:nth-child(9)

Summary

Fix all of the following:

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

HTML

<div>10</div>

Target

.s-code-block--line-numbers > div:nth-child(10)

Summary

Fix all of the following:

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

HTML

<div>11</div>

Target

div:nth-child(11)

Summary

Fix all of the following:

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

HTML

<div>12</div>

Target

.s-code-block--line-numbers > div:nth-child(12)

Summary

Fix all of the following:

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

HTML

<div>13</div>

Target

.s-code-block--line-numbers > div:nth-child(13)

Summary

Fix all of the following:

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

HTML

<div>14</div>

Target

.s-code-block--line-numbers > div:nth-child(14)

Summary

Fix all of the following:

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

HTML

<div>15</div>

Target

div:nth-child(15)

Summary

Fix all of the following:

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

HTML

<div>16</div>

Target

div:nth-child(16)

Summary

Fix all of the following:

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

HTML

<div>17</div>

Target

div:nth-child(17)

Summary

Fix all of the following:

Element has insufficient APCA custom level contrast of 36.81Lc (foreground color: #a7adb4, background color: #f1f2f3, 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

<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">// Shell commands for use in Grunt tasks</span>

Target

.stacks-preview:nth-child(9) > .stacks-preview--example > .s-link-preview > .s-link-preview--code > .language-js > .language-js.s-code-block > .hljs-comment

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

<div>1</div>

Target

.s-code-block--line-numbers > div:nth-child(1)

Summary

Fix all of the following:

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

HTML

<div>2</div>

Target

.s-code-block--line-numbers > div:nth-child(2)

Summary

Fix all of the following:

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

HTML

<div>3</div>

Target

.s-code-block--line-numbers > div:nth-child(3)

Summary

Fix all of the following:

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

HTML

<div>4</div>

Target

.s-code-block--line-numbers > div:nth-child(4)

Summary

Fix all of the following:

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

HTML

<div>5</div>

Target

.s-code-block--line-numbers > div:nth-child(5)

Summary

Fix all of the following:

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

HTML

<div>6</div>

Target

.s-code-block--line-numbers > div:nth-child(6)

Summary

Fix all of the following:

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

HTML

<div>7</div>

Target

.s-code-block--line-numbers > div:nth-child(7)

Summary

Fix all of the following:

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

HTML

<div>8</div>

Target

div:nth-child(8)

Summary

Fix all of the following:

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

HTML

<div>9</div>

Target

.s-code-block--line-numbers > div:nth-child(9)

Summary

Fix all of the following:

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

HTML

<div>10</div>

Target

.s-code-block--line-numbers > div:nth-child(10)

Summary

Fix all of the following:

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

HTML

<div>11</div>

Target

div:nth-child(11)

Summary

Fix all of the following:

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

HTML

<div>12</div>

Target

.s-code-block--line-numbers > div:nth-child(12)

Summary

Fix all of the following:

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

HTML

<div>13</div>

Target

.s-code-block--line-numbers > div:nth-child(13)

Summary

Fix all of the following:

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

HTML

<div>14</div>

Target

.s-code-block--line-numbers > div:nth-child(14)

Summary

Fix all of the following:

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

HTML

<div>15</div>

Target

div:nth-child(15)

Summary

Fix all of the following:

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

HTML

<div>16</div>

Target

div:nth-child(16)

Summary

Fix all of the following:

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

HTML

<div>17</div>

Target

div:nth-child(17)

Summary

Fix all of the following:

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

HTML

<span class="hljs-comment">// Shell commands for use in Grunt tasks</span>

Target

.stacks-preview:nth-child(13) > .stacks-preview--example > .s-link-preview > .s-link-preview--code > .language-js > .language-js.s-code-block > .hljs-comment

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

Light Serious Go to issue link-in-text-block-light

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="/product/foundation/icons/">the @Svg.Helper</a>

Target

.p8 > a[href$="icons/"]

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

Dark Serious Go to issue link-in-text-block-dark

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="/product/foundation/icons/">the @Svg.Helper</a>

Target

.p8 > a[href$="icons/"]

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