product/components/modals

ID:
product/components/modals
Automated score:
96.7
URL:
https://stackoverflow.design/product/components/modals
View JSON file

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

<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="flex--item s-btn" type="button">Cancel</button>

Target

#example-modal-base > .s-modal--dialog[role="document"] > .gx8.s-modal--footer.d-flex > button[type="button"]:nth-child(2)

Summary

Fix all of the following:

  • Element has insufficient APCA custom level contrast of 54.31Lc (foreground color: #90c4f9, background color: #494d50, 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="flex--item s-btn" type="button">Cancel</button>

Target

#example-modal-base > .s-modal--dialog[role="document"] > .gx8.s-modal--footer.d-flex > button[type="button"]:nth-child(2)

Summary

Fix any of the following:

  • Element has insufficient color contrast of 4.98 (foreground color: #8cbff2, background color: #424548, 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="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute" target="_blank">Source</a>

Target

tr:nth-child(1) > td:nth-child(3) > a[target="_blank"]

Summary

Fix any of the following:

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

HTML

<a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA" target="_blank">Source</a>

Target

tr:nth-child(2) > td:nth-child(3) > a[target="_blank"]

Summary

Fix any of the following:

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

HTML

<a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute" target="_blank">Source</a>

Target

tr:nth-child(3) > td:nth-child(3) > a[target="_blank"]

Summary

Fix any of the following:

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

HTML

<a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute" target="_blank">Source</a>

Target

tr:nth-child(4) > td:nth-child(3) > a[target="_blank"]

Summary

Fix any of the following:

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

HTML

<a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_dialog_role" target="_blank">Source</a>

Target

tr:nth-child(5) > td:nth-child(3) > a[target="_blank"]

Summary

Fix any of the following:

  • The link has insufficient color contrast of 2.24:1 with the surrounding text. (Minimum contrast is 3:1, link text: #1b75d0, surrounding text: #3b4045)
  • 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="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute" target="_blank">Source</a>

Target

tr:nth-child(1) > td:nth-child(3) > a[target="_blank"]

Summary

Fix any of the following:

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

HTML

<a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA" target="_blank">Source</a>

Target

tr:nth-child(2) > td:nth-child(3) > a[target="_blank"]

Summary

Fix any of the following:

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

HTML

<a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute" target="_blank">Source</a>

Target

tr:nth-child(3) > td:nth-child(3) > a[target="_blank"]

Summary

Fix any of the following:

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

HTML

<a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute" target="_blank">Source</a>

Target

tr:nth-child(4) > td:nth-child(3) > a[target="_blank"]

Summary

Fix any of the following:

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

HTML

<a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_dialog_role" target="_blank">Source</a>

Target

tr:nth-child(5) > td:nth-child(3) > a[target="_blank"]

Summary

Fix any of the following:

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