product/components/tables

ID:: product/components/tables
Automated score:: 96.8
URL:: https://stackoverflow.design/product/components/tables

4 violations: Light: 1 Dark: 1 HC Light: 1 HC Dark: 1

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

<th>Joshua Hynes</th>

Target

.is-disabled:nth-child(2) > th

Summary

Fix all of the following:

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

HTML

<td>[email protected]</td>

Target

.is-disabled:nth-child(2) > td:nth-child(2)

Summary

Fix all of the following:

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

HTML

<td>Sep 28 ’18</td>

Target

.is-disabled:nth-child(2) > td:nth-child(3)

Summary

Fix all of the following:

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

HTML

<th>Paweł Ludwiczak</th>

Target

.is-disabled:nth-child(3) > th

Summary

Fix all of the following:

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

HTML

<td>[email protected]</td>

Target

.is-disabled:nth-child(3) > td:nth-child(2)

Summary

Fix all of the following:

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

HTML

<td>Apr 17 ’19</td>

Target

.is-disabled:nth-child(3) > td:nth-child(3)

Summary

Fix all of the following:

Element has insufficient APCA custom level contrast of 29.9Lc (foreground color: #c0c2c4, background color: #f9fafa, 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

<th>Joshua Hynes</th>

Target

.is-disabled:nth-child(2) > th

Summary

Fix all of the following:

Element has insufficient APCA custom level contrast of 20.5Lc (foreground color: #6a6b6c, background color: #2d2e2f, font size: 9.8pt (13px), font weight: 400). Expected minimum APCA lightness contrast of 60Lc

HTML

<td>[email protected]</td>

Target

.is-disabled:nth-child(2) > td:nth-child(2)

Summary

Fix all of the following:

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

HTML

<td>Sep 28 ’18</td>

Target

.is-disabled:nth-child(2) > td:nth-child(3)

Summary

Fix all of the following:

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

HTML

<th>Paweł Ludwiczak</th>

Target

.is-disabled:nth-child(3) > th

Summary

Fix all of the following:

Element has insufficient APCA custom level contrast of 20.5Lc (foreground color: #6a6b6c, background color: #2d2e2f, font size: 9.8pt (13px), font weight: 400). Expected minimum APCA lightness contrast of 60Lc

HTML

<td>[email protected]</td>

Target

.is-disabled:nth-child(3) > td:nth-child(2)

Summary

Fix all of the following:

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

HTML

<td>Apr 17 ’19</td>

Target

.is-disabled:nth-child(3) > td:nth-child(3)

Summary

Fix all of the following:

Element has insufficient APCA custom level contrast of 17.95Lc (foreground color: #646567, background color: #2d2e2f, 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

<em class="fc-light">No Class</em>

Target

.mb16.s-table-container:nth-child(1) > .ta-center > tbody > tr > .stacks-flex-example--item:nth-child(2) > em

Summary

Fix any of the following:

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

HTML

<em class="fc-light">No Class</em>

Target

.mb16.s-table-container:nth-child(2) > .ta-center > tbody > tr > .stacks-flex-example--item:nth-child(3) > em

Summary

Fix any of the following:

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

HTML

<em class="fc-light">No Class</em>

Target

.mb16.s-table-container:nth-child(2) > .ta-center > tbody > tr > .stacks-flex-example--item:nth-child(4) > em

Summary

Fix any of the following:

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

HTML

<em class="fc-light">No Class</em>

Target

.mb16.s-table-container:nth-child(2) > .ta-center > tbody > tr > .stacks-flex-example--item:nth-child(5) > em

Summary

Fix any of the following:

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

HTML

<em class="fc-light">No Class</em>

Target

.s-table-container:nth-child(3) > .ta-center > tbody > tr > .stacks-flex-example--item:nth-child(2) > em

Summary

Fix any of the following:

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

HTML

<em class="fc-light">No Class</em>

Target

.s-table-container:nth-child(3) > .ta-center > tbody > tr > .stacks-flex-example--item:nth-child(3) > em

Summary

Fix any of the following:

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

HTML

<em class="fc-light">No Class</em>

Target

.s-table-container:nth-child(3) > .ta-center > tbody > tr > .stacks-flex-example--item:nth-child(4) > em

Summary

Fix any of the following:

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

HTML

<em class="fc-light">No Class</em>

Target

.s-table-container:nth-child(3) > .ta-center > tbody > tr > .stacks-flex-example--item:nth-child(5) > em

Summary

Fix any of the following:

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

HTML

<th scope="col">
                                Status
                                <svg aria-hidden="true" class="svg-icon iconArrowUpDownSm" width="14" height="14" viewBox="0 0 14 14"><path d="m7 2 4 4H3zm0 10 4-4H3z"></path></svg>
                            </th>

Target

.stacks-preview:nth-child(4) > .stacks-preview--example > .s-table-container > .s-table__sortable > thead > tr > th[scope="col"]:nth-child(2)

Summary

Fix any of the following:

Element has insufficient color contrast of 6.79 (foreground color: #525960, background color: #f9fafa, font size: 9.8pt (13px), font weight: bold). Expected contrast ratio of 7:1

HTML

<th scope="col">
                                Owner
                                <svg aria-hidden="true" class="svg-icon iconArrowUpDownSm" width="14" height="14" viewBox="0 0 14 14"><path d="m7 2 4 4H3zm0 10 4-4H3z"></path></svg>
                            </th>

Target

.stacks-preview:nth-child(4) > .stacks-preview--example > .s-table-container > .s-table__sortable > thead > tr > th[scope="col"]:nth-child(3)

Summary

Fix any of the following:

Element has insufficient color contrast of 6.79 (foreground color: #525960, background color: #f9fafa, font size: 9.8pt (13px), font weight: bold). Expected contrast ratio of 7:1

HTML

<th scope="col" class="ta-right">
                                Views
                                <svg aria-hidden="true" class="svg-icon iconArrowUpDownSm" width="14" height="14" viewBox="0 0 14 14"><path d="m7 2 4 4H3zm0 10 4-4H3z"></path></svg>
                            </th>

Target

.ta-right[scope="col"]:nth-child(4)

Summary

Fix any of the following:

Element has insufficient color contrast of 6.79 (foreground color: #525960, background color: #f9fafa, font size: 9.8pt (13px), font weight: bold). Expected contrast ratio of 7:1

HTML

<th scope="col" class="ta-right">
                                Applies
                                <svg aria-hidden="true" class="svg-icon iconArrowUpDownSm" width="14" height="14" viewBox="0 0 14 14"><path d="m7 2 4 4H3zm0 10 4-4H3z"></path></svg>
                            </th>

Target

.ta-right[scope="col"]:nth-child(5)

Summary

Fix any of the following:

Element has insufficient color contrast of 6.79 (foreground color: #525960, background color: #f9fafa, font size: 9.8pt (13px), font weight: bold). Expected contrast ratio of 7:1

HTML

<button data-action="click->

Target

th[data-s-table-target="column"][scope="col"]:nth-child(1) > button[data-action="click->s-table#sort"]

Summary

Fix any of the following:

Element has insufficient color contrast of 6.79 (foreground color: #525960, background color: #f9fafa, font size: 9.8pt (13px), font weight: bold). Expected contrast ratio of 7:1

HTML

<button data-action="click->

Target

th[data-s-table-target="column"][scope="col"]:nth-child(2) > button[data-action="click->s-table#sort"]

Summary

Fix any of the following:

Element has insufficient color contrast of 6.79 (foreground color: #525960, background color: #f9fafa, font size: 9.8pt (13px), font weight: bold). Expected contrast ratio of 7:1

HTML

<button data-action="click->

Target

th[data-s-table-target="column"][scope="col"]:nth-child(3) > button[data-action="click->s-table#sort"]

Summary

Fix any of the following:

Element has insufficient color contrast of 6.79 (foreground color: #525960, background color: #f9fafa, font size: 9.8pt (13px), font weight: bold). Expected contrast ratio of 7:1

HTML

<th scope="col">Status</th>

Target

section:nth-child(9) > .stacks-preview > .stacks-preview--example > .s-table-container > .s-table__sortable > thead > tr > th[scope="col"]:nth-child(2)

Summary

Fix any of the following:

Element has insufficient color contrast of 6.79 (foreground color: #525960, background color: #f9fafa, font size: 9.8pt (13px), font weight: bold). Expected contrast ratio of 7:1

HTML

<th scope="col">Owner</th>

Target

section:nth-child(9) > .stacks-preview > .stacks-preview--example > .s-table-container > .s-table__sortable > thead > tr > th[scope="col"]:nth-child(3)

Summary

Fix any of the following:

Element has insufficient color contrast of 6.79 (foreground color: #525960, background color: #f9fafa, font size: 9.8pt (13px), font weight: bold). Expected contrast ratio of 7:1

HTML

<th scope="col">Source</th>

Target

section:nth-child(9) > .stacks-preview > .stacks-preview--example > .s-table-container > .s-table__sortable > thead > tr > th[scope="col"]:nth-child(4)

Summary

Fix any of the following:

Element has insufficient color contrast of 6.79 (foreground color: #525960, background color: #f9fafa, font size: 9.8pt (13px), font weight: bold). Expected contrast ratio of 7:1

HTML

<th colspan="2" scope="colgroup">Views</th>

Target

th[scope="colgroup"][colspan="2"]:nth-child(5)

Summary

Fix any of the following:

Element has insufficient color contrast of 6.79 (foreground color: #525960, background color: #f9fafa, font size: 9.8pt (13px), font weight: bold). Expected contrast ratio of 7:1

HTML

<th colspan="2" scope="colgroup">Applies</th>

Target

th[scope="colgroup"][colspan="2"]:nth-child(6)

Summary

Fix any of the following:

Element has insufficient color contrast of 6.79 (foreground color: #525960, background color: #f9fafa, font size: 9.8pt (13px), font weight: bold). 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

<em class="fc-light">No Class</em>

Target

.mb16.s-table-container:nth-child(1) > .ta-center > tbody > tr > .stacks-flex-example--item:nth-child(2) > em

Summary

Fix any of the following:

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

HTML

<em class="fc-light">No Class</em>

Target

.mb16.s-table-container:nth-child(2) > .ta-center > tbody > tr > .stacks-flex-example--item:nth-child(3) > em

Summary

Fix any of the following:

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

HTML

<em class="fc-light">No Class</em>

Target

.mb16.s-table-container:nth-child(2) > .ta-center > tbody > tr > .stacks-flex-example--item:nth-child(4) > em

Summary

Fix any of the following:

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

HTML

<em class="fc-light">No Class</em>

Target

.mb16.s-table-container:nth-child(2) > .ta-center > tbody > tr > .stacks-flex-example--item:nth-child(5) > em

Summary

Fix any of the following:

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

HTML

<em class="fc-light">No Class</em>

Target

.s-table-container:nth-child(3) > .ta-center > tbody > tr > .stacks-flex-example--item:nth-child(2) > em

Summary

Fix any of the following:

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

HTML

<em class="fc-light">No Class</em>

Target

.s-table-container:nth-child(3) > .ta-center > tbody > tr > .stacks-flex-example--item:nth-child(3) > em

Summary

Fix any of the following:

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

HTML

<em class="fc-light">No Class</em>

Target

.s-table-container:nth-child(3) > .ta-center > tbody > tr > .stacks-flex-example--item:nth-child(4) > em

Summary

Fix any of the following:

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

HTML

<em class="fc-light">No Class</em>

Target

.s-table-container:nth-child(3) > .ta-center > tbody > tr > .stacks-flex-example--item:nth-child(5) > em

Summary

Fix any of the following:

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