product/components/prose

ID:
product/components/prose
Automated score:
93.2
URL:
https://stackoverflow.design/product/components/prose
View JSON file

9 violations: Light: 2Dark: 3HC Light: 2HC 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

<code class="stacks-code">stackexchange/stacks</code>

Target

a > .stacks-code

Summary

Fix all of the following:

  • Element has insufficient APCA custom level contrast of 56.8Lc (foreground color: #1b75d0, background color: #e3e6e8, 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 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

.s-code-block--line-numbers > 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

.s-code-block--line-numbers > 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

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

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="hljs-comment">&lt;!-- ... --&gt;</span>

Target

.language-html.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

<code class="stacks-code">stackexchange/stacks</code>

Target

a > .stacks-code

Summary

Fix all of the following:

  • Element has insufficient APCA custom level contrast of 57Lc (foreground color: #90c4f9, background color: #424548, 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

.s-code-block--line-numbers > 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

.s-code-block--line-numbers > 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

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

.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

Ensure the contrast between foreground and background colors meets WCAG 2 AAA enhanced contrast ratio thresholds. Elements must meet enhanced color contrast ratio thresholds. Help URL

HTML

<code class="stacks-code">stackexchange/stacks</code>

Target

a > .stacks-code

Summary

Fix any of the following:

  • Element has insufficient color contrast of 5.87 (foreground color: #145799, background color: #e3e6e8, font size: 9.8pt (13px), font weight: normal). Expected contrast ratio of 7:1

Ensure the contrast between foreground and background colors meets WCAG 2 AAA enhanced contrast ratio thresholds. Elements must meet enhanced color contrast ratio thresholds. Help URL

HTML

<code class="stacks-code">stackexchange/stacks</code>

Target

a > .stacks-code

Summary

Fix any of the following:

  • Element has insufficient color contrast of 4.98 (foreground color: #8cbff2, background color: #424548, font size: 9.8pt (13px), font weight: normal). Expected contrast ratio of 7: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="https://stackoverflow.com">Stack Overflow</a>

Target

p:nth-child(35) > a[href$="stackoverflow.com"]

Summary

Fix any of the following:

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

HTML

<a href="https://github.com/gitster/git/blob/master/Documentation/RelNotes/1.7.0.txt">Git v1.7.0</a>

Target

p:nth-child(10) > a

Summary

Fix any of the following:

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

HTML

<a href="https://github.com/gitster/git/blob/master/Documentation/RelNotes/1.5.0.txt">Git v1.5.0</a>

Target

p:nth-child(14) > a

Summary

Fix any of the following:

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

HTML

<a href="https://github.com/git/git/blob/master/Documentation/RelNotes/2.8.0.txt">Git v2.8.0</a>

Target

p:nth-child(15) > a

Summary

Fix any of the following:

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

HTML

<a href="http://en.wiktionary.org/wiki/dogear#Verb">dog ear</a>

Target

p:nth-child(22) > a

Summary

Fix any of the following:

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

HTML

<a href="https://www.google.com">https://www.google.com</a>

Target

a[href$="www.google.com"]

Summary

Fix any of the following:

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

HTML

<a href="https://meta.stackexchange.com/questions/1777/what-html-tags-are-allowed-on-stack-exchange-sites">basic HTML elements are whitelisted</a>

Target

p:nth-child(45) > a

Summary

Fix any of the following:

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

HTML

<a href="http://johnpolacek.com/rethinking/">immutable, atomic classes</a>

Target

.s-prose__xs > p:nth-child(3) > a

Summary

Fix any of the following:

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

HTML

<a href="http://johnpolacek.com/rethinking/">immutable, atomic classes</a>

Target

.s-prose__sm > p:nth-child(3) > a

Summary

Fix any of the following:

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

HTML

<a href="http://johnpolacek.com/rethinking/">immutable, atomic classes</a>

Target

.stacks-preview:nth-child(8) > .stacks-preview--example.d\:bg-white > .s-prose[role="presentation"] > p:nth-child(3) > a

Summary

Fix any of the following:

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

HTML

<a href="http://johnpolacek.com/rethinking/">immutable, atomic classes</a>

Target

.s-prose__md > p:nth-child(3) > a

Summary

Fix any of the following:

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

Ensure elements that have scrollable content are accessible by keyboard. Scrollable region must have keyboard access. Help URL

HTML

<pre class="language-html s-code-block">

Target

.bar-sm.btw1.stacks-preview--example > .s-prose[role="presentation"] > .language-html.s-code-block

Summary

Fix any of the following:

  • Element should have focusable content
  • Element should be focusable

Ensure elements that have scrollable content are accessible by keyboard. Scrollable region must have keyboard access. Help URL

HTML

<pre class="language-html s-code-block">

Target

.bar-sm.btw1.stacks-preview--example > .s-prose[role="presentation"] > .language-html.s-code-block

Summary

Fix any of the following:

  • Element should have focusable content
  • Element should be focusable

Ensure elements that have scrollable content are accessible by keyboard. Scrollable region must have keyboard access. Help URL

HTML

<pre class="language-html s-code-block">

Target

.bar-sm.btw1.stacks-preview--example > .s-prose[role="presentation"] > .language-html.s-code-block

Summary

Fix any of the following:

  • Element should have focusable content
  • Element should be focusable

Ensure elements that have scrollable content are accessible by keyboard. Scrollable region must have keyboard access. Help URL

HTML

<pre class="language-html s-code-block">

Target

.bar-sm.btw1.stacks-preview--example > .s-prose[role="presentation"] > .language-html.s-code-block

Summary

Fix any of the following:

  • Element should have focusable content
  • Element should be focusable