product/components/sidebar-widgets

ID:
product/components/sidebar-widgets
Automated score:
95.7
URL:
https://stackoverflow.design/product/components/sidebar-widgets
View JSON file

5 violations: Light: 1 Dark: 2 HC Light: 1 HC 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

<td class="fc-orange-400 ta-right va-baseline fs-caption">64</td>

Target

tr:nth-child(1) > .fc-orange-400.va-baseline.fs-caption

Summary

Fix all of the following:

  • Element has insufficient APCA custom level contrast of 57.58Lc (foreground color: #e7700d, background color: #ffffff, font size: 9.0pt (12px), font weight: 400). Expected minimum APCA lightness contrast of 60Lc

HTML

<td class="fc-orange-400 ta-right va-baseline fs-caption">238</td>

Target

tr:nth-child(2) > .fc-orange-400.va-baseline.fs-caption

Summary

Fix all of the following:

  • Element has insufficient APCA custom level contrast of 57.58Lc (foreground color: #e7700d, background color: #ffffff, font size: 9.0pt (12px), 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

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

<a href="#">Sunsetting Documentation</a>

Target

.s-sidebarwidget__yellow > ul:nth-child(2) > .s-sidebarwidget--item:nth-child(1) > a[href="#"]

Summary

Fix any of the following:

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

HTML

<a href="#">Documentation is read-only. What’s next?</a>

Target

.s-sidebarwidget__yellow > ul:nth-child(2) > .s-sidebarwidget--item:nth-child(2) > a[href="#"]

Summary

Fix any of the following:

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

HTML

<a href="#">Introducing Channels: Private Q&amp;A for Your Team</a>

Target

.s-sidebarwidget__yellow > ul:nth-child(4) > .s-sidebarwidget--item:nth-child(1) > a[href="#"]

Summary

Fix any of the following:

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

HTML

<a href="#">Raise Your Voice: Proclaim the Need for Net Neutrality</a>

Target

.s-sidebarwidget__yellow > ul:nth-child(4) > .s-sidebarwidget--item:nth-child(2) > a[href="#"]

Summary

Fix any of the following:

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

HTML

<a href="#" class="s-sidebarwidget--item s-btn s-btn__outlined jc-center">
                                Save as PDF
                            </a>

Target

.s-btn__outlined.jc-center.s-btn

Summary

Fix any of the following:

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

HTML

<a href="#" class="s-btn d-inline">Update privacy</a>

Target

.d-inline

Summary

Fix any of the following:

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

HTML

<a class="flex--item s-tag" href="#">css</a>

Target

.s-sidebarwidget--content:nth-child(2) > .g4.d-flex > .s-tag.flex--item[href="#"]:nth-child(1)

Summary

Fix any of the following:

  • Element has insufficient color contrast of 6.33 (foreground color: #525960, background color: #f1f2f3, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 7:1

HTML

<a class="flex--item s-tag" href="#">html</a>

Target

.s-sidebarwidget--content:nth-child(2) > .g4.d-flex > .s-tag.flex--item[href="#"]:nth-child(2)

Summary

Fix any of the following:

  • Element has insufficient color contrast of 6.33 (foreground color: #525960, background color: #f1f2f3, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 7:1

HTML

<a class="flex--item s-tag" href="#">accessibility</a>

Target

.s-sidebarwidget--content:nth-child(2) > .g4.d-flex > .s-tag.flex--item[href="#"]:nth-child(3)

Summary

Fix any of the following:

  • Element has insufficient color contrast of 6.33 (foreground color: #525960, background color: #f1f2f3, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 7:1

HTML

<a class="flex--item s-tag" href="#">twitter-bootstrap</a>

Target

.s-sidebarwidget--content:nth-child(4) > .g4.d-flex > .s-tag.flex--item[href="#"]:nth-child(1)

Summary

Fix any of the following:

  • Element has insufficient color contrast of 6.33 (foreground color: #525960, background color: #f1f2f3, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 7:1

HTML

<a class="flex--item s-tag" href="#">web-component</a>

Target

.s-sidebarwidget--content:nth-child(4) > .g4.d-flex > .s-tag.flex--item[href="#"]:nth-child(2)

Summary

Fix any of the following:

  • Element has insufficient color contrast of 6.33 (foreground color: #525960, background color: #f1f2f3, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 7:1

HTML

<a class="flex--item s-tag" href="#">internet-explorer</a>

Target

.s-sidebarwidget--content:nth-child(4) > .g4.d-flex > .s-tag.flex--item[href="#"]:nth-child(3)

Summary

Fix any of the following:

  • Element has insufficient color contrast of 6.33 (foreground color: #525960, background color: #f1f2f3, font size: 9.0pt (12px), font weight: bold). 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

<a href="#" class="s-sidebarwidget--item s-btn s-btn__outlined jc-center">
                                Save as PDF
                            </a>

Target

.s-btn__outlined.jc-center.s-btn

Summary

Fix any of the following:

  • Element has insufficient color contrast of 6.87 (foreground color: #8cbff2, background color: #22313f, font size: 9.8pt (13px), font weight: normal). Expected contrast ratio of 7:1

HTML

<a href="#" class="s-btn d-inline">Update privacy</a>

Target

.d-inline

Summary

Fix any of the following:

  • Element has insufficient color contrast of 6.87 (foreground color: #8cbff2, background color: #22313f, 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="#" class="s-btn d-inline">Update privacy</a>

Target

.d-inline

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