system/base/box-sizing

ID:
system/base/box-sizing
Automated score:
99
URL:
https://stackoverflow.design/system/base/box-sizing
View JSON file

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

<strong>Child container</strong>

Target

.pt12.px12.mt0 > strong

Summary

Fix any of the following:

  • Element has insufficient color contrast of 4.74 (foreground color: #ffffff, background color: #737373, font size: 12.0pt (16px), font weight: bold). Expected contrast ratio of 7:1

HTML

<div class="mt12 px12 pb12"><strong>box-sizing: content-box;</strong><br> width: 100%;<br> padding: 0;<br> border-width: 0;</div>

Target

.pb12.mt12.px12

Summary

Fix any of the following:

  • Element has insufficient color contrast of 4.74 (foreground color: #ffffff, background color: #737373, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 7:1

HTML

<strong>box-sizing: content-box;</strong>

Target

.pb12.mt12.px12 > strong

Summary

Fix any of the following:

  • Element has insufficient color contrast of 4.74 (foreground color: #ffffff, background color: #737373, font size: 12.0pt (16px), font weight: bold). Expected contrast ratio of 7:1

HTML

<strong>Child container</strong>

Target

.box-content > .mt0 > strong

Summary

Fix any of the following:

  • Element has insufficient color contrast of 4.74 (foreground color: #ffffff, background color: #737373, font size: 12.0pt (16px), font weight: bold). Expected contrast ratio of 7:1

HTML

<div class="mt12"><strong>box-sizing: content-box;</strong><br> width: 100%;<br> padding: 12px;<br> border-width: 1px;</div>

Target

.box-content > .mt12

Summary

Fix any of the following:

  • Element has insufficient color contrast of 4.74 (foreground color: #ffffff, background color: #737373, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 7:1

HTML

<strong>box-sizing: content-box;</strong>

Target

.box-content > .mt12 > strong

Summary

Fix any of the following:

  • Element has insufficient color contrast of 4.74 (foreground color: #ffffff, background color: #737373, font size: 12.0pt (16px), font weight: bold). Expected contrast ratio of 7:1

HTML

<strong>Child container</strong>

Target

.box-border > .mt0 > strong

Summary

Fix any of the following:

  • Element has insufficient color contrast of 4.74 (foreground color: #ffffff, background color: #737373, font size: 12.0pt (16px), font weight: bold). Expected contrast ratio of 7:1

HTML

<div class="mt12"><strong>box-sizing: border-box;</strong><br> width: 100%;<br> padding: 12px;<br> border-width: 1px;</div>

Target

.box-border > .mt12

Summary

Fix any of the following:

  • Element has insufficient color contrast of 4.74 (foreground color: #ffffff, background color: #737373, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 7:1

HTML

<strong>box-sizing: border-box;</strong>

Target

.box-border > .mt12 > strong

Summary

Fix any of the following:

  • Element has insufficient color contrast of 4.74 (foreground color: #ffffff, background color: #737373, font size: 12.0pt (16px), font weight: bold). Expected contrast ratio of 7:1