system/components/code-blocks

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

8 violations: Light: 2Dark: 2HC Light: 2HC Dark: 2

Ensure buttons have discernible text. Buttons must have discernible text. Help URL

HTML

<button class="s-btn h:fc-blue-400 px0 s-btn__clear s-btn__icon">

Target

.h\:fc-blue-400

Summary

Fix any of the following:

  • Element does not have inner text that is visible to screen readers
  • aria-label attribute does not exist or is empty
  • aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty
  • Element has no title attribute
  • Element does not have an implicit (wrapped) <label>
  • Element does not have an explicit <label>
  • Element's default semantics were not overridden with role="none" or role="presentation"

Ensure buttons have discernible text. Buttons must have discernible text. Help URL

HTML

<button class="s-btn h:fc-blue-400 px0 s-btn__clear s-btn__icon">

Target

.h\:fc-blue-400

Summary

Fix any of the following:

  • Element does not have inner text that is visible to screen readers
  • aria-label attribute does not exist or is empty
  • aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty
  • Element has no title attribute
  • Element does not have an implicit (wrapped) <label>
  • Element does not have an explicit <label>
  • Element's default semantics were not overridden with role="none" or role="presentation"

Ensure buttons have discernible text. Buttons must have discernible text. Help URL

HTML

<button class="s-btn h:fc-blue-400 px0 s-btn__clear s-btn__icon">

Target

.h\:fc-blue-400

Summary

Fix any of the following:

  • Element does not have inner text that is visible to screen readers
  • aria-label attribute does not exist or is empty
  • aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty
  • Element has no title attribute
  • Element does not have an implicit (wrapped) <label>
  • Element does not have an explicit <label>
  • Element's default semantics were not overridden with role="none" or role="presentation"

Ensure buttons have discernible text. Buttons must have discernible text. Help URL

HTML

<button class="s-btn h:fc-blue-400 px0 s-btn__clear s-btn__icon">

Target

.h\:fc-blue-400

Summary

Fix any of the following:

  • Element does not have inner text that is visible to screen readers
  • aria-label attribute does not exist or is empty
  • aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty
  • Element has no title attribute
  • Element does not have an implicit (wrapped) <label>
  • Element does not have an explicit <label>
  • Element's default semantics were not overridden with role="none" or role="presentation"

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>highlight.js</code>

Target

a > code

Summary

Fix all of the following:

  • Element has insufficient APCA custom level contrast of 57.3Lc (foreground color: #6b6d73, background color: #dee0e3, font size: 10.5pt (14px), font weight: 500). 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 54.2Lc (foreground color: #84878c, background color: #f0efed, font size: 10.5pt (14px), font weight: 300). 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 54.2Lc (foreground color: #84878c, background color: #f0efed, font size: 10.5pt (14px), font weight: 300). 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 54.2Lc (foreground color: #84878c, background color: #f0efed, font size: 10.5pt (14px), font weight: 300). 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 54.2Lc (foreground color: #84878c, background color: #f0efed, font size: 10.5pt (14px), font weight: 300). 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 54.2Lc (foreground color: #84878c, background color: #f0efed, font size: 10.5pt (14px), font weight: 300). 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 54.2Lc (foreground color: #84878c, background color: #f0efed, font size: 10.5pt (14px), font weight: 300). 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 54.2Lc (foreground color: #84878c, background color: #f0efed, font size: 10.5pt (14px), font weight: 300). 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 54.2Lc (foreground color: #84878c, background color: #f0efed, font size: 10.5pt (14px), font weight: 300). 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 54.2Lc (foreground color: #84878c, background color: #f0efed, font size: 10.5pt (14px), font weight: 300). 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 54.2Lc (foreground color: #84878c, background color: #f0efed, font size: 10.5pt (14px), font weight: 300). 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 54.2Lc (foreground color: #84878c, background color: #f0efed, font size: 10.5pt (14px), font weight: 300). 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 54.2Lc (foreground color: #84878c, background color: #f0efed, font size: 10.5pt (14px), font weight: 300). 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 54.2Lc (foreground color: #84878c, background color: #f0efed, font size: 10.5pt (14px), font weight: 300). 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 54.2Lc (foreground color: #84878c, background color: #f0efed, font size: 10.5pt (14px), font weight: 300). 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 54.2Lc (foreground color: #84878c, background color: #f0efed, font size: 10.5pt (14px), font weight: 300). 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 54.2Lc (foreground color: #84878c, background color: #f0efed, font size: 10.5pt (14px), font weight: 300). 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 54.2Lc (foreground color: #84878c, background color: #f0efed, font size: 10.5pt (14px), font weight: 300). 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 54.2Lc (foreground color: #84878c, background color: #f0efed, font size: 10.5pt (14px), font weight: 300). 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

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

Target

em

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

<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 50.98Lc (foreground color: #a6a6a6, background color: #262626, font size: 10.5pt (14px), font weight: 300). 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 50.98Lc (foreground color: #a6a6a6, background color: #262626, font size: 10.5pt (14px), font weight: 300). 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 50.98Lc (foreground color: #a6a6a6, background color: #262626, font size: 10.5pt (14px), font weight: 300). 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 50.98Lc (foreground color: #a6a6a6, background color: #262626, font size: 10.5pt (14px), font weight: 300). 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 50.98Lc (foreground color: #a6a6a6, background color: #262626, font size: 10.5pt (14px), font weight: 300). 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 50.98Lc (foreground color: #a6a6a6, background color: #262626, font size: 10.5pt (14px), font weight: 300). 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 50.98Lc (foreground color: #a6a6a6, background color: #262626, font size: 10.5pt (14px), font weight: 300). 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 50.98Lc (foreground color: #a6a6a6, background color: #262626, font size: 10.5pt (14px), font weight: 300). 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 50.98Lc (foreground color: #a6a6a6, background color: #262626, font size: 10.5pt (14px), font weight: 300). 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 50.98Lc (foreground color: #a6a6a6, background color: #262626, font size: 10.5pt (14px), font weight: 300). 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 50.98Lc (foreground color: #a6a6a6, background color: #262626, font size: 10.5pt (14px), font weight: 300). 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 50.98Lc (foreground color: #a6a6a6, background color: #262626, font size: 10.5pt (14px), font weight: 300). 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 50.98Lc (foreground color: #a6a6a6, background color: #262626, font size: 10.5pt (14px), font weight: 300). 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 50.98Lc (foreground color: #a6a6a6, background color: #262626, font size: 10.5pt (14px), font weight: 300). 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 50.98Lc (foreground color: #a6a6a6, background color: #262626, font size: 10.5pt (14px), font weight: 300). 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 50.98Lc (foreground color: #a6a6a6, background color: #262626, font size: 10.5pt (14px), font weight: 300). 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 50.98Lc (foreground color: #a6a6a6, background color: #262626, font size: 10.5pt (14px), font weight: 300). 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 50.98Lc (foreground color: #a6a6a6, background color: #262626, font size: 10.5pt (14px), font weight: 300). 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>highlight.js</code>

Target

a > code

Summary

Fix any of the following:

  • Element has insufficient color contrast of 5.85 (foreground color: #505355, background color: #dee0e3, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 7:1

HTML

<div>23</div>

Target

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

Summary

Fix any of the following:

  • Element has insufficient color contrast of 6.24 (foreground color: #54585c, background color: #f0efed, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 7:1

HTML

<div>24</div>

Target

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

Summary

Fix any of the following:

  • Element has insufficient color contrast of 6.24 (foreground color: #54585c, background color: #f0efed, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 7:1

HTML

<div>25</div>

Target

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

Summary

Fix any of the following:

  • Element has insufficient color contrast of 6.24 (foreground color: #54585c, background color: #f0efed, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 7:1

HTML

<div>26</div>

Target

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

Summary

Fix any of the following:

  • Element has insufficient color contrast of 6.24 (foreground color: #54585c, background color: #f0efed, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 7:1

HTML

<div>27</div>

Target

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

Summary

Fix any of the following:

  • Element has insufficient color contrast of 6.24 (foreground color: #54585c, background color: #f0efed, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 7:1

HTML

<div>28</div>

Target

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

Summary

Fix any of the following:

  • Element has insufficient color contrast of 6.24 (foreground color: #54585c, background color: #f0efed, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 7:1

HTML

<div>29</div>

Target

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

Summary

Fix any of the following:

  • Element has insufficient color contrast of 6.24 (foreground color: #54585c, background color: #f0efed, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 7:1

HTML

<div>30</div>

Target

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

Summary

Fix any of the following:

  • Element has insufficient color contrast of 6.24 (foreground color: #54585c, background color: #f0efed, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 7:1

HTML

<div>31</div>

Target

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

Summary

Fix any of the following:

  • Element has insufficient color contrast of 6.24 (foreground color: #54585c, background color: #f0efed, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 7:1

HTML

<div>32</div>

Target

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

Summary

Fix any of the following:

  • Element has insufficient color contrast of 6.24 (foreground color: #54585c, background color: #f0efed, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 7:1

HTML

<div>33</div>

Target

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

Summary

Fix any of the following:

  • Element has insufficient color contrast of 6.24 (foreground color: #54585c, background color: #f0efed, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 7:1

HTML

<div>34</div>

Target

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

Summary

Fix any of the following:

  • Element has insufficient color contrast of 6.24 (foreground color: #54585c, background color: #f0efed, font size: 10.5pt (14px), 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>highlight.js</code>

Target

a > code

Summary

Fix any of the following:

  • Element has insufficient color contrast of 4.87 (foreground color: #d9d3ce, background color: #575757, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 7:1

HTML

<div>23</div>

Target

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

Summary

Fix any of the following:

  • Element has insufficient color contrast of 6.21 (foreground color: #a6a6a6, background color: #262626, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 7:1

HTML

<div>24</div>

Target

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

Summary

Fix any of the following:

  • Element has insufficient color contrast of 6.21 (foreground color: #a6a6a6, background color: #262626, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 7:1

HTML

<div>25</div>

Target

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

Summary

Fix any of the following:

  • Element has insufficient color contrast of 6.21 (foreground color: #a6a6a6, background color: #262626, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 7:1

HTML

<div>26</div>

Target

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

Summary

Fix any of the following:

  • Element has insufficient color contrast of 6.21 (foreground color: #a6a6a6, background color: #262626, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 7:1

HTML

<div>27</div>

Target

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

Summary

Fix any of the following:

  • Element has insufficient color contrast of 6.21 (foreground color: #a6a6a6, background color: #262626, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 7:1

HTML

<div>28</div>

Target

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

Summary

Fix any of the following:

  • Element has insufficient color contrast of 6.21 (foreground color: #a6a6a6, background color: #262626, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 7:1

HTML

<div>29</div>

Target

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

Summary

Fix any of the following:

  • Element has insufficient color contrast of 6.21 (foreground color: #a6a6a6, background color: #262626, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 7:1

HTML

<div>30</div>

Target

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

Summary

Fix any of the following:

  • Element has insufficient color contrast of 6.21 (foreground color: #a6a6a6, background color: #262626, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 7:1

HTML

<div>31</div>

Target

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

Summary

Fix any of the following:

  • Element has insufficient color contrast of 6.21 (foreground color: #a6a6a6, background color: #262626, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 7:1

HTML

<div>32</div>

Target

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

Summary

Fix any of the following:

  • Element has insufficient color contrast of 6.21 (foreground color: #a6a6a6, background color: #262626, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 7:1

HTML

<div>33</div>

Target

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

Summary

Fix any of the following:

  • Element has insufficient color contrast of 6.21 (foreground color: #a6a6a6, background color: #262626, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 7:1

HTML

<div>34</div>

Target

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

Summary

Fix any of the following:

  • Element has insufficient color contrast of 6.21 (foreground color: #a6a6a6, background color: #262626, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 7:1