product/base/flex

ID:
product/base/flex
Automated score:
98.3
URL:
https://stackoverflow.design/product/base/flex
View JSON file

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

<div class="ml6 flex--item bg-orange-300 fc-orange-500 px8 py2 bar-pill">Default</div>

Target

section:nth-child(10) > .stacks-preview > .stacks-preview--example > .gy32.fd-column.d-flex > .flex--item:nth-child(1) > .ai-center.mb8.d-flex > .ml6.bg-orange-300.fc-orange-500

Summary

Fix all of the following:

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

HTML

<div class="ml6 flex--item bg-orange-300 fc-orange-500 px8 py2 bar-pill">Default</div>

Target

.flex--item:nth-child(3) > .ai-center.mb8.d-flex > .ml6.bg-orange-300.fc-orange-500

Summary

Fix all of the following:

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

HTML

<div class="ml6 flex--item bg-orange-300 fc-orange-500 px8 py2 bar-pill">Default</div>

Target

.flex--item:nth-child(6) > .ai-center.mb8.d-flex > .ml6.bg-orange-300.fc-orange-500

Summary

Fix all of the following:

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

HTML

<div class="ml6 flex--item bg-orange-300 fc-orange-500 px8 py2 bar-pill">Default</div>

Target

.gy32.fd-column.d-flex > .flex--item:nth-child(5) > .ai-center.mb8.d-flex > .ml6.bg-orange-300.fc-orange-500

Summary

Fix all of the following:

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

HTML

<div class="ml6 flex--item bg-orange-300 fc-orange-500 px8 py2 bar-pill">Default</div>

Target

.gy48.fd-column.d-flex > .flex--item:nth-child(5) > .ai-center.mb8.d-flex > .ml6.bg-orange-300.fc-orange-500

Summary

Fix all of the following:

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

HTML

<div class="ml6 flex--item bg-orange-300 fc-orange-500 px8 py2 bar-pill">Default</div>

Target

section:nth-child(15) > .stacks-preview > .stacks-preview--example > .gy32.fd-column.d-flex > .flex--item:nth-child(1) > .ai-center.mb8.d-flex > .ml6.bg-orange-300.fc-orange-500

Summary

Fix all of the following:

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

<div class="ml6 flex--item bg-orange-300 fc-orange-500 px8 py2 bar-pill">Default</div>

Target

section:nth-child(10) > .stacks-preview > .stacks-preview--example > .gy32.fd-column.d-flex > .flex--item:nth-child(1) > .ai-center.mb8.d-flex > .ml6.bg-orange-300.fc-orange-500

Summary

Fix all of the following:

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

HTML

<div class="ml6 flex--item bg-orange-300 fc-orange-500 px8 py2 bar-pill">Default</div>

Target

.flex--item:nth-child(3) > .ai-center.mb8.d-flex > .ml6.bg-orange-300.fc-orange-500

Summary

Fix all of the following:

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

HTML

<div class="ml6 flex--item bg-orange-300 fc-orange-500 px8 py2 bar-pill">Default</div>

Target

.flex--item:nth-child(6) > .ai-center.mb8.d-flex > .ml6.bg-orange-300.fc-orange-500

Summary

Fix all of the following:

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

HTML

<div class="ml6 flex--item bg-orange-300 fc-orange-500 px8 py2 bar-pill">Default</div>

Target

.gy32.fd-column.d-flex > .flex--item:nth-child(5) > .ai-center.mb8.d-flex > .ml6.bg-orange-300.fc-orange-500

Summary

Fix all of the following:

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

HTML

<div class="ml6 flex--item bg-orange-300 fc-orange-500 px8 py2 bar-pill">Default</div>

Target

.gy48.fd-column.d-flex > .flex--item:nth-child(5) > .ai-center.mb8.d-flex > .ml6.bg-orange-300.fc-orange-500

Summary

Fix all of the following:

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

HTML

<div class="ml6 flex--item bg-orange-300 fc-orange-500 px8 py2 bar-pill">Default</div>

Target

section:nth-child(15) > .stacks-preview > .stacks-preview--example > .gy32.fd-column.d-flex > .flex--item:nth-child(1) > .ai-center.mb8.d-flex > .ml6.bg-orange-300.fc-orange-500

Summary

Fix all of the following:

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