product/components/code-blocks

ID:
product/components/code-blocks
Automated score:
98.3
URL:
https://stackoverflow.design/product/components/code-blocks
View JSON file

2 violations: Light: 1 Dark: 1

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

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

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

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

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

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

.language-html > .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>23</div>

Target

.language-json > .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>24</div>

Target

.language-json > .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>25</div>

Target

.language-json > .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>26</div>

Target

.language-json > .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>27</div>

Target

.language-json > .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>28</div>

Target

.language-json > .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>29</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>30</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>31</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>32</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>33</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>34</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

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">// what?</span>

Target

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

<span class="hljs-comment"># The Greeter class</span>

Target

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

<span class="hljs-comment">/* <span class="hljs-comment">/* ... */</span> */</span>

Target

.hljs-comment:nth-child(22)

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">/* ... */</span>

Target

.hljs-comment:nth-child(22) > .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

<span class="hljs-comment">// Return a descriptive string for this person</span>

Target

.language-swift > .hljs-comment:nth-child(26)

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">/* ? */</span>

Target

.hljs-comment:nth-child(53)

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">/* or 54 */</span>

Target

.hljs-comment:nth-child(76)

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">-- Initials</span>

Target

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

<span class="hljs-comment">Index: languages/ini.js</span>

Target

.language-diff > .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">--- languages/ini.js    (revision 199)</span>

Target

.hljs-comment:nth-child(5)

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">+++ languages/ini.js    (revision 200)</span>

Target

.hljs-comment:nth-child(7)

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">*** /path/to/original timestamp</span>

Target

.hljs-comment:nth-child(24)

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">--- /path/to/new      timestamp</span>

Target

.language-diff > .hljs-comment:nth-child(26)

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

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

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

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

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

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

.language-html > .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>23</div>

Target

.language-json > .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>24</div>

Target

.language-json > .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>25</div>

Target

.language-json > .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>26</div>

Target

.language-json > .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>27</div>

Target

.language-json > .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>28</div>

Target

.language-json > .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>29</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>30</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>31</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>32</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>33</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>34</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