Question page

ID:
question
Automated score:
93.7
URL:
https://sem1.dev.stackenterprise.co/questions/38756
View JSON file

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

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

Target

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

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-5ywfhvgt"] > .js-add-reaction-label.fc-black-350.pl6

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-26jwk5dt"] > .js-add-reaction-label.fc-black-350.pl6

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-suh76jv2"] > .js-add-reaction-label.fc-black-350.pl6

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-fwjwxwfs"] > .js-add-reaction-label.fc-black-350.pl6

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-5ywfhvgt"] > .js-add-reaction-label.fc-black-350.pl6

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-26jwk5dt"] > .js-add-reaction-label.fc-black-350.pl6

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-suh76jv2"] > .js-add-reaction-label.fc-black-350.pl6

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

<li class="fs-fine tt-uppercase ml12 mt24 mb4 fc-light">
            Private Teams
        </li>

Target

.fc-light

Summary

Fix any of the following:

  • Element has insufficient color contrast of 6.79 (foreground color: #525960, background color: #f9fafa, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 7:1

HTML

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

Target

.aside-cta.print\:d-none.ml12 > a[href$="ask"]

Summary

Fix any of the following:

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

HTML

<button type="button" class="s-btn s-btn__sm p4 my2 va-middle js-inline-mentions-edit-link">
                        Edit
                    </button>

Target

.js-inline-mentions-edit-link

Summary

Fix any of the following:

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

HTML

<button id="edit-tags" class="s-btn s-btn__sm p4" title="Edit this question's tags">Edit</button>

Target

#edit-tags

Summary

Fix any of the following:

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

HTML

<div class="user-action-time fl-grow1">
            asked <span title="2024-02-29 09:15:29Z" class="relativetime">Feb 29, 2024 at 9:15</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="2024-02-29 09:15:29Z" class="relativetime">Feb 29, 2024 at 9:15</span>

Target

.relativetime[title="2024-02-29 09:15:29Z"]

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 class="reputation-score" title="reputation score " dir="ltr">38</span>

Target

span[title="reputation score "]

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-fwjwxwfs"] > .js-add-reaction-label.fc-black-350.pl6

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

<a href="/users/3/" class="s-user-card--link truncate wmx2 comment-user lh-xs" itemprop="url">Test Engineering Admin</a>

Target

#follow-up-33295 > .fd-column.d-flex > .g6.d-flex:nth-child(1) > .overflow-hidden.g8.fl-grow1 > .jc-space-between.d-flex > .lh-md.s-user-card.s-user-card__small > .s-user-card--info[itemtype="https://schema.org/Person"][itemprop="author"] > .s-user-card--awards > .s-user-card--link.wmx2.comment-user

Summary

Fix any of the following:

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

HTML

<a href="/users/3/" class="s-user-card--link truncate wmx2 comment-user lh-xs" itemprop="url">Test Engineering Admin</a>

Target

#follow-up-37565 > .fd-column.d-flex > .g6.d-flex:nth-child(1) > .overflow-hidden.g8.fl-grow1 > .jc-space-between.d-flex > .lh-md.s-user-card.s-user-card__small > .s-user-card--info[itemtype="https://schema.org/Person"][itemprop="author"] > .s-user-card--awards > .s-user-card--link.wmx2.comment-user

Summary

Fix any of the following:

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

HTML

<a href="/users/9/" class="s-user-card--link truncate wmx2 comment-user lh-xs" itemprop="url">Test Moderator To Be</a>

Target

#follow-up-65899 > .fd-column.d-flex > .g6.d-flex:nth-child(1) > .overflow-hidden.g8.fl-grow1 > .jc-space-between.d-flex > .lh-md.s-user-card.s-user-card__small > .s-user-card--info[itemtype="https://schema.org/Person"][itemprop="author"] > .s-user-card--awards > .s-user-card--link.wmx2.comment-user

Summary

Fix any of the following:

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

HTML

<button class="s-link s-btn__muted s-btn__outlined comments-link" data-so-test="parent-question-38756">Add a comment</button>

Target

.comments-link.s-link[data-so-test="parent-question-38756"]

Summary

Fix any of the following:

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

HTML

<a href="/users/9/" class="mr2" itemprop="url" dir="auto">Test Moderator To Be</a>

Target

.mr2[dir="auto"][href="/users/9/"]

Summary

Fix any of the following:

  • Element has insufficient color contrast of 4.66 (foreground color: #1b75d0, background color: #ffffff, 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-5ywfhvgt"] > .js-add-reaction-label.fc-black-350.pl6

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

<a href="/users/3/" class="s-user-card--link truncate wmx2 comment-user lh-xs" itemprop="url">Test Engineering Admin</a>

Target

#follow-up-33298 > .fd-column.d-flex > .g6.d-flex:nth-child(1) > .overflow-hidden.g8.fl-grow1 > .jc-space-between.d-flex > .lh-md.s-user-card.s-user-card__small > .s-user-card--info[itemtype="https://schema.org/Person"][itemprop="author"] > .s-user-card--awards > .s-user-card--link.wmx2.comment-user

Summary

Fix any of the following:

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

HTML

<a href="/users/7/" itemprop="url" dir="auto">Test Downvoter</a>

Target

a[href="/users/7/"][dir="auto"][itemprop="url"]

Summary

Fix any of the following:

  • Element has insufficient color contrast of 4.66 (foreground color: #1b75d0, background color: #ffffff, 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-26jwk5dt"] > .js-add-reaction-label.fc-black-350.pl6

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

<a href="/users/3/" class="s-user-card--link truncate wmx2 comment-user lh-xs" itemprop="url">Test Engineering Admin</a>

Target

#follow-up-37569 > .fd-column.d-flex > .g6.d-flex:nth-child(1) > .overflow-hidden.g8.fl-grow1 > .jc-space-between.d-flex > .lh-md.s-user-card.s-user-card__small > .s-user-card--info[itemtype="https://schema.org/Person"][itemprop="author"] > .s-user-card--awards > .s-user-card--link.wmx2.comment-user

Summary

Fix any of the following:

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

HTML

<a href="/users/8/" itemprop="url" dir="auto">Test Question Answerer</a>

Target

a[href="/users/8/"][dir="auto"][itemprop="url"]

Summary

Fix any of the following:

  • Element has insufficient color contrast of 4.66 (foreground color: #1b75d0, background color: #ffffff, 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-suh76jv2"] > .js-add-reaction-label.fc-black-350.pl6

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

<button class="js-add-another-answe..." data-confirm-text="Are you sure you wan..." data-confirm-use-fan...="False" data-confirm-fancy-t...="" data-confirm-fancy-b...="" data-confirm-fancy-a...="">

Target

.js-add-another-answer

Summary

Fix any of the following:

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

HTML

<button class="s-btn s-btn__link js-fetch-add-to-collection-modal mt10 py8">
            <svg aria-hidden="true" class="va-text-top svg-icon iconPlusSm" width="14" height="14" viewBox="0 0 14 14"><path d="M8 2H6v4H2v2h4v4h2V8h4V6H8z"></path></svg> Add this question to a collection
        </button>

Target

.js-fetch-add-to-collection-modal

Summary

Fix any of the following:

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

HTML

<a href="https://sem1.dev.stackenterprise.co/questions/16597?rq=1" class="question-hyperlink">solid Gloves Plastic Oriental Center</a>

Target

div[data-question-id="16597"] > .question-hyperlink

Summary

Fix any of the following:

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

HTML

<a href="https://sem1.dev.stackenterprise.co/questions/26496?rq=1" class="question-hyperlink">indigo navigating overriding lime Modern</a>

Target

div[data-question-id="26496"] > .question-hyperlink

Summary

Fix any of the following:

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

HTML

<a href="https://sem1.dev.stackenterprise.co/questions/27946?rq=1" class="question-hyperlink">Intuitive virtual initiatives Borders B2B payment Soft</a>

Target

div[data-question-id="27946"] > .question-hyperlink

Summary

Fix any of the following:

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

HTML

<a href="https://sem1.dev.stackenterprise.co/questions/30168?rq=1" class="question-hyperlink">Buckinghamshire Nepal New Granite Home Buckinghamshire Lek indigo innovative compress Cambridgeshire Corporate</a>

Target

div[data-question-id="30168"] > .question-hyperlink

Summary

Fix any of the following:

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

HTML

<a href="https://sem1.dev.stackenterprise.co/questions/32985?rq=1" class="question-hyperlink">Administrator Borders Tuna Tactics AI Direct Texas Walks</a>

Target

div[data-question-id="32985"] > .question-hyperlink

Summary

Fix any of the following:

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

HTML

<a href="https://sem1.dev.stackenterprise.co/questions/34129?rq=1" class="question-hyperlink">encompassing system of Antillian generate Locks Tuna auxiliary Glens Mauritius Handmade Oriental transition</a>

Target

div[data-question-id="34129"] > .question-hyperlink

Summary

Fix any of the following:

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

HTML

<a href="https://sem1.dev.stackenterprise.co/questions/35844?rq=1" class="question-hyperlink">Bespoke Maryland Trinidad Coordinator Borders</a>

Target

div[data-question-id="35844"] > .question-hyperlink

Summary

Fix any of the following:

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

link-in-text-block

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="/users/9/" class="mr2" itemprop="url" dir="auto">Test Moderator To Be</a>

Target

.mr2[dir="auto"][href="/users/9/"]

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

link-in-text-block

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="/users/9/" class="mr2" itemprop="url" dir="auto">Test Moderator To Be</a>

Target

.mr2[dir="auto"][href="/users/9/"]

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

Ensure that lists are structured correctly. <ul> and <ol> must only directly contain <li>, <script> or <template> elements. Help URL

HTML

<ul class="s-navigation s-navigation__vertical">

Target

nav[role="navigation"] > .s-navigation.s-navigation__vertical

Summary

Fix all of the following:

  • List element has direct children that are not allowed: ul

Ensure that lists are structured correctly. <ul> and <ol> must only directly contain <li>, <script> or <template> elements. Help URL

HTML

<ul class="s-navigation s-navigation__vertical">

Target

nav[role="navigation"] > .s-navigation.s-navigation__vertical

Summary

Fix all of the following:

  • List element has direct children that are not allowed: ul

Ensure that lists are structured correctly. <ul> and <ol> must only directly contain <li>, <script> or <template> elements. Help URL

HTML

<ul class="s-navigation s-navigation__vertical">

Target

nav[role="navigation"] > .s-navigation.s-navigation__vertical

Summary

Fix all of the following:

  • List element has direct children that are not allowed: ul

Ensure that lists are structured correctly. <ul> and <ol> must only directly contain <li>, <script> or <template> elements. Help URL

HTML

<ul class="s-navigation s-navigation__vertical">

Target

nav[role="navigation"] > .s-navigation.s-navigation__vertical

Summary

Fix all of the following:

  • List element has direct children that are not allowed: ul