Question Page

14 violations: Light: 4Dark: 4HC Light: 3HC Dark: 3

Ensure elements with an ARIA role that require child roles contain them. Certain ARIA roles must contain particular children. Help URL

HTML

<ol class="s-topbar--content" role="menubar">

Target

.s-topbar--content

Summary

Fix any of the following:

  • Element has children which are not allowed: li[tabindex], div[aria-live]

Ensure elements with an ARIA role that require child roles contain them. Certain ARIA roles must contain particular children. Help URL

HTML

<ol class="s-topbar--content" role="menubar">

Target

.s-topbar--content

Summary

Fix any of the following:

  • Element has children which are not allowed: li[tabindex], div[aria-live]

Ensure elements with an ARIA role that require child roles contain them. Certain ARIA roles must contain particular children. Help URL

HTML

<ol class="s-topbar--content" role="menubar">

Target

.s-topbar--content

Summary

Fix any of the following:

  • Element has children which are not allowed: li[tabindex], div[aria-live]

Ensure elements with an ARIA role that require child roles contain them. Certain ARIA roles must contain particular children. Help URL

HTML

<ol class="s-topbar--content" role="menubar">

Target

.s-topbar--content

Summary

Fix any of the following:

  • Element has children which are not allowed: li[tabindex], div[aria-live]

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

<span class="va-middle pl6 js-add-reaction-label fc-black-350">add a reaction</span>

Target

button[aria-describedby="--stacks-s-tooltip-zf85o53o"] > .js-add-reaction-label.pl6.fc-black-350

Summary

Fix all of the following:

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

HTML

<span class="va-middle pl6 js-add-reaction-label fc-black-350">add a reaction</span>

Target

button[aria-describedby="--stacks-s-tooltip-ujv3kpsm"] > .js-add-reaction-label.pl6.fc-black-350

Summary

Fix all of the following:

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

HTML

<span class="va-middle pl6 js-add-reaction-label fc-black-350">add a reaction</span>

Target

button[aria-describedby="--stacks-s-tooltip-pld5n0iw"] > .js-add-reaction-label.pl6.fc-black-350

Summary

Fix all of the following:

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

HTML

<span class="va-middle pl6 js-add-reaction-label fc-black-350">add a reaction</span>

Target

button[aria-describedby="--stacks-s-tooltip-8fv575pv"] > .js-add-reaction-label.pl6.fc-black-350

Summary

Fix all of the following:

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

HTML

<span class="va-middle pl6 js-add-reaction-label fc-black-350">add a reaction</span>

Target

button[aria-describedby="--stacks-s-tooltip-l4v7e0qj"] > .js-add-reaction-label.pl6.fc-black-350

Summary

Fix all of the following:

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

HTML

<span class="va-middle pl6 js-add-reaction-label fc-black-350">add a reaction</span>

Target

button[aria-describedby="--stacks-s-tooltip-sdkgtqd5"] > .js-add-reaction-label.pl6.fc-black-350

Summary

Fix all of the following:

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

HTML

<span class="va-middle pl6 js-add-reaction-label fc-black-350">add a reaction</span>

Target

button[aria-describedby="--stacks-s-tooltip-p8050z3v"] > .js-add-reaction-label.pl6.fc-black-350

Summary

Fix all of the following:

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

HTML

<span class="va-middle pl6 js-add-reaction-label fc-black-350">add a reaction</span>

Target

button[aria-describedby="--stacks-s-tooltip-ge0zd53c"] > .js-add-reaction-label.pl6.fc-black-350

Summary

Fix all of the following:

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

HTML

<span class="va-middle pl6 js-add-reaction-label fc-black-350">add a reaction</span>

Target

button[aria-describedby="--stacks-s-tooltip-yz0svq4m"] > .js-add-reaction-label.pl6.fc-black-350

Summary

Fix all of the following:

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

HTML

<span class="va-middle pl6 js-add-reaction-label fc-black-350">add a reaction</span>

Target

button[aria-describedby="--stacks-s-tooltip-qify40f5"] > .js-add-reaction-label.pl6.fc-black-350

Summary

Fix all of the following:

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

HTML

<span class="va-middle pl6 js-add-reaction-label fc-black-350">add a reaction</span>

Target

button[aria-describedby="--stacks-s-tooltip-v64j13tc"] > .js-add-reaction-label.pl6.fc-black-350

Summary

Fix all of the following:

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

HTML

<span class="va-middle pl6 js-add-reaction-label fc-black-350">add a reaction</span>

Target

button[aria-describedby="--stacks-s-tooltip-stb9clvt"] > .js-add-reaction-label.pl6.fc-black-350

Summary

Fix all of the following:

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

<span class="va-middle pl6 js-add-reaction-label fc-black-350">add a reaction</span>

Target

button[aria-describedby="--stacks-s-tooltip-zf85o53o"] > .js-add-reaction-label.pl6.fc-black-350

Summary

Fix all of the following:

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

HTML

<span class="va-middle pl6 js-add-reaction-label fc-black-350">add a reaction</span>

Target

button[aria-describedby="--stacks-s-tooltip-ujv3kpsm"] > .js-add-reaction-label.pl6.fc-black-350

Summary

Fix all of the following:

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

HTML

<span class="va-middle pl6 js-add-reaction-label fc-black-350">add a reaction</span>

Target

button[aria-describedby="--stacks-s-tooltip-pld5n0iw"] > .js-add-reaction-label.pl6.fc-black-350

Summary

Fix all of the following:

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

HTML

<span class="va-middle pl6 js-add-reaction-label fc-black-350">add a reaction</span>

Target

button[aria-describedby="--stacks-s-tooltip-8fv575pv"] > .js-add-reaction-label.pl6.fc-black-350

Summary

Fix all of the following:

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

HTML

<span class="va-middle pl6 js-add-reaction-label fc-black-350">add a reaction</span>

Target

button[aria-describedby="--stacks-s-tooltip-l4v7e0qj"] > .js-add-reaction-label.pl6.fc-black-350

Summary

Fix all of the following:

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

HTML

<span class="va-middle pl6 js-add-reaction-label fc-black-350">add a reaction</span>

Target

button[aria-describedby="--stacks-s-tooltip-sdkgtqd5"] > .js-add-reaction-label.pl6.fc-black-350

Summary

Fix all of the following:

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

HTML

<span class="va-middle pl6 js-add-reaction-label fc-black-350">add a reaction</span>

Target

button[aria-describedby="--stacks-s-tooltip-p8050z3v"] > .js-add-reaction-label.pl6.fc-black-350

Summary

Fix all of the following:

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

HTML

<span class="va-middle pl6 js-add-reaction-label fc-black-350">add a reaction</span>

Target

button[aria-describedby="--stacks-s-tooltip-ge0zd53c"] > .js-add-reaction-label.pl6.fc-black-350

Summary

Fix all of the following:

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

HTML

<span class="va-middle pl6 js-add-reaction-label fc-black-350">add a reaction</span>

Target

button[aria-describedby="--stacks-s-tooltip-yz0svq4m"] > .js-add-reaction-label.pl6.fc-black-350

Summary

Fix all of the following:

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

HTML

<span class="va-middle pl6 js-add-reaction-label fc-black-350">add a reaction</span>

Target

button[aria-describedby="--stacks-s-tooltip-qify40f5"] > .js-add-reaction-label.pl6.fc-black-350

Summary

Fix all of the following:

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

HTML

<span class="va-middle pl6 js-add-reaction-label fc-black-350">add a reaction</span>

Target

button[aria-describedby="--stacks-s-tooltip-v64j13tc"] > .js-add-reaction-label.pl6.fc-black-350

Summary

Fix all of the following:

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

HTML

<span class="va-middle pl6 js-add-reaction-label fc-black-350">add a reaction</span>

Target

button[aria-describedby="--stacks-s-tooltip-stb9clvt"] > .js-add-reaction-label.pl6.fc-black-350

Summary

Fix all of the following:

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

<div class="user-action-time fl-grow1">
            asked <span title="2023-10-18 14:07:39Z" class="relativetime">Oct 18, 2023 at 14:07</span>
        </div>

Target

.owner > .user-info > .d-flex > .user-action-time.fl-grow1

Summary

Fix any of the following:

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

HTML

<span title="2023-10-18 14:07:39Z" class="relativetime">Oct 18, 2023 at 14:07</span>

Target

.relativetime[title="2023-10-18 14:07:39Z"]

Summary

Fix any of the following:

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

HTML

<a href="/c/gherkins/users/169/" class="mr2">Keisha Washington</a>

Target

.mr2[href="/c/gherkins/users/169/"]

Summary

Fix any of the following:

  • Element has insufficient color contrast of 6.68 (foreground color: #145799, background color: #edf5fd, font size: 9.8pt (13px), font weight: normal). Expected contrast ratio of 7:1

HTML

<span class="reputation-score" title="reputation score " dir="ltr">141</span>

Target

.owner > .user-info > .user-details[itemprop="author"][itemtype="http://schema.org/Person"] > .-flair > .reputation-score[title="reputation score "][dir="ltr"]

Summary

Fix any of the following:

  • Element has insufficient color contrast of 6.45 (foreground color: #525960, background color: #edf5fd, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 7:1

HTML

<span class="va-middle pl6 js-add-reaction-label fc-black-350">add a reaction</span>

Target

button[aria-describedby="--stacks-s-tooltip-zf85o53o"] > .js-add-reaction-label.pl6.fc-black-350

Summary

Fix any of the following:

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

HTML

<span class="va-middle pl6 js-add-reaction-label fc-black-350">add a reaction</span>

Target

button[aria-describedby="--stacks-s-tooltip-ujv3kpsm"] > .js-add-reaction-label.pl6.fc-black-350

Summary

Fix any of the following:

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

HTML

<span class="va-middle pl6 js-add-reaction-label fc-black-350">add a reaction</span>

Target

button[aria-describedby="--stacks-s-tooltip-pld5n0iw"] > .js-add-reaction-label.pl6.fc-black-350

Summary

Fix any of the following:

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

HTML

<span class="va-middle pl6 js-add-reaction-label fc-black-350">add a reaction</span>

Target

button[aria-describedby="--stacks-s-tooltip-8fv575pv"] > .js-add-reaction-label.pl6.fc-black-350

Summary

Fix any of the following:

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

HTML

<span class="va-middle pl6 js-add-reaction-label fc-black-350">add a reaction</span>

Target

button[aria-describedby="--stacks-s-tooltip-l4v7e0qj"] > .js-add-reaction-label.pl6.fc-black-350

Summary

Fix any of the following:

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

HTML

<span class="va-middle pl6 js-add-reaction-label fc-black-350">add a reaction</span>

Target

button[aria-describedby="--stacks-s-tooltip-sdkgtqd5"] > .js-add-reaction-label.pl6.fc-black-350

Summary

Fix any of the following:

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

HTML

<span class="va-middle pl6 js-add-reaction-label fc-black-350">add a reaction</span>

Target

button[aria-describedby="--stacks-s-tooltip-p8050z3v"] > .js-add-reaction-label.pl6.fc-black-350

Summary

Fix any of the following:

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

HTML

<span class="va-middle pl6 js-add-reaction-label fc-black-350">add a reaction</span>

Target

button[aria-describedby="--stacks-s-tooltip-ge0zd53c"] > .js-add-reaction-label.pl6.fc-black-350

Summary

Fix any of the following:

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

HTML

<span class="va-middle pl6 js-add-reaction-label fc-black-350">add a reaction</span>

Target

button[aria-describedby="--stacks-s-tooltip-yz0svq4m"] > .js-add-reaction-label.pl6.fc-black-350

Summary

Fix any of the following:

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

HTML

<span class="va-middle pl6 js-add-reaction-label fc-black-350">add a reaction</span>

Target

button[aria-describedby="--stacks-s-tooltip-qify40f5"] > .js-add-reaction-label.pl6.fc-black-350

Summary

Fix any of the following:

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

HTML

<span class="va-middle pl6 js-add-reaction-label fc-black-350">add a reaction</span>

Target

button[aria-describedby="--stacks-s-tooltip-v64j13tc"] > .js-add-reaction-label.pl6.fc-black-350

Summary

Fix any of the following:

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

HTML

<span class="va-middle pl6 js-add-reaction-label fc-black-350">add a reaction</span>

Target

button[aria-describedby="--stacks-s-tooltip-stb9clvt"] > .js-add-reaction-label.pl6.fc-black-350

Summary

Fix any of the following:

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

Ensure the contrast between foreground and background colors meets WCAG 2 AAA enhanced contrast ratio thresholds. Elements must meet enhanced color contrast ratio thresholds. Help URL

HTML

<a href="/c/gherkins/users/169/" class="mr2">Keisha Washington</a>

Target

.mr2[href="/c/gherkins/users/169/"]

Summary

Fix any of the following:

  • Element has insufficient color contrast of 6.87 (foreground color: #8cbff2, background color: #22313f, font size: 9.8pt (13px), font weight: normal). Expected contrast ratio of 7:1

Ensure links are distinguished from surrounding text in a way that does not rely on color. Links must be distinguishable without relying on color. Help URL

HTML

<a href="/c/gherkins/users/169/" class="mr2">Keisha Washington</a>

Target

.mr2[href="/c/gherkins/users/169/"]

Summary

Fix any of the following:

  • The link has insufficient color contrast of 1.15:1 with the surrounding text. (Minimum contrast is 3:1, link text: #1b75d0, surrounding text: #636b74)
  • The link has no styling (such as underline) to distinguish it from the surrounding text

Ensure links are distinguished from surrounding text in a way that does not rely on color. Links must be distinguishable without relying on color. Help URL

HTML

<a href="/c/gherkins/users/169/" class="mr2">Keisha Washington</a>

Target

.mr2[href="/c/gherkins/users/169/"]

Summary

Fix any of the following:

  • The link has insufficient color contrast of 1.13:1 with the surrounding text. (Minimum contrast is 3:1, link text: #90c4f9, surrounding text: #c8ccd0)
  • The link has no styling (such as underline) to distinguish it from the surrounding text

HTML

<a href="/c/gherkins/questions/ask">ask your own question</a>

Target

.bottom-notice > div > a[href$="ask"]

Summary

Fix any of the following:

  • The link has insufficient color contrast of 1.75:1 with the surrounding text. (Minimum contrast is 3:1, link text: #90c4f9, surrounding text: #f9fafa)
  • The link has no styling (such as underline) to distinguish it from the surrounding text

Ensure <li> elements are used semantically. <li> elements must be contained in a <ul> or <ol>. Help URL

HTML

<li>

Target

.s-topbar--content > li:nth-child(2)

Summary

Fix any of the following:

  • List item parent element has a role that is not role="list"

HTML

<li>

Target

.s-topbar--content > li:nth-child(9)

Summary

Fix any of the following:

  • List item parent element has a role that is not role="list"

Ensure <li> elements are used semantically. <li> elements must be contained in a <ul> or <ol>. Help URL

HTML

<li>

Target

.s-topbar--content > li:nth-child(2)

Summary

Fix any of the following:

  • List item parent element has a role that is not role="list"

HTML

<li>

Target

.s-topbar--content > li:nth-child(9)

Summary

Fix any of the following:

  • List item parent element has a role that is not role="list"

Ensure <li> elements are used semantically. <li> elements must be contained in a <ul> or <ol>. Help URL

HTML

<li>

Target

.s-topbar--content > li:nth-child(2)

Summary

Fix any of the following:

  • List item parent element has a role that is not role="list"

HTML

<li>

Target

.s-topbar--content > li:nth-child(9)

Summary

Fix any of the following:

  • List item parent element has a role that is not role="list"

Ensure <li> elements are used semantically. <li> elements must be contained in a <ul> or <ol>. Help URL

HTML

<li>

Target

.s-topbar--content > li:nth-child(2)

Summary

Fix any of the following:

  • List item parent element has a role that is not role="list"

HTML

<li>

Target

.s-topbar--content > li:nth-child(9)

Summary

Fix any of the following:

  • List item parent element has a role that is not role="list"