product/components/cards

ID:
product/components/cards
Automated score:
98.2
URL:
https://stackoverflow.design/product/components/cards
View JSON file

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

<p class="fs-body1 fc-medium">This is a description of the card’s content.</p>

Target

.s-card__muted.s-card.flex--item:nth-child(1) > .fc-medium.fs-body1

Summary

Fix all of the following:

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

HTML

<p class="fs-body1 fc-medium">This is a description of the card’s content.</p>

Target

.s-card__muted.s-card[href="#"] > .fc-medium.fs-body1

Summary

Fix all of the following:

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

<p class="fs-body1 fc-medium">This is a description of the card’s content.</p>

Target

.s-card__muted.s-card.flex--item:nth-child(1) > .fc-medium.fs-body1

Summary

Fix any of the following:

  • Element has insufficient color contrast of 4.99 (foreground color: #6c7074, background color: #ffffff, font size: 9.8pt (13px), font weight: normal). Expected contrast ratio of 7:1

HTML

<p class="fs-body1 fc-medium">This is a description of the card’s content.</p>

Target

.s-card__muted.s-card[href="#"] > .fc-medium.fs-body1

Summary

Fix any of the following:

  • Element has insufficient color contrast of 4.99 (foreground color: #6c7074, background color: #ffffff, font size: 9.8pt (13px), font weight: normal). Expected contrast ratio of 7:1