product/base/box-sizing

ID:
product/base/box-sizing
Automated score:
99.1
URL:
https://stackoverflow.design/product/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 > strong

Summary

Fix any of the following:

  • Element has insufficient color contrast of 6.46 (foreground color: #f9fafa, background color: #575c60, font size: 9.0pt (12px), 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

Summary

Fix any of the following:

  • Element has insufficient color contrast of 6.46 (foreground color: #f9fafa, background color: #575c60, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 7:1

HTML

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

Target

.pb12 > strong

Summary

Fix any of the following:

  • Element has insufficient color contrast of 6.46 (foreground color: #f9fafa, background color: #575c60, font size: 9.0pt (12px), 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 6.46 (foreground color: #f9fafa, background color: #575c60, font size: 9.0pt (12px), 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 6.46 (foreground color: #f9fafa, background color: #575c60, font size: 9.0pt (12px), 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 6.46 (foreground color: #f9fafa, background color: #575c60, font size: 9.0pt (12px), 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 6.46 (foreground color: #f9fafa, background color: #575c60, font size: 9.0pt (12px), 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 6.46 (foreground color: #f9fafa, background color: #575c60, font size: 9.0pt (12px), 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 6.46 (foreground color: #f9fafa, background color: #575c60, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 7:1