product/components/menus

ID:
product/components/menus
Automated score:
98.5
URL:
https://stackoverflow.design/product/components/menus
View JSON file

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

<a href="#" class="s-block-link s-block-link__danger">
                            Deactivate
                        </a>

Target

li[role="menuitem"]:nth-child(6) > .s-block-link__danger.s-block-link[href="#"]

Summary

Fix all of the following:

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

HTML

<a href="#" class="s-block-link s-block-link__danger">
                            Delete
                        </a>

Target

li[role="menuitem"]:nth-child(7) > .s-block-link__danger.s-block-link[href="#"]

Summary

Fix all of the following:

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

<a href="#" class="s-block-link s-block-link__danger">
                            Deactivate
                        </a>

Target

li[role="menuitem"]:nth-child(6) > .s-block-link__danger.s-block-link[href="#"]

Summary

Fix any of the following:

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

HTML

<a href="#" class="s-block-link s-block-link__danger">
                            Delete
                        </a>

Target

li[role="menuitem"]:nth-child(7) > .s-block-link__danger.s-block-link[href="#"]

Summary

Fix any of the following:

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

HTML

<div class="s-description mt2">Can view, ask, answer, and edit questions. Can also vote on and flag content.</div>

Target

label[for="choice-user-34"] > .flex--item:nth-child(2) > .s-description.mt2

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

<div class="s-description mt2">Everything a user can do, but can also delete and close questions.</div>

Target

label[for="choice-moderator-34"] > .flex--item:nth-child(2) > .s-description.mt2

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

<div class="s-description mt2">Everything a moderator can do and can also manage users, permissions, and site settings.</div>

Target

label[for="choice-admin-34"] > .flex--item:nth-child(2) > .s-description.mt2

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