Collectives Collection

ID:
collectives-collection
Automated score:
92.1
URL:
https://stackoverflow.com/collectives/aws/collections/77152575/build-on-answered-livestream-questions
View JSON file

10 violations: Light: 3Dark: 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

<button class="s-btn s-btn__filled o50 mb24 js-add-posts" type="button" aria-controls="add-posts-join" data-controller="s-popover" data-action="s-popover#toggle" aria-expanded="false">
                    Add posts
                </button>

Target

.js-add-posts

Summary

Fix all of the following:

  • Element has insufficient APCA custom level contrast of 42.39Lc (foreground color: #ebf4fd, background color: #79afe5, font size: 9.8pt (13px), font weight: 400). Expected minimum APCA lightness contrast of 60Lc

HTML

<a class="js-add-link comments-link disabled-link" title="Use comments to ask for more information or suggest improvements. Avoid comments like “+1” or “thanks”." href="#" role="button">Add a comment</a>

Target

.js-add-link

Summary

Fix all of the following:

  • Element has insufficient APCA custom level contrast of 48.24Lc (foreground color: #a1a6ac, background color: #ffffff, 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

<p class="fc-black-400 fw-bold fs-body2">Add questions, answers or articles to this collection</p>

Target

.s-empty-state > .fs-body2

Summary

Fix all of the following:

  • Element has insufficient APCA custom level contrast of 56.34Lc (foreground color: #c8ccd0, background color: #2e5c8a, font size: 11.3pt (15px), font weight: 700). Expected minimum APCA lightness contrast of 60Lc

HTML

<p class="fc-black-400">Become a contributor and help curate this collection.</p>

Target

.s-empty-state > p:nth-child(3)

Summary

Fix all of the following:

  • Element has insufficient APCA custom level contrast of 56.34Lc (foreground color: #c8ccd0, background color: #2e5c8a, font size: 9.8pt (13px), font weight: 400). Expected minimum APCA lightness contrast of 60Lc

HTML

<button class="s-btn s-btn__filled o50 mb24 js-add-posts" type="button" aria-controls="add-posts-join" data-controller="s-popover" data-action="s-popover#toggle" aria-expanded="false">
                    Add posts
                </button>

Target

.js-add-posts

Summary

Fix all of the following:

  • Element has insufficient APCA custom level contrast of 31.42Lc (foreground color: #2a4159, background color: #5f90c2, font size: 9.8pt (13px), font weight: 400). Expected minimum APCA lightness contrast of 60Lc

HTML

<a class="js-add-link comments-link disabled-link" title="Use comments to ask for more information or suggest improvements. Avoid comments like “+1” or “thanks”." href="#" role="button">Add a comment</a>

Target

.js-add-link

Summary

Fix all of the following:

  • Element has insufficient APCA custom level contrast of 10.54Lc (foreground color: #4a4f55, background color: #252627, font size: 9.8pt (13px), font weight: 400). Expected minimum APCA lightness contrast of 60Lc

HTML

<span class="d-block fs-body2 fc-white">AWS</span>

Target

.fc-white.fs-body2.d-block

Summary

Fix all of the following:

  • Element has insufficient APCA custom level contrast of 57.19Lc (foreground color: #252627, background color: #f8991c, font size: 11.3pt (15px), font weight: 400). Expected minimum APCA lightness contrast of 60Lc

HTML

<span class="d-block fs-caption fc-black-150">Collective</span>

Target

.fc-black-150

Summary

Fix all of the following:

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

HTML

<span class="s-btn s-btn__outlined s-btn__xs mr4 fc-white bc-white h:bg-theme-primary-400 f:bg-theme-primary-400">See more</span>

Target

.bc-white

Summary

Fix all of the following:

  • Element has insufficient APCA custom level contrast of 57.19Lc (foreground color: #252627, background color: #f8991c, font size: 8.3pt (11px), 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

<p class="fc-black-400 fw-bold fs-body2">Add questions, answers or articles to this collection</p>

Target

.s-empty-state > .fs-body2

Summary

Fix any of the following:

  • Element has insufficient color contrast of 6.45 (foreground color: #525960, background color: #edf5fd, font size: 11.3pt (15px), font weight: bold). Expected contrast ratio of 7:1

HTML

<p class="fc-black-400">Become a contributor and help curate this collection.</p>

Target

.s-empty-state > p:nth-child(3)

Summary

Fix any of the following:

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

HTML

<span class="d-block fs-caption fc-black-150">Collective</span>

Target

.fc-black-150

Summary

Fix any of the following:

  • Element has insufficient color contrast of 6.43 (foreground color: #f1f2f3, background color: #8a440a, font size: 9.0pt (12px), 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

<span class="d-block fs-caption fc-black-150">Collective</span>

Target

.fc-black-150

Summary

Fix any of the following:

  • Element has insufficient color contrast of 6.61 (foreground color: #333638, background color: #f1b27e, font size: 9.0pt (12px), 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="/collectives/aws" class="js-gps-track " data-gps-track="subcommunity_link.click({ subcommunity_user_type: 0, subcommunity_slug: aws, link_source: post_header })">AWS</a>

Target

.mb8.fc-black-400.flex--item > .js-gps-track[href$="aws"]

Summary

Fix any of the following:

  • The link has insufficient color contrast of 1.15:1 with the surrounding text. (Minimum contrast is 3:1, link text: #1b75d0, surrounding text: #636b74)
  • The link has no styling (such as underline) to distinguish it from the surrounding text

HTML

<a href="/collectives">

Target

.bbr-sm > a[href$="collectives"]

Summary

Fix any of the following:

  • The link has insufficient color contrast of 1.15:1 with the surrounding text. (Minimum contrast is 3:1, link text: #1b75d0, surrounding text: #636b74)
  • The link has no styling (such as underline) to distinguish it from the surrounding text

HTML

<a href="/collectives/aws?tab=members" class="fc-blue-500" target="_blank">Collective Admin</a>

Target

.fc-blue-500

Summary

Fix any of the following:

  • The link has insufficient color contrast of 1.53:1 with the surrounding text. (Minimum contrast is 3:1, link text: #155ca2, surrounding text: #3b4045)
  • The link has no styling (such as underline) to distinguish it from the surrounding text

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://www.twitch.tv/aws" rel="noreferrer">https://www.twitch.tv/aws</a>

Target

a[rel="noreferrer"][href$="aws"]

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="/collectives/aws" class="js-gps-track " data-gps-track="subcommunity_link.click({ subcommunity_user_type: 0, subcommunity_slug: aws, link_source: post_header })">AWS</a>

Target

.mb8.fc-black-400.flex--item > .js-gps-track[href$="aws"]

Summary

Fix any of the following:

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

HTML

<a href="/collectives">

Target

.bbr-sm > a[href$="collectives"]

Summary

Fix any of the following:

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

HTML

<a href="/collectives/aws?tab=members" class="fc-blue-500" target="_blank">Collective Admin</a>

Target

.fc-blue-500

Summary

Fix any of the following:

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

Ensure links have discernible text. Links must have discernible text. Help URL

HTML

<a class="s-breadcrumbs--link" href="https://stackoverflow.com">

Target

.s-breadcrumbs--link[href$="stackoverflow.com"]

Summary

Fix all of the following:

  • Element is in tab order and does not have accessible text
  • Fix any of the following:
  • Element does not have 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

HTML

<a href="https://stackoverflow.com/help/collections-overview">

Target

.s-sidebarwidget--header.flex--item:nth-child(2) > a

Summary

Fix all of the following:

  • Element is in tab order and does not have accessible text
  • Fix any of the following:
  • Element does not have 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

Ensure links have discernible text. Links must have discernible text. Help URL

HTML

<a class="s-breadcrumbs--link" href="https://stackoverflow.com">

Target

.s-breadcrumbs--link[href$="stackoverflow.com"]

Summary

Fix all of the following:

  • Element is in tab order and does not have accessible text
  • Fix any of the following:
  • Element does not have 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

HTML

<a href="https://stackoverflow.com/help/collections-overview">

Target

.s-sidebarwidget--header.flex--item:nth-child(2) > a

Summary

Fix all of the following:

  • Element is in tab order and does not have accessible text
  • Fix any of the following:
  • Element does not have 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

Ensure links have discernible text. Links must have discernible text. Help URL

HTML

<a class="s-breadcrumbs--link" href="https://stackoverflow.com">

Target

.s-breadcrumbs--link[href$="stackoverflow.com"]

Summary

Fix all of the following:

  • Element is in tab order and does not have accessible text
  • Fix any of the following:
  • Element does not have 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

HTML

<a href="https://stackoverflow.com/help/collections-overview">

Target

.s-sidebarwidget--header.flex--item:nth-child(2) > a

Summary

Fix all of the following:

  • Element is in tab order and does not have accessible text
  • Fix any of the following:
  • Element does not have 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

Ensure links have discernible text. Links must have discernible text. Help URL

HTML

<a class="s-breadcrumbs--link" href="https://stackoverflow.com">

Target

.s-breadcrumbs--link[href$="stackoverflow.com"]

Summary

Fix all of the following:

  • Element is in tab order and does not have accessible text
  • Fix any of the following:
  • Element does not have 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

HTML

<a href="https://stackoverflow.com/help/collections-overview">

Target

.s-sidebarwidget--header.flex--item:nth-child(2) > a

Summary

Fix all of the following:

  • Element is in tab order and does not have accessible text
  • Fix any of the following:
  • Element does not have 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