system/base/flex

ID:
system/base/flex
Automated score:
98.1
URL:
https://stackoverflow.design/system/base/flex
View JSON file

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

<a href="https://www.joshwcomeau.com/css/interactive-guide-to-flexbox/" rel="external">interactive introduction</a>

Target

a[rel="external"]

Summary

Fix all of the following:

  • Element has insufficient APCA custom level contrast of 13.31Lc (foreground color: #0000ee, background color: #141414, font size: 16.5pt (22px), font weight: 300). Expected minimum APCA lightness contrast of 60Lc

HTML

<a href="/product/base/spacing">the spacing units</a>

Target

a[href$="spacing"]

Summary

Fix all of the following:

  • Element has insufficient APCA custom level contrast of 13.31Lc (foreground color: #0000ee, background color: #141414, font size: 12.0pt (16px), font weight: 300). 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

<div class="d-flex flex__center stacks-flex-example--item bg-black-225 bc-black-250 as-auto svelte-roqz50">.flex--item</div>

Target

.as-auto

Summary

Fix any of the following:

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

HTML

<div class="d-flex flex__center stacks-flex-example--item bg-black-225 bc-black-250 as-baseline svelte-roqz50">.flex--item</div>

Target

.as-baseline

Summary

Fix any of the following:

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

HTML

<div class="d-flex flex__center stacks-flex-example--item bg-black-225 bc-black-250 as-center svelte-roqz50">.flex--item</div>

Target

.as-center

Summary

Fix any of the following:

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

HTML

<div class="d-flex flex__center stacks-flex-example--item bg-black-225 bc-black-250 as-end svelte-roqz50">.flex--item</div>

Target

.as-end

Summary

Fix any of the following:

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

HTML

<div class="d-flex flex__center stacks-flex-example--item bg-black-225 bc-black-250 as-start svelte-roqz50">.flex--item</div>

Target

.as-start

Summary

Fix any of the following:

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

HTML

<div class="d-flex flex__center stacks-flex-example--item bg-black-225 bc-black-250 as-stretch svelte-roqz50">.flex--item</div>

Target

.as-stretch

Summary

Fix any of the following:

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

HTML

<div class="stacks-flex-example--item bg-black-225 bc-black-250 order-first svelte-roqz50">.flex--item 3</div>

Target

.order-first

Summary

Fix any of the following:

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

HTML

<div class="stacks-flex-example--item bg-black-225 bc-black-250 order-last svelte-roqz50">.flex--item 1</div>

Target

.order-last

Summary

Fix any of the following:

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

HTML

<div class="stacks-flex-example--item bg-black-225 bc-black-250 fl-grow1 svelte-roqz50">.flex--item</div>

Target

.fl-grow1.bg-black-225.bc-black-250

Summary

Fix any of the following:

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

HTML

<div class="stacks-flex-example--item bg-black-225 bc-black-250 fl-grow0 svelte-roqz50">.flex--item</div>

Target

.fl-grow0

Summary

Fix any of the following:

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

HTML

<div class="stacks-flex-example--item bg-black-225 bc-black-250 fl-shrink1 svelte-roqz50">.flex--<br>item</div>

Target

.fl-shrink1

Summary

Fix any of the following:

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

HTML

<div class="stacks-flex-example--item bg-black-225 bc-black-250 fl-shrink0 svelte-roqz50">.flex--item</div>

Target

.fl-shrink0.bg-black-225.bc-black-250

Summary

Fix any of the following:

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

HTML

<div class="stacks-flex-example--item bg-black-225 bc-black-250 fl-none svelte-roqz50">.flex--item</div>

Target

.fl-none

Summary

Fix any of the following:

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

HTML

<div class="stacks-flex-example--item bg-black-225 bc-black-250 fl-initial svelte-roqz50">.flex--item</div>

Target

.fl-initial

Summary

Fix any of the following:

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

HTML

<div class="stacks-flex-example--item bg-black-225 bc-black-250 fl-auto .ws2 svelte-roqz50">.flex--item.ws2</div>

Target

.\.ws2

Summary

Fix any of the following:

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

HTML

<div class="stacks-flex-example--item bg-black-225 bc-black-250 fl-equal svelte-roqz50">.flex--item</div>

Target

.fl-equal.bg-black-225.bc-black-250:nth-child(1)

Summary

Fix any of the following:

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

HTML

<div class="stacks-flex-example--item bg-black-225 bc-black-250 fl-equal svelte-roqz50">.flex--item</div>

Target

.fl-equal.bg-black-225.bc-black-250:nth-child(2)

Summary

Fix any of the following:

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

HTML

<div class="stacks-flex-example--item bg-black-225 bc-black-250 fl-equal svelte-roqz50">.flex--item</div>

Target

.fl-equal.bg-black-225.bc-black-250:nth-child(3)

Summary

Fix any of the following:

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