content/guidelines/voice-and-tone

ID:
content/guidelines/voice-and-tone
Automated score:
98.2
URL:
https://stackoverflow.design/content/guidelines/voice-and-tone
View JSON file

2 violations: Light: 1Dark: 1

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="#">Follow our guidelines</a>

Target

tr:nth-child(3) > td:nth-child(2) > a[href="#"]

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="#">View receipt</a>

Target

tr:nth-child(1) > td:nth-child(2) > a[href="#"]

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="#">View receipt</a>

Target

tr:nth-child(1) > td:nth-child(3) > a[href="#"]

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="#">sockpuppets</a>

Target

tr:nth-child(2) > td:nth-child(2) > a[href="#"]

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="#">community rules</a>

Target

.va-top.mb48:nth-child(11) > tbody > tr:nth-child(2) > td:nth-child(3) > a[href="#"]:nth-child(1)

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="#">let us know</a>

Target

a[href="#"]:nth-child(4)

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="http://www.nicelysaid.co/">Nicely Said</a>

Target

a[href$="nicelysaid.co/"]

Summary

Fix any of the following:

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

HTML

<a href="https://polaris.shopify.com/content/product-content">Shopify Content Guide</a>

Target

.m0 > a:nth-child(2)

Summary

Fix any of the following:

  • The link has insufficient color contrast of 1.15:1 with the surrounding text. (Minimum contrast is 3:1, link text: #1b75d0, surrounding text: #636b74)
  • 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="#">Follow our guidelines</a>

Target

tr:nth-child(3) > td:nth-child(2) > a[href="#"]

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="#">View receipt</a>

Target

tr:nth-child(1) > td:nth-child(2) > a[href="#"]

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="#">View receipt</a>

Target

tr:nth-child(1) > td:nth-child(3) > a[href="#"]

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="#">sockpuppets</a>

Target

tr:nth-child(2) > td:nth-child(2) > a[href="#"]

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="#">community rules</a>

Target

.va-top.mb48:nth-child(11) > tbody > tr:nth-child(2) > td:nth-child(3) > a[href="#"]:nth-child(1)

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="#">let us know</a>

Target

a[href="#"]:nth-child(4)

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="http://www.nicelysaid.co/">Nicely Said</a>

Target

a[href$="nicelysaid.co/"]

Summary

Fix any of the following:

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

HTML

<a href="https://polaris.shopify.com/content/product-content">Shopify Content Guide</a>

Target

.m0 > a:nth-child(2)

Summary

Fix any of the following:

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