system/components/user-cards

ID:
system/components/user-cards
Automated score:
95.1
URL:
https://stackoverflow.design/system/components/user-cards
View JSON file

5 violations: Light: 1Dark: 2HC Light: 1HC Dark: 1

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

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

Target

tr:nth-child(1) > td:nth-child(2) > 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

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

Target

tr:nth-child(1) > td:nth-child(3) > 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

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

Target

#user-cards-classes-table > table > tbody > tr:nth-child(2) > td:nth-child(2) > 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

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

Target

tr:nth-child(3) > td:nth-child(2) > 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

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

Target

tr:nth-child(4) > td:nth-child(2) > 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

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

Target

tr:nth-child(5) > td:nth-child(2) > 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

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

Target

tr:nth-child(5) > td:nth-child(3) > 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

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

Target

tr:nth-child(6) > td:nth-child(2) > 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

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

Target

tr:nth-child(6) > td:nth-child(3) > 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

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

Target

tr:nth-child(7) > td:nth-child(2) > 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

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

Target

tr:nth-child(7) > td:nth-child(3) > 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

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

Target

tr:nth-child(8) > td:nth-child(2) > 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

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

Target

tr:nth-child(8) > td:nth-child(3) > 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

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

Target

tr:nth-child(9) > td:nth-child(2) > 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

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

Target

tr:nth-child(9) > td:nth-child(3) > 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

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

Target

tr:nth-child(10) > td:nth-child(2) > 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

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

Target

tr:nth-child(11) > td:nth-child(2) > 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

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

Target

tr:nth-child(12) > td:nth-child(2) > 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

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

Target

#user-cards-sizes-table > table > tbody > tr:nth-child(2) > td:nth-child(1) > 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

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

Target

#user-cards-sizes-table > table > tbody > tr:nth-child(2) > td:nth-child(2) > 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

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

Target

#user-cards-states-table > table > tbody > tr:nth-child(2) > td:nth-child(1) > 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

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

Target

#docs-table > table > tbody > tr:nth-child(2) > td:nth-child(1) > 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