product/components/buttons

ID:
product/components/buttons
Automated score:
97.4
View JSON file

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

<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.ws-nowrap[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.ws-nowrap

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.is-selected.s-btn__muted

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

<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.ws-nowrap

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.ws-nowrap

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) > .ws-nowrap[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(6) > .stacks-preview > .stacks-preview--example > .overflow-x-auto > .wmn5 > tbody > tr:nth-child(1) > .px4.ta-center:nth-child(4) > .is-selected.ws-nowrap[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.ws-nowrap[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.ws-nowrap[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(6) > .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.ws-nowrap

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.ws-nowrap > .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.ws-nowrap[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.ws-nowrap > .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.ws-nowrap[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.ws-nowrap > .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.ws-nowrap > .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.ws-nowrap > .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__muted.ws-nowrap[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(7) > .px4.ta-center:nth-child(4) > .is-selected.s-btn__muted.ws-nowrap > .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__outlined.s-btn__muted.ws-nowrap > .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

.is-selected.s-btn__outlined.s-btn__muted > .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

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.ws-nowrap

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.is-selected.s-btn__muted

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

<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) > .ws-nowrap[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.ws-nowrap[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.ws-nowrap[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.ws-nowrap > .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.ws-nowrap[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.ws-nowrap > .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.ws-nowrap[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(6) > .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.ws-nowrap

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.ws-nowrap > .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.ws-nowrap > .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(6) > .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.ws-nowrap > .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__muted.ws-nowrap[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(7) > .px4.ta-center:nth-child(4) > .is-selected.s-btn__muted.ws-nowrap > .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__outlined.s-btn__muted.ws-nowrap > .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

.is-selected.s-btn__outlined.s-btn__muted > .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

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.ws-nowrap

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__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__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

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

Target

tr:nth-child(1) > .px4.ta-center:nth-child(3) > .ws-nowrap[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.ws-nowrap[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(6) > .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.ws-nowrap

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(6) > .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__muted.ws-nowrap[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__outlined.s-btn__muted.ws-nowrap > .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