system/foundation/theming

ID:
system/foundation/theming
Automated score:
98.2
URL:
https://stackoverflow.design/system/foundation/theming
View JSON file

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

<div class="s-avatar--letter">C</div>

Target

section[aria-labelledby="default"] > .overflow-visible.example-container.svelte-1jonvzi > .d\:bg-black-100.ba.bc-black-225 > .g24.fd-column.d-flex > .theme-team-002.themed.g8 > .g16.ai-center.d-flex > .s-avatar.s-avatar__32.bg-theme-primary-400 > .s-avatar--letter

Summary

Fix all of the following:

  • Element has insufficient APCA custom level contrast of 36.12Lc (foreground color: #ffffff, background color: #f8b830, font size: 16.5pt (22px), font weight: 700). Expected minimum APCA lightness contrast of 60Lc

HTML

<div class="s-avatar--letter">C</div>

Target

.theme-light__forced > .g24.fd-column.d-flex > .theme-team-002.themed.g8 > .g16.ai-center.d-flex > .s-avatar.s-avatar__32.bg-theme-primary-400 > .s-avatar--letter

Summary

Fix all of the following:

  • Element has insufficient APCA custom level contrast of 36.12Lc (foreground color: #ffffff, background color: #f8b830, font size: 16.5pt (22px), font weight: 700). Expected minimum APCA lightness contrast of 60Lc

HTML

<div class="s-avatar--letter">C</div>

Target

.theme-dark__forced > .g24.fd-column.d-flex > .theme-team-002.themed.g8 > .g16.ai-center.d-flex > .s-avatar.s-avatar__32.bg-theme-primary-400 > .s-avatar--letter

Summary

Fix all of the following:

  • Element has insufficient APCA custom level contrast of 36.12Lc (foreground color: #ffffff, background color: #f8b830, font size: 16.5pt (22px), font weight: 700). 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="s-avatar--letter">C</div>

Target

section[aria-labelledby="default"] > .overflow-visible.example-container.svelte-1jonvzi > .d\:bg-black-100.ba.bc-black-225 > .g24.fd-column.d-flex > .theme-team-002.themed.g8 > .g16.ai-center.d-flex > .s-avatar.s-avatar__32.bg-theme-primary-400 > .s-avatar--letter

Summary

Fix all of the following:

  • Element has insufficient APCA custom level contrast of 36.12Lc (foreground color: #ffffff, background color: #f8b830, font size: 16.5pt (22px), font weight: 700). Expected minimum APCA lightness contrast of 60Lc

HTML

<div class="s-avatar--letter">C</div>

Target

.theme-light__forced > .g24.fd-column.d-flex > .theme-team-002.themed.g8 > .g16.ai-center.d-flex > .s-avatar.s-avatar__32.bg-theme-primary-400 > .s-avatar--letter

Summary

Fix all of the following:

  • Element has insufficient APCA custom level contrast of 36.12Lc (foreground color: #ffffff, background color: #f8b830, font size: 16.5pt (22px), font weight: 700). Expected minimum APCA lightness contrast of 60Lc

HTML

<div class="s-avatar--letter">C</div>

Target

.theme-dark__forced > .g24.fd-column.d-flex > .theme-team-002.themed.g8 > .g16.ai-center.d-flex > .s-avatar.s-avatar__32.bg-theme-primary-400 > .s-avatar--letter

Summary

Fix all of the following:

  • Element has insufficient APCA custom level contrast of 36.12Lc (foreground color: #ffffff, background color: #f8b830, font size: 16.5pt (22px), font weight: 700). Expected minimum APCA lightness contrast of 60Lc