system/base/box-sizing

ID:: system/base/box-sizing
Automated score:: 94.6
URL:: https://stackoverflow.design/system/base/box-sizing

5 violations: Light: 1Dark: 1HC Light: 1HC Dark: 2

button-name

Light Critical Go to issue button-name-light

Ensure buttons have discernible text. Buttons must have discernible text. Help URL

HTML

<button class="s-btn h:fc-blue-400 px0 s-btn__clear s-btn__icon">

Target

.h\:fc-blue-400

Summary

Fix any of the following:

Element does not have inner text that is visible to screen readers
aria-label attribute does not exist or is empty
aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty
Element has no title attribute
Element does not have an implicit (wrapped) <label>
Element does not have an explicit <label>
Element's default semantics were not overridden with role="none" or role="presentation"

button-name

Dark Critical Go to issue button-name-dark

Ensure buttons have discernible text. Buttons must have discernible text. Help URL

HTML

<button class="s-btn h:fc-blue-400 px0 s-btn__clear s-btn__icon">

Target

.h\:fc-blue-400

Summary

Fix any of the following:

Element does not have inner text that is visible to screen readers
aria-label attribute does not exist or is empty
aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty
Element has no title attribute
Element does not have an implicit (wrapped) <label>
Element does not have an explicit <label>
Element's default semantics were not overridden with role="none" or role="presentation"

button-name

HC Light Critical Go to issue button-name-light-highcontrast

Ensure buttons have discernible text. Buttons must have discernible text. Help URL

HTML

<button class="s-btn h:fc-blue-400 px0 s-btn__clear s-btn__icon">

Target

.h\:fc-blue-400

Summary

Fix any of the following:

Element does not have inner text that is visible to screen readers
aria-label attribute does not exist or is empty
aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty
Element has no title attribute
Element does not have an implicit (wrapped) <label>
Element does not have an explicit <label>
Element's default semantics were not overridden with role="none" or role="presentation"

button-name

HC Dark Critical Go to issue button-name-dark-highcontrast

Ensure buttons have discernible text. Buttons must have discernible text. Help URL

HTML

<button class="s-btn h:fc-blue-400 px0 s-btn__clear s-btn__icon">

Target

.h\:fc-blue-400

Summary

Fix any of the following:

Element does not have inner text that is visible to screen readers
aria-label attribute does not exist or is empty
aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty
Element has no title attribute
Element does not have an implicit (wrapped) <label>
Element does not have an explicit <label>
Element's default semantics were not overridden with role="none" or role="presentation"

color-contrast-enhanced

HC Dark Serious Go to issue color-contrast-enhanced-dark-highcontrast

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: 9.8pt (13px), 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: 9.8pt (13px), 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: 9.8pt (13px), 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: 9.8pt (13px), 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: 9.8pt (13px), 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: 9.8pt (13px), 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: 9.8pt (13px), 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: 9.8pt (13px), 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: 9.8pt (13px), font weight: bold). Expected contrast ratio of 7:1