product/components/buttons

ID:: product/components/buttons
Automated score:: 93.4
URL:: https://stackoverflow.design/product/components/buttons

8 violations: Light: 2Dark: 2HC Light: 2HC Dark: 2

aria-allowed-attr

Light Critical Go to issue aria-allowed-attr-light

Ensure an element's role supports its ARIA attributes. Elements must only use supported ARIA attributes. Help URL

HTML

<a href="#" class="ws-nowrap s-btn   is-selected" aria-pressed="true">Ask question</a>

Target

tr:nth-child(1) > .px4.ta-center:nth-child(4) > .is-selected[href="#"]

Summary

Fix all of the following:

ARIA attribute is not allowed: aria-pressed="true"

HTML

<a href="#" class="ws-nowrap s-btn s-btn__outlined  is-selected" aria-pressed="true">Ask question</a>

Target

tr:nth-child(2) > .px4.ta-center:nth-child(4) > .is-selected.s-btn__outlined[href="#"]

Summary

Fix all of the following:

ARIA attribute is not allowed: aria-pressed="true"

HTML

<a href="#" class="ws-nowrap s-btn s-btn__filled  is-selected" aria-pressed="true">Ask question</a>

Target

tr:nth-child(3) > .px4.ta-center:nth-child(4) > .s-btn__filled.is-selected[href="#"]

Summary

Fix all of the following:

ARIA attribute is not allowed: aria-pressed="true"

HTML

<a href="#" class="ws-nowrap s-btn s-btn__danger  is-selected" aria-pressed="true">Ask question</a>

Target

tr:nth-child(4) > .px4.ta-center:nth-child(4) > .s-btn__danger.is-selected[href="#"]

Summary

Fix all of the following:

ARIA attribute is not allowed: aria-pressed="true"

HTML

<a href="#" class="ws-nowrap s-btn s-btn__danger s-btn__outlined is-selected" aria-pressed="true">Ask question</a>

Target

tr:nth-child(5) > .px4.ta-center:nth-child(4) > .s-btn__danger.is-selected[href="#"]

Summary

Fix all of the following:

ARIA attribute is not allowed: aria-pressed="true"

HTML

<a href="#" class="ws-nowrap s-btn s-btn__danger s-btn__filled is-selected" aria-pressed="true">Ask question</a>

Target

.px4.ta-center:nth-child(4) > .s-btn__danger.s-btn__filled[href="#"]

Summary

Fix all of the following:

ARIA attribute is not allowed: aria-pressed="true"

HTML

<a href="#" class="ws-nowrap s-btn s-btn__featured  is-selected" aria-pressed="true">Ask question</a>

Target

tr:nth-child(7) > .px4.ta-center:nth-child(4) > .s-btn__featured.is-selected[href="#"]

Summary

Fix all of the following:

ARIA attribute is not allowed: aria-pressed="true"

HTML

<a href="#" class="ws-nowrap s-btn s-btn__featured s-btn__outlined is-selected" aria-pressed="true">Ask question</a>

Target

tr:nth-child(8) > .px4.ta-center:nth-child(4) > .s-btn__featured.is-selected[href="#"]

Summary

Fix all of the following:

ARIA attribute is not allowed: aria-pressed="true"

HTML

<a href="#" class="ws-nowrap s-btn s-btn__featured s-btn__filled is-selected" aria-pressed="true">Ask question</a>

Target

.px4.ta-center:nth-child(4) > .s-btn__featured.s-btn__filled[href="#"]

Summary

Fix all of the following:

ARIA attribute is not allowed: aria-pressed="true"

HTML

<a href="#" class="ws-nowrap s-btn s-btn__muted  is-selected" aria-pressed="true">Ask question</a>

Target

tr:nth-child(10) > .px4.ta-center:nth-child(4) > .s-btn__muted.is-selected[href="#"]

Summary

Fix all of the following:

ARIA attribute is not allowed: aria-pressed="true"

HTML

<a href="#" class="ws-nowrap s-btn s-btn__muted s-btn__outlined is-selected" aria-pressed="true">Ask question</a>

Target

tr:nth-child(11) > .px4.ta-center:nth-child(4) > .s-btn__muted.is-selected[href="#"]

Summary

Fix all of the following:

ARIA attribute is not allowed: aria-pressed="true"

aria-allowed-attr

Dark Critical Go to issue aria-allowed-attr-dark

Ensure an element's role supports its ARIA attributes. Elements must only use supported ARIA attributes. Help URL

HTML

<a href="#" class="ws-nowrap s-btn   is-selected" aria-pressed="true">Ask question</a>

Target

tr:nth-child(1) > .px4.ta-center:nth-child(4) > .is-selected[href="#"]

Summary

Fix all of the following:

ARIA attribute is not allowed: aria-pressed="true"

HTML

<a href="#" class="ws-nowrap s-btn s-btn__outlined  is-selected" aria-pressed="true">Ask question</a>

Target

tr:nth-child(2) > .px4.ta-center:nth-child(4) > .is-selected.s-btn__outlined[href="#"]

Summary

Fix all of the following:

ARIA attribute is not allowed: aria-pressed="true"

HTML

<a href="#" class="ws-nowrap s-btn s-btn__filled  is-selected" aria-pressed="true">Ask question</a>

Target

tr:nth-child(3) > .px4.ta-center:nth-child(4) > .s-btn__filled.is-selected[href="#"]

Summary

Fix all of the following:

ARIA attribute is not allowed: aria-pressed="true"

HTML

<a href="#" class="ws-nowrap s-btn s-btn__danger  is-selected" aria-pressed="true">Ask question</a>

Target

tr:nth-child(4) > .px4.ta-center:nth-child(4) > .s-btn__danger.is-selected[href="#"]

Summary

Fix all of the following:

ARIA attribute is not allowed: aria-pressed="true"

HTML

<a href="#" class="ws-nowrap s-btn s-btn__danger s-btn__outlined is-selected" aria-pressed="true">Ask question</a>

Target

tr:nth-child(5) > .px4.ta-center:nth-child(4) > .s-btn__danger.is-selected[href="#"]

Summary

Fix all of the following:

ARIA attribute is not allowed: aria-pressed="true"

HTML

<a href="#" class="ws-nowrap s-btn s-btn__danger s-btn__filled is-selected" aria-pressed="true">Ask question</a>

Target

.px4.ta-center:nth-child(4) > .s-btn__danger.s-btn__filled[href="#"]

Summary

Fix all of the following:

ARIA attribute is not allowed: aria-pressed="true"

HTML

<a href="#" class="ws-nowrap s-btn s-btn__featured  is-selected" aria-pressed="true">Ask question</a>

Target

tr:nth-child(7) > .px4.ta-center:nth-child(4) > .s-btn__featured.is-selected[href="#"]

Summary

Fix all of the following:

ARIA attribute is not allowed: aria-pressed="true"

HTML

<a href="#" class="ws-nowrap s-btn s-btn__featured s-btn__outlined is-selected" aria-pressed="true">Ask question</a>

Target

tr:nth-child(8) > .px4.ta-center:nth-child(4) > .s-btn__featured.is-selected[href="#"]

Summary

Fix all of the following:

ARIA attribute is not allowed: aria-pressed="true"

HTML

<a href="#" class="ws-nowrap s-btn s-btn__featured s-btn__filled is-selected" aria-pressed="true">Ask question</a>

Target

.px4.ta-center:nth-child(4) > .s-btn__featured.s-btn__filled[href="#"]

Summary

Fix all of the following:

ARIA attribute is not allowed: aria-pressed="true"

HTML

<a href="#" class="ws-nowrap s-btn s-btn__muted  is-selected" aria-pressed="true">Ask question</a>

Target

tr:nth-child(10) > .px4.ta-center:nth-child(4) > .s-btn__muted.is-selected[href="#"]

Summary

Fix all of the following:

ARIA attribute is not allowed: aria-pressed="true"

HTML

<a href="#" class="ws-nowrap s-btn s-btn__muted s-btn__outlined is-selected" aria-pressed="true">Ask question</a>

Target

tr:nth-child(11) > .px4.ta-center:nth-child(4) > .s-btn__muted.is-selected[href="#"]

Summary

Fix all of the following:

ARIA attribute is not allowed: aria-pressed="true"

aria-allowed-attr

HC Light Critical Go to issue aria-allowed-attr-light-highcontrast

Ensure an element's role supports its ARIA attributes. Elements must only use supported ARIA attributes. Help URL

HTML

<a href="#" class="ws-nowrap s-btn   is-selected" aria-pressed="true">Ask question</a>

Target

tr:nth-child(1) > .px4.ta-center:nth-child(4) > .is-selected[href="#"]

Summary

Fix all of the following:

ARIA attribute is not allowed: aria-pressed="true"

HTML

<a href="#" class="ws-nowrap s-btn s-btn__outlined  is-selected" aria-pressed="true">Ask question</a>

Target

tr:nth-child(2) > .px4.ta-center:nth-child(4) > .is-selected.s-btn__outlined[href="#"]

Summary

Fix all of the following:

ARIA attribute is not allowed: aria-pressed="true"

HTML

<a href="#" class="ws-nowrap s-btn s-btn__filled  is-selected" aria-pressed="true">Ask question</a>

Target

tr:nth-child(3) > .px4.ta-center:nth-child(4) > .s-btn__filled.is-selected[href="#"]

Summary

Fix all of the following:

ARIA attribute is not allowed: aria-pressed="true"

HTML

<a href="#" class="ws-nowrap s-btn s-btn__danger  is-selected" aria-pressed="true">Ask question</a>

Target

tr:nth-child(4) > .px4.ta-center:nth-child(4) > .s-btn__danger.is-selected[href="#"]

Summary

Fix all of the following:

ARIA attribute is not allowed: aria-pressed="true"

HTML

<a href="#" class="ws-nowrap s-btn s-btn__danger s-btn__outlined is-selected" aria-pressed="true">Ask question</a>

Target

tr:nth-child(5) > .px4.ta-center:nth-child(4) > .s-btn__danger.is-selected[href="#"]

Summary

Fix all of the following:

ARIA attribute is not allowed: aria-pressed="true"

HTML

<a href="#" class="ws-nowrap s-btn s-btn__danger s-btn__filled is-selected" aria-pressed="true">Ask question</a>

Target

.px4.ta-center:nth-child(4) > .s-btn__danger.s-btn__filled[href="#"]

Summary

Fix all of the following:

ARIA attribute is not allowed: aria-pressed="true"

HTML

<a href="#" class="ws-nowrap s-btn s-btn__featured  is-selected" aria-pressed="true">Ask question</a>

Target

tr:nth-child(7) > .px4.ta-center:nth-child(4) > .s-btn__featured.is-selected[href="#"]

Summary

Fix all of the following:

ARIA attribute is not allowed: aria-pressed="true"

HTML

<a href="#" class="ws-nowrap s-btn s-btn__featured s-btn__outlined is-selected" aria-pressed="true">Ask question</a>

Target

tr:nth-child(8) > .px4.ta-center:nth-child(4) > .s-btn__featured.is-selected[href="#"]

Summary

Fix all of the following:

ARIA attribute is not allowed: aria-pressed="true"

HTML

<a href="#" class="ws-nowrap s-btn s-btn__featured s-btn__filled is-selected" aria-pressed="true">Ask question</a>

Target

.px4.ta-center:nth-child(4) > .s-btn__featured.s-btn__filled[href="#"]

Summary

Fix all of the following:

ARIA attribute is not allowed: aria-pressed="true"

HTML

<a href="#" class="ws-nowrap s-btn s-btn__muted  is-selected" aria-pressed="true">Ask question</a>

Target

tr:nth-child(10) > .px4.ta-center:nth-child(4) > .s-btn__muted.is-selected[href="#"]

Summary

Fix all of the following:

ARIA attribute is not allowed: aria-pressed="true"

HTML

<a href="#" class="ws-nowrap s-btn s-btn__muted s-btn__outlined is-selected" aria-pressed="true">Ask question</a>

Target

tr:nth-child(11) > .px4.ta-center:nth-child(4) > .s-btn__muted.is-selected[href="#"]

Summary

Fix all of the following:

ARIA attribute is not allowed: aria-pressed="true"

aria-allowed-attr

HC Dark Critical Go to issue aria-allowed-attr-dark-highcontrast

Ensure an element's role supports its ARIA attributes. Elements must only use supported ARIA attributes. Help URL

HTML

<a href="#" class="ws-nowrap s-btn   is-selected" aria-pressed="true">Ask question</a>

Target

tr:nth-child(1) > .px4.ta-center:nth-child(4) > .is-selected[href="#"]

Summary

Fix all of the following:

ARIA attribute is not allowed: aria-pressed="true"

HTML

<a href="#" class="ws-nowrap s-btn s-btn__outlined  is-selected" aria-pressed="true">Ask question</a>

Target

tr:nth-child(2) > .px4.ta-center:nth-child(4) > .is-selected.s-btn__outlined[href="#"]

Summary

Fix all of the following:

ARIA attribute is not allowed: aria-pressed="true"

HTML

<a href="#" class="ws-nowrap s-btn s-btn__filled  is-selected" aria-pressed="true">Ask question</a>

Target

tr:nth-child(3) > .px4.ta-center:nth-child(4) > .s-btn__filled.is-selected[href="#"]

Summary

Fix all of the following:

ARIA attribute is not allowed: aria-pressed="true"

HTML

<a href="#" class="ws-nowrap s-btn s-btn__danger  is-selected" aria-pressed="true">Ask question</a>

Target

tr:nth-child(4) > .px4.ta-center:nth-child(4) > .s-btn__danger.is-selected[href="#"]

Summary

Fix all of the following:

ARIA attribute is not allowed: aria-pressed="true"

HTML

<a href="#" class="ws-nowrap s-btn s-btn__danger s-btn__outlined is-selected" aria-pressed="true">Ask question</a>

Target

tr:nth-child(5) > .px4.ta-center:nth-child(4) > .s-btn__danger.is-selected[href="#"]

Summary

Fix all of the following:

ARIA attribute is not allowed: aria-pressed="true"

HTML

<a href="#" class="ws-nowrap s-btn s-btn__danger s-btn__filled is-selected" aria-pressed="true">Ask question</a>

Target

.px4.ta-center:nth-child(4) > .s-btn__danger.s-btn__filled[href="#"]

Summary

Fix all of the following:

ARIA attribute is not allowed: aria-pressed="true"

HTML

<a href="#" class="ws-nowrap s-btn s-btn__featured  is-selected" aria-pressed="true">Ask question</a>

Target

tr:nth-child(7) > .px4.ta-center:nth-child(4) > .s-btn__featured.is-selected[href="#"]

Summary

Fix all of the following:

ARIA attribute is not allowed: aria-pressed="true"

HTML

<a href="#" class="ws-nowrap s-btn s-btn__featured s-btn__outlined is-selected" aria-pressed="true">Ask question</a>

Target

tr:nth-child(8) > .px4.ta-center:nth-child(4) > .s-btn__featured.is-selected[href="#"]

Summary

Fix all of the following:

ARIA attribute is not allowed: aria-pressed="true"

HTML

<a href="#" class="ws-nowrap s-btn s-btn__featured s-btn__filled is-selected" aria-pressed="true">Ask question</a>

Target

.px4.ta-center:nth-child(4) > .s-btn__featured.s-btn__filled[href="#"]

Summary

Fix all of the following:

ARIA attribute is not allowed: aria-pressed="true"

HTML

<a href="#" class="ws-nowrap s-btn s-btn__muted  is-selected" aria-pressed="true">Ask question</a>

Target

tr:nth-child(10) > .px4.ta-center:nth-child(4) > .s-btn__muted.is-selected[href="#"]

Summary

Fix all of the following:

ARIA attribute is not allowed: aria-pressed="true"

HTML

<a href="#" class="ws-nowrap s-btn s-btn__muted s-btn__outlined is-selected" aria-pressed="true">Ask question</a>

Target

tr:nth-child(11) > .px4.ta-center:nth-child(4) > .s-btn__muted.is-selected[href="#"]

Summary

Fix all of the following:

ARIA attribute is not allowed: aria-pressed="true"

color-contrast-apca-custom

Light Serious Go to issue color-contrast-apca-custom-light

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

<button class="ws-nowrap s-btn  is-selected" type="button" aria-pressed="true">Ask question</button>

Target

.stacks-preview:nth-child(9) > .stacks-preview--example > .overflow-x-auto > .wmn5 > tbody > tr:nth-child(1) > .px4.ta-center:nth-child(4) > .is-selected[type="button"]

Summary

Fix all of the following:

Element has insufficient APCA custom level contrast of 58.28Lc (foreground color: #0c3b6a, background color: #92c2f2, font size: 9.8pt (13px), font weight: 400). Expected minimum APCA lightness contrast of 60Lc

HTML

<button class="ws-nowrap s-btn s-btn__outlined is-selected" type="button" aria-pressed="true">Ask question</button>

Target

.stacks-preview:nth-child(9) > .stacks-preview--example > .overflow-x-auto > .wmn5 > tbody > tr:nth-child(2) > .px4.ta-center:nth-child(4) > .is-selected.s-btn__outlined[type="button"]

Summary

Fix all of the following:

Element has insufficient APCA custom level contrast of 58.28Lc (foreground color: #0c3b6a, background color: #92c2f2, font size: 9.8pt (13px), font weight: 400). Expected minimum APCA lightness contrast of 60Lc

HTML

<button class="ws-nowrap s-btn s-btn__muted s-btn__filled is-selected" type="button" aria-pressed="true">Ask question</button>

Target

.s-btn__filled.s-btn__muted.is-selected

Summary

Fix all of the following:

Element has insufficient APCA custom level contrast of 58.98Lc (foreground color: #0c0d0e, background color: #a7adb4, font size: 9.8pt (13px), font weight: 400). Expected minimum APCA lightness contrast of 60Lc

HTML

<a href="#" class="ws-nowrap s-btn   is-selected" aria-pressed="true">Ask question</a>

Target

tr:nth-child(1) > .px4.ta-center:nth-child(4) > .is-selected[href="#"]

Summary

Fix all of the following:

Element has insufficient APCA custom level contrast of 58.28Lc (foreground color: #0c3b6a, background color: #92c2f2, font size: 9.8pt (13px), font weight: 400). Expected minimum APCA lightness contrast of 60Lc

HTML

<a href="#" class="ws-nowrap s-btn  " disabled="">Ask question</a>

Target

tr:nth-child(1) > .px4.ta-center:nth-child(5) > a[href="#"]

Summary

Fix all of the following:

Element has insufficient APCA custom level contrast of 43.31Lc (foreground color: #82b3e5, background color: #ffffff, font size: 9.8pt (13px), font weight: 400). Expected minimum APCA lightness contrast of 60Lc

HTML

<a href="#" class="ws-nowrap s-btn s-btn__outlined  is-selected" aria-pressed="true">Ask question</a>

Target

tr:nth-child(2) > .px4.ta-center:nth-child(4) > .is-selected.s-btn__outlined[href="#"]

Summary

Fix all of the following:

Element has insufficient APCA custom level contrast of 58.28Lc (foreground color: #0c3b6a, background color: #92c2f2, font size: 9.8pt (13px), font weight: 400). Expected minimum APCA lightness contrast of 60Lc

HTML

<a href="#" class="ws-nowrap s-btn s-btn__outlined " disabled="">Ask question</a>

Target

tr:nth-child(2) > .px4.ta-center:nth-child(5) > .s-btn__outlined[href="#"]

Summary

Fix all of the following:

Element has insufficient APCA custom level contrast of 43.31Lc (foreground color: #82b3e5, background color: #ffffff, font size: 9.8pt (13px), font weight: 400). Expected minimum APCA lightness contrast of 60Lc

HTML

<a href="#" class="ws-nowrap s-btn s-btn__filled " disabled="">Ask question</a>

Target

tr:nth-child(3) > .px4.ta-center:nth-child(5) > .s-btn__filled[href="#"]

Summary

Fix all of the following:

Element has insufficient APCA custom level contrast of 48.07Lc (foreground color: #ffffff, background color: #82b3e5, font size: 9.8pt (13px), font weight: 400). Expected minimum APCA lightness contrast of 60Lc

HTML

<a href="#" class="ws-nowrap s-btn s-btn__danger " disabled="">Ask question</a>

Target

tr:nth-child(4) > .px4.ta-center:nth-child(5) > .s-btn__danger[href="#"]

Summary

Fix all of the following:

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

HTML

<a href="#" class="ws-nowrap s-btn s-btn__danger s-btn__outlined" disabled="">Ask question</a>

Target

.px4.ta-center:nth-child(5) > .s-btn__danger.s-btn__outlined[href="#"]

Summary

Fix all of the following:

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

HTML

<a href="#" class="ws-nowrap s-btn s-btn__danger s-btn__filled" disabled="">Ask question</a>

Target

.px4.ta-center:nth-child(5) > .s-btn__danger.s-btn__filled[href="#"]

Summary

Fix all of the following:

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

HTML

<a href="#" class="ws-nowrap s-btn s-btn__featured " disabled="">Ask question</a>

Target

tr:nth-child(7) > .px4.ta-center:nth-child(5) > .s-btn__featured[href="#"]

Summary

Fix all of the following:

Element has insufficient APCA custom level contrast of 54.18Lc (foreground color: #9295d1, background color: #ffffff, font size: 9.8pt (13px), font weight: 400). Expected minimum APCA lightness contrast of 60Lc

HTML

<a href="#" class="ws-nowrap s-btn s-btn__featured s-btn__outlined" disabled="">Ask question</a>

Target

.px4.ta-center:nth-child(5) > .s-btn__featured.s-btn__outlined[href="#"]

Summary

Fix all of the following:

Element has insufficient APCA custom level contrast of 54.18Lc (foreground color: #9295d1, background color: #ffffff, font size: 9.8pt (13px), font weight: 400). Expected minimum APCA lightness contrast of 60Lc

HTML

<a href="#" class="ws-nowrap s-btn s-btn__featured s-btn__filled" disabled="">Ask question</a>

Target

.px4.ta-center:nth-child(5) > .s-btn__featured.s-btn__filled[href="#"]

Summary

Fix all of the following:

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

HTML

<a href="#" class="ws-nowrap s-btn s-btn__muted " disabled="">Ask question</a>

Target

tr:nth-child(10) > .px4.ta-center:nth-child(5) > .s-btn__muted[href="#"]

Summary

Fix all of the following:

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

HTML

<a href="#" class="ws-nowrap s-btn s-btn__muted s-btn__outlined" disabled="">Ask question</a>

Target

.px4.ta-center:nth-child(5) > .s-btn__muted.s-btn__outlined[href="#"]

Summary

Fix all of the following:

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

HTML

<button class="ws-nowrap s-btn   is-loading is-selected" type="button" aria-pressed="true">Ask question</button>

Target

tr:nth-child(1) > .px4.ta-center:nth-child(4) > .is-loading.is-selected[type="button"]

Summary

Fix all of the following:

Element has insufficient APCA custom level contrast of 58.28Lc (foreground color: #0c3b6a, background color: #92c2f2, font size: 9.8pt (13px), font weight: 400). Expected minimum APCA lightness contrast of 60Lc

HTML

<button class="ws-nowrap s-btn s-btn__outlined  is-loading is-selected" type="button" aria-pressed="true">Ask question</button>

Target

tr:nth-child(2) > .px4.ta-center:nth-child(4) > .is-loading.is-selected.s-btn__outlined

Summary

Fix all of the following:

Element has insufficient APCA custom level contrast of 58.28Lc (foreground color: #0c3b6a, background color: #92c2f2, font size: 9.8pt (13px), font weight: 400). Expected minimum APCA lightness contrast of 60Lc

HTML

<button class="ws-nowrap s-btn   s-btn__dropdown is-selected" type="button" aria-pressed="true">Ask question</button>

Target

tr:nth-child(1) > .px4.ta-center:nth-child(4) > .s-btn__dropdown.is-selected[type="button"]

Summary

Fix all of the following:

Element has insufficient APCA custom level contrast of 58.28Lc (foreground color: #0c3b6a, background color: #92c2f2, font size: 9.8pt (13px), font weight: 400). Expected minimum APCA lightness contrast of 60Lc

HTML

<button class="ws-nowrap s-btn s-btn__outlined  s-btn__dropdown is-selected" type="button" aria-pressed="true">Ask question</button>

Target

tr:nth-child(2) > .px4.ta-center:nth-child(4) > .s-btn__dropdown.is-selected.s-btn__outlined

Summary

Fix all of the following:

Element has insufficient APCA custom level contrast of 58.28Lc (foreground color: #0c3b6a, background color: #92c2f2, font size: 9.8pt (13px), font weight: 400). Expected minimum APCA lightness contrast of 60Lc

HTML

<span class="s-btn--number">198</span>

Target

tr:nth-child(1) > .px4.ta-center:nth-child(3) > button[type="button"] > .s-btn--badge > .s-btn--number

Summary

Fix all of the following:

Element has insufficient APCA custom level contrast of 44.03Lc (foreground color: #ffffff, background color: #8dbae8, font size: 9.0pt (12px), font weight: 400). Expected minimum APCA lightness contrast of 60Lc

HTML

<button class="ws-nowrap s-btn   is-selected" type="button" aria-pressed="true">
                                        Active <span class="s-btn--badge"><span class="s-btn--number">198</span></span>
                                    </button>

Target

section:nth-child(11) > .stacks-preview > .stacks-preview--example > .overflow-x-auto > .wmn5 > tbody > tr:nth-child(1) > .px4.ta-center:nth-child(4) > .is-selected[type="button"]

Summary

Fix all of the following:

Element has insufficient APCA custom level contrast of 58.28Lc (foreground color: #0c3b6a, background color: #92c2f2, font size: 9.8pt (13px), font weight: 400). Expected minimum APCA lightness contrast of 60Lc

HTML

<span class="s-btn--number">198</span>

Target

tr:nth-child(1) > .px4.ta-center:nth-child(4) > .is-selected[type="button"] > .s-btn--badge > .s-btn--number

Summary

Fix all of the following:

Element has insufficient APCA custom level contrast of 53.29Lc (foreground color: #c9e1f9, background color: #4f7fae, font size: 9.0pt (12px), font weight: 400). Expected minimum APCA lightness contrast of 60Lc

HTML

<span class="s-btn--number">198</span>

Target

tr:nth-child(2) > .px4.ta-center:nth-child(3) > .s-btn__outlined[type="button"] > .s-btn--badge > .s-btn--number

Summary

Fix all of the following:

Element has insufficient APCA custom level contrast of 44.03Lc (foreground color: #ffffff, background color: #8dbae8, font size: 9.0pt (12px), font weight: 400). Expected minimum APCA lightness contrast of 60Lc

HTML

<button class="ws-nowrap s-btn s-btn__outlined  is-selected" type="button" aria-pressed="true">
                                        Active <span class="s-btn--badge"><span class="s-btn--number">198</span></span>
                                    </button>

Target

section:nth-child(11) > .stacks-preview > .stacks-preview--example > .overflow-x-auto > .wmn5 > tbody > tr:nth-child(2) > .px4.ta-center:nth-child(4) > .is-selected.s-btn__outlined[type="button"]

Summary

Fix all of the following:

Element has insufficient APCA custom level contrast of 58.28Lc (foreground color: #0c3b6a, background color: #92c2f2, font size: 9.8pt (13px), font weight: 400). Expected minimum APCA lightness contrast of 60Lc

HTML

<span class="s-btn--number">198</span>

Target

tr:nth-child(2) > .px4.ta-center:nth-child(4) > .is-selected.s-btn__outlined[type="button"] > .s-btn--badge > .s-btn--number

Summary

Fix all of the following:

Element has insufficient APCA custom level contrast of 53.29Lc (foreground color: #c9e1f9, background color: #4f7fae, font size: 9.0pt (12px), font weight: 400). Expected minimum APCA lightness contrast of 60Lc

HTML

<span class="s-btn--number">198</span>

Target

tr:nth-child(3) > .px4.ta-center:nth-child(3) > .s-btn__filled[type="button"] > .s-btn--badge > .s-btn--number

Summary

Fix all of the following:

Element has insufficient APCA custom level contrast of 42.91Lc (foreground color: #14589d, background color: #8dbae8, font size: 9.0pt (12px), font weight: 400). Expected minimum APCA lightness contrast of 60Lc

HTML

<span class="s-btn--number">198</span>

Target

tr:nth-child(3) > .px4.ta-center:nth-child(4) > .s-btn__filled.is-selected[type="button"] > .s-btn--badge > .s-btn--number

Summary

Fix all of the following:

Element has insufficient APCA custom level contrast of 41.75Lc (foreground color: #114c86, background color: #8aaed1, font size: 9.0pt (12px), font weight: 400). Expected minimum APCA lightness contrast of 60Lc

HTML

<span class="s-btn--number">198</span>

Target

tr:nth-child(4) > .px4.ta-center:nth-child(3) > .s-btn__danger[type="button"] > .s-btn--badge > .s-btn--number

Summary

Fix all of the following:

Element has insufficient APCA custom level contrast of 56.15Lc (foreground color: #ffffff, background color: #ce9090, font size: 9.0pt (12px), font weight: 400). Expected minimum APCA lightness contrast of 60Lc

HTML

<span class="s-btn--number">198</span>

Target

tr:nth-child(4) > .px4.ta-center:nth-child(4) > .s-btn__danger.is-selected[type="button"] > .s-btn--badge > .s-btn--number

Summary

Fix all of the following:

Element has insufficient APCA custom level contrast of 56.2Lc (foreground color: #f7d5d5, background color: #a65f5f, font size: 9.0pt (12px), font weight: 400). Expected minimum APCA lightness contrast of 60Lc

HTML

<span class="s-btn--number">198</span>

Target

.px4.ta-center:nth-child(3) > .s-btn__danger.s-btn__outlined[type="button"] > .s-btn--badge > .s-btn--number

Summary

Fix all of the following:

Element has insufficient APCA custom level contrast of 56.15Lc (foreground color: #ffffff, background color: #ce9090, font size: 9.0pt (12px), font weight: 400). Expected minimum APCA lightness contrast of 60Lc

HTML

<span class="s-btn--number">198</span>

Target

.s-btn__danger.is-selected.s-btn__outlined > .s-btn--badge > .s-btn--number

Summary

Fix all of the following:

Element has insufficient APCA custom level contrast of 56.2Lc (foreground color: #f7d5d5, background color: #a65f5f, font size: 9.0pt (12px), font weight: 400). Expected minimum APCA lightness contrast of 60Lc

HTML

<span class="s-btn--number">198</span>

Target

.px4.ta-center:nth-child(3) > .s-btn__danger.s-btn__filled[type="button"] > .s-btn--badge > .s-btn--number

Summary

Fix all of the following:

Element has insufficient APCA custom level contrast of 50.86Lc (foreground color: #641919, background color: #e49999, font size: 9.0pt (12px), font weight: 400). Expected minimum APCA lightness contrast of 60Lc

HTML

<span class="s-btn--number">198</span>

Target

.s-btn__danger.s-btn__filled.is-selected > .s-btn--badge > .s-btn--number

Summary

Fix all of the following:

Element has insufficient APCA custom level contrast of 44.57Lc (foreground color: #2f0a0a, background color: #ae8a8a, font size: 9.0pt (12px), font weight: 400). Expected minimum APCA lightness contrast of 60Lc

HTML

<span class="s-btn--number">198</span>

Target

tr:nth-child(7) > .px4.ta-center:nth-child(3) > .s-btn__featured[type="button"] > .s-btn--badge > .s-btn--number

Summary

Fix all of the following:

Element has insufficient APCA custom level contrast of 54.44Lc (foreground color: #ffffff, background color: #9c9fd6, font size: 9.0pt (12px), font weight: 400). Expected minimum APCA lightness contrast of 60Lc

HTML

<span class="s-btn--number">198</span>

Target

tr:nth-child(7) > .px4.ta-center:nth-child(4) > .s-btn__featured.is-selected[type="button"] > .s-btn--badge > .s-btn--number

Summary

Fix all of the following:

Element has insufficient APCA custom level contrast of 54.78Lc (foreground color: #dddef7, background color: #7275b4, font size: 9.0pt (12px), font weight: 400). Expected minimum APCA lightness contrast of 60Lc

HTML

<span class="s-btn--number">198</span>

Target

.px4.ta-center:nth-child(3) > .s-btn__featured.s-btn__outlined[type="button"] > .s-btn--badge > .s-btn--number

Summary

Fix all of the following:

Element has insufficient APCA custom level contrast of 54.44Lc (foreground color: #ffffff, background color: #9c9fd6, font size: 9.0pt (12px), font weight: 400). Expected minimum APCA lightness contrast of 60Lc

HTML

<span class="s-btn--number">198</span>

Target

.s-btn__featured.is-selected.s-btn__outlined > .s-btn--badge > .s-btn--number

Summary

Fix all of the following:

Element has insufficient APCA custom level contrast of 54.78Lc (foreground color: #dddef7, background color: #7275b4, font size: 9.0pt (12px), font weight: 400). Expected minimum APCA lightness contrast of 60Lc

HTML

<span class="s-btn--number">198</span>

Target

.px4.ta-center:nth-child(3) > .s-btn__featured.s-btn__filled[type="button"] > .s-btn--badge > .s-btn--number

Summary

Fix all of the following:

Element has insufficient APCA custom level contrast of 54.11Lc (foreground color: #2b2e67, background color: #aaade7, font size: 9.0pt (12px), font weight: 400). Expected minimum APCA lightness contrast of 60Lc

HTML

<span class="s-btn--number">198</span>

Target

.s-btn__featured.s-btn__filled.is-selected > .s-btn--badge > .s-btn--number

Summary

Fix all of the following:

Element has insufficient APCA custom level contrast of 47.24Lc (foreground color: #15173d, background color: #9496bd, font size: 9.0pt (12px), font weight: 400). Expected minimum APCA lightness contrast of 60Lc

HTML

<span class="s-btn--number">198</span>

Target

tr:nth-child(10) > .px4.ta-center:nth-child(3) > .s-btn__muted[type="button"] > .s-btn--badge > .s-btn--number

Summary

Fix all of the following:

Element has insufficient APCA custom level contrast of 56.46Lc (foreground color: #ffffff, background color: #9da0a2, font size: 9.0pt (12px), font weight: 400). Expected minimum APCA lightness contrast of 60Lc

HTML

<span class="s-btn--number">198</span>

Target

tr:nth-child(10) > .px4.ta-center:nth-child(4) > .s-btn__muted.is-selected[type="button"] > .s-btn--badge > .s-btn--number

Summary

Fix all of the following:

Element has insufficient APCA custom level contrast of 55.18Lc (foreground color: #f1f3f4, background color: #8f9397, font size: 9.0pt (12px), font weight: 400). Expected minimum APCA lightness contrast of 60Lc

HTML

<span class="s-btn--number">198</span>

Target

.px4.ta-center:nth-child(3) > .s-btn__muted.s-btn__outlined[type="button"] > .s-btn--badge > .s-btn--number

Summary

Fix all of the following:

Element has insufficient APCA custom level contrast of 56.46Lc (foreground color: #ffffff, background color: #9da0a2, font size: 9.0pt (12px), font weight: 400). Expected minimum APCA lightness contrast of 60Lc

HTML

<span class="s-btn--number">198</span>

Target

.s-btn__muted.is-selected.s-btn__outlined > .s-btn--badge > .s-btn--number

Summary

Fix all of the following:

Element has insufficient APCA custom level contrast of 55.18Lc (foreground color: #f1f3f4, background color: #8f9397, font size: 9.0pt (12px), font weight: 400). Expected minimum APCA lightness contrast of 60Lc

HTML

<em class="fc-black-350">N/A</em>

Target

.fc-black-350

Summary

Fix all of the following:

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

color-contrast-apca-custom

Dark Serious Go to issue color-contrast-apca-custom-dark

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="stacks-badge-dotnet--text d-flex flex__center brr-sm px8 py4">Razor</div>

Target

.stacks-badge-dotnet--text

Summary

Fix all of the following:

Element has insufficient APCA custom level contrast of 45.6Lc (foreground color: #252627, background color: #9e92c7, font size: 9.8pt (13px), font weight: 400). Expected minimum APCA lightness contrast of 60Lc

HTML

<button class="ws-nowrap s-btn s-btn__danger  is-selected" type="button" aria-pressed="true">Ask question</button>

Target

tr:nth-child(1) > .px4.ta-center:nth-child(4) > .s-btn__danger.is-selected[type="button"]

Summary

Fix all of the following:

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

HTML

<button class="ws-nowrap s-btn s-btn__danger s-btn__outlined is-selected" type="button" aria-pressed="true">Ask question</button>

Target

tr:nth-child(2) > .px4.ta-center:nth-child(4) > .s-btn__danger.is-selected.s-btn__outlined

Summary

Fix all of the following:

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

HTML

<button class="ws-nowrap s-btn s-btn__muted s-btn__filled is-selected" type="button" aria-pressed="true">Ask question</button>

Target

.s-btn__filled.s-btn__muted.is-selected

Summary

Fix all of the following:

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

HTML

<a href="#" class="ws-nowrap s-btn  " disabled="">Ask question</a>

Target

tr:nth-child(1) > .px4.ta-center:nth-child(5) > a[href="#"]

Summary

Fix all of the following:

Element has insufficient APCA custom level contrast of 29.02Lc (foreground color: #607d9b, background color: #252627, font size: 9.8pt (13px), font weight: 400). Expected minimum APCA lightness contrast of 60Lc

HTML

<a href="#" class="ws-nowrap s-btn s-btn__outlined " disabled="">Ask question</a>

Target

tr:nth-child(2) > .px4.ta-center:nth-child(5) > .s-btn__outlined[href="#"]

Summary

Fix all of the following:

Element has insufficient APCA custom level contrast of 29.02Lc (foreground color: #607d9b, background color: #252627, font size: 9.8pt (13px), font weight: 400). Expected minimum APCA lightness contrast of 60Lc

HTML

<a href="#" class="ws-nowrap s-btn s-btn__filled " disabled="">Ask question</a>

Target

tr:nth-child(3) > .px4.ta-center:nth-child(5) > .s-btn__filled[href="#"]

Summary

Fix all of the following:

Element has insufficient APCA custom level contrast of 30.54Lc (foreground color: #252627, background color: #607d9b, font size: 9.8pt (13px), font weight: 400). Expected minimum APCA lightness contrast of 60Lc

HTML

<a href="#" class="ws-nowrap s-btn s-btn__danger  is-selected" aria-pressed="true">Ask question</a>

Target

tr:nth-child(4) > .px4.ta-center:nth-child(4) > .s-btn__danger.is-selected[href="#"]

Summary

Fix all of the following:

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

HTML

<a href="#" class="ws-nowrap s-btn s-btn__danger " disabled="">Ask question</a>

Target

tr:nth-child(4) > .px4.ta-center:nth-child(5) > .s-btn__danger[href="#"]

Summary

Fix all of the following:

Element has insufficient APCA custom level contrast of 33.74Lc (foreground color: #9b7d7e, background color: #252627, font size: 9.8pt (13px), font weight: 400). Expected minimum APCA lightness contrast of 60Lc

HTML

<a href="#" class="ws-nowrap s-btn s-btn__danger s-btn__outlined is-selected" aria-pressed="true">Ask question</a>

Target

tr:nth-child(5) > .px4.ta-center:nth-child(4) > .s-btn__danger.is-selected[href="#"]

Summary

Fix all of the following:

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

HTML

<a href="#" class="ws-nowrap s-btn s-btn__danger s-btn__outlined" disabled="">Ask question</a>

Target

.px4.ta-center:nth-child(5) > .s-btn__danger.s-btn__outlined[href="#"]

Summary

Fix all of the following:

Element has insufficient APCA custom level contrast of 33.74Lc (foreground color: #9b7d7e, background color: #252627, font size: 9.8pt (13px), font weight: 400). Expected minimum APCA lightness contrast of 60Lc

HTML

<a href="#" class="ws-nowrap s-btn s-btn__danger s-btn__filled" disabled="">Ask question</a>

Target

.px4.ta-center:nth-child(5) > .s-btn__danger.s-btn__filled[href="#"]

Summary

Fix all of the following:

Element has insufficient APCA custom level contrast of 29.12Lc (foreground color: #252627, background color: #9a6b6b, font size: 9.8pt (13px), font weight: 400). Expected minimum APCA lightness contrast of 60Lc

HTML

<a href="#" class="ws-nowrap s-btn s-btn__featured " disabled="">Ask question</a>

Target

tr:nth-child(7) > .px4.ta-center:nth-child(5) > .s-btn__featured[href="#"]

Summary

Fix all of the following:

Element has insufficient APCA custom level contrast of 36.32Lc (foreground color: #87889e, background color: #252627, font size: 9.8pt (13px), font weight: 400). Expected minimum APCA lightness contrast of 60Lc

HTML

<a href="#" class="ws-nowrap s-btn s-btn__featured s-btn__outlined" disabled="">Ask question</a>

Target

.px4.ta-center:nth-child(5) > .s-btn__featured.s-btn__outlined[href="#"]

Summary

Fix all of the following:

Element has insufficient APCA custom level contrast of 36.32Lc (foreground color: #87889e, background color: #252627, font size: 9.8pt (13px), font weight: 400). Expected minimum APCA lightness contrast of 60Lc

HTML

<a href="#" class="ws-nowrap s-btn s-btn__featured s-btn__filled" disabled="">Ask question</a>

Target

.px4.ta-center:nth-child(5) > .s-btn__featured.s-btn__filled[href="#"]

Summary

Fix all of the following:

Element has insufficient APCA custom level contrast of 32.03Lc (foreground color: #252627, background color: #797b9d, font size: 9.8pt (13px), font weight: 400). Expected minimum APCA lightness contrast of 60Lc

HTML

<a href="#" class="ws-nowrap s-btn s-btn__muted " disabled="">Ask question</a>

Target

tr:nth-child(10) > .px4.ta-center:nth-child(5) > .s-btn__muted[href="#"]

Summary

Fix all of the following:

Element has insufficient APCA custom level contrast of 39.35Lc (foreground color: #8e9091, background color: #252627, font size: 9.8pt (13px), font weight: 400). Expected minimum APCA lightness contrast of 60Lc

HTML

<a href="#" class="ws-nowrap s-btn s-btn__muted s-btn__outlined" disabled="">Ask question</a>

Target

.px4.ta-center:nth-child(5) > .s-btn__muted.s-btn__outlined[href="#"]

Summary

Fix all of the following:

Element has insufficient APCA custom level contrast of 39.35Lc (foreground color: #8e9091, background color: #252627, font size: 9.8pt (13px), font weight: 400). Expected minimum APCA lightness contrast of 60Lc

HTML

<button class="ws-nowrap s-btn s-btn__danger  is-loading is-selected" type="button" aria-pressed="true">Ask question</button>

Target

tr:nth-child(4) > .px4.ta-center:nth-child(4) > .is-loading.s-btn__danger.is-selected

Summary

Fix all of the following:

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

HTML

<button class="ws-nowrap s-btn s-btn__danger s-btn__outlined is-loading is-selected" type="button" aria-pressed="true">Ask question</button>

Target

tr:nth-child(5) > .px4.ta-center:nth-child(4) > .is-loading.s-btn__danger.is-selected

Summary

Fix all of the following:

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

HTML

<button class="ws-nowrap s-btn s-btn__danger  s-btn__dropdown is-selected" type="button" aria-pressed="true">Ask question</button>

Target

tr:nth-child(4) > .px4.ta-center:nth-child(4) > .s-btn__dropdown.s-btn__danger.is-selected

Summary

Fix all of the following:

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

HTML

<button class="ws-nowrap s-btn s-btn__danger s-btn__outlined s-btn__dropdown is-selected" type="button" aria-pressed="true">Ask question</button>

Target

tr:nth-child(5) > .px4.ta-center:nth-child(4) > .s-btn__dropdown.s-btn__danger.is-selected

Summary

Fix all of the following:

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

HTML

<span class="s-btn--number">198</span>

Target

tr:nth-child(1) > .px4.ta-center:nth-child(3) > button[type="button"] > .s-btn--badge > .s-btn--number

Summary

Fix all of the following:

Element has insufficient APCA custom level contrast of 26.96Lc (foreground color: #252627, background color: #5b7590, font size: 9.0pt (12px), font weight: 400). Expected minimum APCA lightness contrast of 60Lc

HTML

<span class="s-btn--number">198</span>

Target

tr:nth-child(1) > .px4.ta-center:nth-child(4) > .is-selected[type="button"] > .s-btn--badge > .s-btn--number

Summary

Fix all of the following:

Element has insufficient APCA custom level contrast of 43.5Lc (foreground color: #315070, background color: #8bb3db, font size: 9.0pt (12px), font weight: 400). Expected minimum APCA lightness contrast of 60Lc

HTML

<span class="s-btn--number">198</span>

Target

tr:nth-child(2) > .px4.ta-center:nth-child(3) > .s-btn__outlined[type="button"] > .s-btn--badge > .s-btn--number

Summary

Fix all of the following:

Element has insufficient APCA custom level contrast of 26.96Lc (foreground color: #252627, background color: #5b7590, font size: 9.0pt (12px), font weight: 400). Expected minimum APCA lightness contrast of 60Lc

HTML

<span class="s-btn--number">198</span>

Target

tr:nth-child(2) > .px4.ta-center:nth-child(4) > .is-selected.s-btn__outlined[type="button"] > .s-btn--badge > .s-btn--number

Summary

Fix all of the following:

Element has insufficient APCA custom level contrast of 43.5Lc (foreground color: #315070, background color: #8bb3db, font size: 9.0pt (12px), font weight: 400). Expected minimum APCA lightness contrast of 60Lc

HTML

<span class="s-btn--number">198</span>

Target

tr:nth-child(3) > .px4.ta-center:nth-child(3) > .s-btn__filled[type="button"] > .s-btn--badge > .s-btn--number

Summary

Fix all of the following:

Element has insufficient APCA custom level contrast of 51.19Lc (foreground color: #b4d8fb, background color: #5b7590, font size: 9.0pt (12px), font weight: 400). Expected minimum APCA lightness contrast of 60Lc

HTML

<span class="s-btn--number">198</span>

Target

tr:nth-child(3) > .px4.ta-center:nth-child(4) > .s-btn__filled.is-selected[type="button"] > .s-btn--badge > .s-btn--number

Summary

Fix all of the following:

Element has insufficient APCA custom level contrast of 52.79Lc (foreground color: #c5e1fc, background color: #6c7e91, font size: 9.0pt (12px), font weight: 400). Expected minimum APCA lightness contrast of 60Lc

HTML

<span class="s-btn--number">198</span>

Target

tr:nth-child(4) > .px4.ta-center:nth-child(3) > .s-btn__danger[type="button"] > .s-btn--badge > .s-btn--number

Summary

Fix all of the following:

Element has insufficient APCA custom level contrast of 31.54Lc (foreground color: #252627, background color: #917676, font size: 9.0pt (12px), font weight: 400). Expected minimum APCA lightness contrast of 60Lc

HTML

<button class="ws-nowrap s-btn s-btn__danger  is-selected" type="button" aria-pressed="true">
                                        Active <span class="s-btn--badge"><span class="s-btn--number">198</span></span>
                                    </button>

Target

section:nth-child(11) > .stacks-preview > .stacks-preview--example > .overflow-x-auto > .wmn5 > tbody > tr:nth-child(4) > .px4.ta-center:nth-child(4) > .s-btn__danger.is-selected[type="button"]

Summary

Fix all of the following:

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

HTML

<span class="s-btn--number">198</span>

Target

tr:nth-child(4) > .px4.ta-center:nth-child(4) > .s-btn__danger.is-selected[type="button"] > .s-btn--badge > .s-btn--number

Summary

Fix all of the following:

Element has insufficient APCA custom level contrast of 43.33Lc (foreground color: #724343, background color: #dea1a1, font size: 9.0pt (12px), font weight: 400). Expected minimum APCA lightness contrast of 60Lc

HTML

<span class="s-btn--number">198</span>

Target

.px4.ta-center:nth-child(3) > .s-btn__danger.s-btn__outlined[type="button"] > .s-btn--badge > .s-btn--number

Summary

Fix all of the following:

Element has insufficient APCA custom level contrast of 31.54Lc (foreground color: #252627, background color: #917676, font size: 9.0pt (12px), font weight: 400). Expected minimum APCA lightness contrast of 60Lc

HTML

<button class="ws-nowrap s-btn s-btn__danger s-btn__outlined is-selected" type="button" aria-pressed="true">
                                        Active <span class="s-btn--badge"><span class="s-btn--number">198</span></span>
                                    </button>

Target

section:nth-child(11) > .stacks-preview > .stacks-preview--example > .overflow-x-auto > .wmn5 > tbody > tr:nth-child(5) > .px4.ta-center:nth-child(4) > .s-btn__danger.is-selected.s-btn__outlined

Summary

Fix all of the following:

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

HTML

<span class="s-btn--number">198</span>

Target

.s-btn__danger.is-selected.s-btn__outlined > .s-btn--badge > .s-btn--number

Summary

Fix all of the following:

Element has insufficient APCA custom level contrast of 43.33Lc (foreground color: #724343, background color: #dea1a1, font size: 9.0pt (12px), font weight: 400). Expected minimum APCA lightness contrast of 60Lc

HTML

<span class="s-btn--number">198</span>

Target

.px4.ta-center:nth-child(3) > .s-btn__danger.s-btn__filled[type="button"] > .s-btn--badge > .s-btn--number

Summary

Fix all of the following:

Element has insufficient APCA custom level contrast of 56.8Lc (foreground color: #fdd1d1, background color: #906565, font size: 9.0pt (12px), font weight: 400). Expected minimum APCA lightness contrast of 60Lc

HTML

<span class="s-btn--number">198</span>

Target

tr:nth-child(7) > .px4.ta-center:nth-child(3) > .s-btn__featured[type="button"] > .s-btn--badge > .s-btn--number

Summary

Fix all of the following:

Element has insufficient APCA custom level contrast of 33.74Lc (foreground color: #252627, background color: #7e8093, font size: 9.0pt (12px), font weight: 400). Expected minimum APCA lightness contrast of 60Lc

HTML

<span class="s-btn--number">198</span>

Target

tr:nth-child(7) > .px4.ta-center:nth-child(4) > .s-btn__featured.is-selected[type="button"] > .s-btn--badge > .s-btn--number

Summary

Fix all of the following:

Element has insufficient APCA custom level contrast of 45.1Lc (foreground color: #4c4e6a, background color: #afb1d6, font size: 9.0pt (12px), font weight: 400). Expected minimum APCA lightness contrast of 60Lc

HTML

<span class="s-btn--number">198</span>

Target

.px4.ta-center:nth-child(3) > .s-btn__featured.s-btn__outlined[type="button"] > .s-btn--badge > .s-btn--number

Summary

Fix all of the following:

Element has insufficient APCA custom level contrast of 33.74Lc (foreground color: #252627, background color: #7e8093, font size: 9.0pt (12px), font weight: 400). Expected minimum APCA lightness contrast of 60Lc

HTML

<span class="s-btn--number">198</span>

Target

.s-btn__featured.is-selected.s-btn__outlined > .s-btn--badge > .s-btn--number

Summary

Fix all of the following:

Element has insufficient APCA custom level contrast of 45.1Lc (foreground color: #4c4e6a, background color: #afb1d6, font size: 9.0pt (12px), font weight: 400). Expected minimum APCA lightness contrast of 60Lc

HTML

<span class="s-btn--number">198</span>

Target

.px4.ta-center:nth-child(3) > .s-btn__featured.s-btn__filled[type="button"] > .s-btn--badge > .s-btn--number

Summary

Fix all of the following:

Element has insufficient APCA custom level contrast of 58.3Lc (foreground color: #dee0ff, background color: #717493, font size: 9.0pt (12px), font weight: 400). Expected minimum APCA lightness contrast of 60Lc

HTML

<span class="s-btn--number">198</span>

Target

tr:nth-child(10) > .px4.ta-center:nth-child(3) > .s-btn__muted[type="button"] > .s-btn--badge > .s-btn--number

Summary

Fix all of the following:

Element has insufficient APCA custom level contrast of 35.95Lc (foreground color: #252627, background color: #848688, font size: 9.0pt (12px), font weight: 400). Expected minimum APCA lightness contrast of 60Lc

HTML

<span class="s-btn--number">198</span>

Target

tr:nth-child(10) > .px4.ta-center:nth-child(4) > .s-btn__muted.is-selected[type="button"] > .s-btn--badge > .s-btn--number

Summary

Fix all of the following:

Element has insufficient APCA custom level contrast of 39.38Lc (foreground color: #343638, background color: #939698, font size: 9.0pt (12px), font weight: 400). Expected minimum APCA lightness contrast of 60Lc

HTML

<span class="s-btn--number">198</span>

Target

.px4.ta-center:nth-child(3) > .s-btn__muted.s-btn__outlined[type="button"] > .s-btn--badge > .s-btn--number

Summary

Fix all of the following:

Element has insufficient APCA custom level contrast of 35.95Lc (foreground color: #252627, background color: #848688, font size: 9.0pt (12px), font weight: 400). Expected minimum APCA lightness contrast of 60Lc

HTML

<span class="s-btn--number">198</span>

Target

.s-btn__muted.is-selected.s-btn__outlined > .s-btn--badge > .s-btn--number

Summary

Fix all of the following:

Element has insufficient APCA custom level contrast of 39.38Lc (foreground color: #343638, background color: #939698, font size: 9.0pt (12px), font weight: 400). Expected minimum APCA lightness contrast of 60Lc

HTML

<em class="fc-black-350">N/A</em>

Target

.fc-black-350

Summary

Fix all of the following:

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

color-contrast-enhanced

HC Light Serious Go to issue color-contrast-enhanced-light-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

<button class="ws-nowrap s-btn s-btn__danger  is-selected" type="button" aria-pressed="true">Ask question</button>

Target

tr:nth-child(1) > .px4.ta-center:nth-child(4) > .s-btn__danger.is-selected[type="button"]

Summary

Fix any of the following:

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

HTML

<button class="ws-nowrap s-btn s-btn__danger s-btn__outlined is-selected" type="button" aria-pressed="true">Ask question</button>

Target

tr:nth-child(2) > .px4.ta-center:nth-child(4) > .s-btn__danger.is-selected.s-btn__outlined

Summary

Fix any of the following:

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

HTML

<button class="ws-nowrap s-btn s-btn__featured  is-selected" type="button" aria-pressed="true">Ask question</button>

Target

tr:nth-child(1) > .px4.ta-center:nth-child(4) > .s-btn__featured.is-selected[type="button"]

Summary

Fix any of the following:

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

HTML

<button class="ws-nowrap s-btn s-btn__featured s-btn__outlined is-selected" type="button" aria-pressed="true">Ask question</button>

Target

tr:nth-child(2) > .px4.ta-center:nth-child(4) > .s-btn__featured.is-selected.s-btn__outlined

Summary

Fix any of the following:

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

HTML

<a href="#" class="ws-nowrap s-btn s-btn__danger  is-selected" aria-pressed="true">Ask question</a>

Target

tr:nth-child(4) > .px4.ta-center:nth-child(4) > .s-btn__danger.is-selected[href="#"]

Summary

Fix any of the following:

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

HTML

<a href="#" class="ws-nowrap s-btn s-btn__danger s-btn__outlined is-selected" aria-pressed="true">Ask question</a>

Target

tr:nth-child(5) > .px4.ta-center:nth-child(4) > .s-btn__danger.is-selected[href="#"]

Summary

Fix any of the following:

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

HTML

<a href="#" class="ws-nowrap s-btn s-btn__featured  is-selected" aria-pressed="true">Ask question</a>

Target

tr:nth-child(7) > .px4.ta-center:nth-child(4) > .s-btn__featured.is-selected[href="#"]

Summary

Fix any of the following:

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

HTML

<a href="#" class="ws-nowrap s-btn s-btn__featured s-btn__outlined is-selected" aria-pressed="true">Ask question</a>

Target

tr:nth-child(8) > .px4.ta-center:nth-child(4) > .s-btn__featured.is-selected[href="#"]

Summary

Fix any of the following:

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

HTML

<button class="ws-nowrap s-btn s-btn__danger  is-loading is-selected" type="button" aria-pressed="true">Ask question</button>

Target

tr:nth-child(4) > .px4.ta-center:nth-child(4) > .is-loading.s-btn__danger.is-selected

Summary

Fix any of the following:

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

HTML

<button class="ws-nowrap s-btn s-btn__danger s-btn__outlined is-loading is-selected" type="button" aria-pressed="true">Ask question</button>

Target

tr:nth-child(5) > .px4.ta-center:nth-child(4) > .is-loading.s-btn__danger.is-selected

Summary

Fix any of the following:

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

HTML

<button class="ws-nowrap s-btn s-btn__featured  is-loading is-selected" type="button" aria-pressed="true">Ask question</button>

Target

tr:nth-child(7) > .px4.ta-center:nth-child(4) > .is-loading.s-btn__featured.is-selected

Summary

Fix any of the following:

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

HTML

<button class="ws-nowrap s-btn s-btn__featured s-btn__outlined is-loading is-selected" type="button" aria-pressed="true">Ask question</button>

Target

tr:nth-child(8) > .px4.ta-center:nth-child(4) > .is-loading.s-btn__featured.is-selected

Summary

Fix any of the following:

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

HTML

<button class="ws-nowrap s-btn s-btn__danger  s-btn__dropdown is-selected" type="button" aria-pressed="true">Ask question</button>

Target

tr:nth-child(4) > .px4.ta-center:nth-child(4) > .s-btn__dropdown.s-btn__danger.is-selected

Summary

Fix any of the following:

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

HTML

<button class="ws-nowrap s-btn s-btn__danger s-btn__outlined s-btn__dropdown is-selected" type="button" aria-pressed="true">Ask question</button>

Target

tr:nth-child(5) > .px4.ta-center:nth-child(4) > .s-btn__dropdown.s-btn__danger.is-selected

Summary

Fix any of the following:

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

HTML

<button class="ws-nowrap s-btn s-btn__featured  s-btn__dropdown is-selected" type="button" aria-pressed="true">Ask question</button>

Target

tr:nth-child(7) > .px4.ta-center:nth-child(4) > .s-btn__dropdown.s-btn__featured.is-selected

Summary

Fix any of the following:

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

HTML

<button class="ws-nowrap s-btn s-btn__featured s-btn__outlined s-btn__dropdown is-selected" type="button" aria-pressed="true">Ask question</button>

Target

tr:nth-child(8) > .px4.ta-center:nth-child(4) > .s-btn__dropdown.s-btn__featured.is-selected

Summary

Fix any of the following:

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

HTML

<span class="s-btn--number">198</span>

Target

tr:nth-child(1) > .px4.ta-center:nth-child(3) > button[type="button"] > .s-btn--badge > .s-btn--number

Summary

Fix any of the following:

Element has insufficient color contrast of 4.58 (foreground color: #ffffff, background color: #4379ad, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 7:1

HTML

<span class="s-btn--number">198</span>

Target

tr:nth-child(2) > .px4.ta-center:nth-child(3) > .s-btn__outlined[type="button"] > .s-btn--badge > .s-btn--number

Summary

Fix any of the following:

Element has insufficient color contrast of 4.58 (foreground color: #ffffff, background color: #4379ad, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 7:1

HTML

<button class="ws-nowrap s-btn s-btn__danger  is-selected" type="button" aria-pressed="true">
                                        Active <span class="s-btn--badge"><span class="s-btn--number">198</span></span>
                                    </button>

Target

section:nth-child(11) > .stacks-preview > .stacks-preview--example > .overflow-x-auto > .wmn5 > tbody > tr:nth-child(4) > .px4.ta-center:nth-child(4) > .s-btn__danger.is-selected[type="button"]

Summary

Fix any of the following:

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

HTML

<button class="ws-nowrap s-btn s-btn__danger s-btn__outlined is-selected" type="button" aria-pressed="true">
                                        Active <span class="s-btn--badge"><span class="s-btn--number">198</span></span>
                                    </button>

Target

section:nth-child(11) > .stacks-preview > .stacks-preview--example > .overflow-x-auto > .wmn5 > tbody > tr:nth-child(5) > .px4.ta-center:nth-child(4) > .s-btn__danger.is-selected.s-btn__outlined

Summary

Fix any of the following:

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

HTML

<span class="s-btn--number">198</span>

Target

tr:nth-child(7) > .px4.ta-center:nth-child(3) > .s-btn__featured[type="button"] > .s-btn--badge > .s-btn--number

Summary

Fix any of the following:

Element has insufficient color contrast of 6.61 (foreground color: #ffffff, background color: #545795, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 7:1

HTML

<button class="ws-nowrap s-btn s-btn__featured  is-selected" type="button" aria-pressed="true">
                                        Active <span class="s-btn--badge"><span class="s-btn--number">198</span></span>
                                    </button>

Target

section:nth-child(11) > .stacks-preview > .stacks-preview--example > .overflow-x-auto > .wmn5 > tbody > tr:nth-child(7) > .px4.ta-center:nth-child(4) > .s-btn__featured.is-selected[type="button"]

Summary

Fix any of the following:

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

HTML

<span class="s-btn--number">198</span>

Target

.px4.ta-center:nth-child(3) > .s-btn__featured.s-btn__outlined[type="button"] > .s-btn--badge > .s-btn--number

Summary

Fix any of the following:

Element has insufficient color contrast of 6.61 (foreground color: #ffffff, background color: #545795, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 7:1

HTML

<button class="ws-nowrap s-btn s-btn__featured s-btn__outlined is-selected" type="button" aria-pressed="true">
                                        Active <span class="s-btn--badge"><span class="s-btn--number">198</span></span>
                                    </button>

Target

section:nth-child(11) > .stacks-preview > .stacks-preview--example > .overflow-x-auto > .wmn5 > tbody > tr:nth-child(8) > .px4.ta-center:nth-child(4) > .s-btn__featured.is-selected.s-btn__outlined

Summary

Fix any of the following:

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

HTML

<span class="s-btn--number">198</span>

Target

tr:nth-child(10) > .px4.ta-center:nth-child(3) > .s-btn__muted[type="button"] > .s-btn--badge > .s-btn--number

Summary

Fix any of the following:

Element has insufficient color contrast of 5.78 (foreground color: #ffffff, background color: #62666a, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 7:1

HTML

<span class="s-btn--number">198</span>

Target

.px4.ta-center:nth-child(3) > .s-btn__muted.s-btn__outlined[type="button"] > .s-btn--badge > .s-btn--number

Summary

Fix any of the following:

Element has insufficient color contrast of 5.78 (foreground color: #ffffff, background color: #62666a, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 7:1

HTML

<em class="fc-black-350">N/A</em>

Target

.fc-black-350

Summary

Fix any of the following:

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

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

<a href="#" class="ws-nowrap s-btn s-btn__danger " disabled="">Ask question</a>

Target

tr:nth-child(4) > .px4.ta-center:nth-child(5) > .s-btn__danger[href="#"]

Summary

Fix any of the following:

Element has insufficient color contrast of 5.49 (foreground color: #8b8080, background color: #000000, font size: 9.8pt (13px), font weight: normal). Expected contrast ratio of 7:1

HTML

<a href="#" class="ws-nowrap s-btn s-btn__danger s-btn__outlined" disabled="">Ask question</a>

Target

.px4.ta-center:nth-child(5) > .s-btn__danger.s-btn__outlined[href="#"]

Summary

Fix any of the following:

Element has insufficient color contrast of 5.49 (foreground color: #8b8080, background color: #000000, font size: 9.8pt (13px), font weight: normal). Expected contrast ratio of 7:1

HTML

<a href="#" class="ws-nowrap s-btn s-btn__featured " disabled="">Ask question</a>

Target

tr:nth-child(7) > .px4.ta-center:nth-child(5) > .s-btn__featured[href="#"]

Summary

Fix any of the following:

Element has insufficient color contrast of 5.5 (foreground color: #81828c, background color: #000000, font size: 9.8pt (13px), font weight: normal). Expected contrast ratio of 7:1

HTML

<a href="#" class="ws-nowrap s-btn s-btn__featured s-btn__outlined" disabled="">Ask question</a>

Target

.px4.ta-center:nth-child(5) > .s-btn__featured.s-btn__outlined[href="#"]

Summary

Fix any of the following:

Element has insufficient color contrast of 5.5 (foreground color: #81828c, background color: #000000, font size: 9.8pt (13px), font weight: normal). Expected contrast ratio of 7:1

HTML

<a href="#" class="ws-nowrap s-btn s-btn__muted " disabled="">Ask question</a>

Target

tr:nth-child(10) > .px4.ta-center:nth-child(5) > .s-btn__muted[href="#"]

Summary

Fix any of the following:

Element has insufficient color contrast of 5.21 (foreground color: #7d7f80, background color: #000000, font size: 9.8pt (13px), font weight: normal). Expected contrast ratio of 7:1

HTML

<a href="#" class="ws-nowrap s-btn s-btn__muted s-btn__outlined" disabled="">Ask question</a>

Target

.px4.ta-center:nth-child(5) > .s-btn__muted.s-btn__outlined[href="#"]

Summary

Fix any of the following:

Element has insufficient color contrast of 5.21 (foreground color: #7d7f80, background color: #000000, font size: 9.8pt (13px), font weight: normal). Expected contrast ratio of 7:1