email/components/tags

ID:: email/components/tags
Automated score:: 96.4
URL:: https://stackoverflow.design/email/components/tags

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

<a href="#" style="display: inline-block; border: 5px solid #EFF0F1; border-color: #F4802401; margin: 0 1px 4px 0; background: #EFF0F1; background: #F4802415; border-radius: 3px; color: #F48024; font-family: arial, sans-serif; font-size: 12px; line-height: 12px; text-decoration: none; white-space: nowrap;">

Target

.stacks-preview.mb24:nth-child(7) > .stacks-preview--example > div:nth-child(2) > a[href="#"]:nth-child(1)

Summary

Fix all of the following:

Element has insufficient APCA custom level contrast of 45.69Lc (foreground color: #f48024, background color: #fef5ed, font size: 9.0pt (12px), font weight: 400). Expected minimum APCA lightness contrast of 60Lc

HTML

<a href="#" style="display: inline-block; border: 5px solid #EFF0F1; border-color: #F4802401; margin: 0 1px 4px 0; background: #EFF0F1; background: #F4802415; border-radius: 3px; color: #F48024; font-family: arial, sans-serif; font-size: 12px; line-height: 12px; text-decoration: none; white-space: nowrap;">

Target

.stacks-preview.mb24:nth-child(7) > .stacks-preview--example > div:nth-child(2) > a[href="#"]:nth-child(2)

Summary

Fix all of the following:

Element has insufficient APCA custom level contrast of 45.69Lc (foreground color: #f48024, background color: #fef5ed, font size: 9.0pt (12px), font weight: 400). Expected minimum APCA lightness contrast of 60Lc

HTML

<a href="#" style="display: inline-block; border: 5px solid #EFF0F1; border-color: #F4802401; margin: 0 1px 4px 0; background: #EFF0F1; background: #F4802415; border-radius: 3px; color: #F48024; font-family: arial, sans-serif; font-size: 12px; line-height: 12px; text-decoration: none; white-space: nowrap;">

Target

div:nth-child(2) > a[href="#"]:nth-child(3)

Summary

Fix all of the following:

Element has insufficient APCA custom level contrast of 45.69Lc (foreground color: #f48024, background color: #fef5ed, font size: 9.0pt (12px), 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

<a href="#" style="display: inline-block; border: 5px solid #EFF0F1; border-color: #2b8a3e01; margin: 0 1px 4px 0; background: #EFF0F1; background: #2b8a3e15; border-radius: 3px; color: #2b8a3e; font-family: arial, sans-serif; font-size: 12px; line-height: 12px; text-decoration: none; white-space: nowrap;">

Target

.stacks-preview.mb24:nth-child(7) > .stacks-preview--example > .mb8 > a[href="#"]:nth-child(1)

Summary

Fix all of the following:

Element has insufficient APCA custom level contrast of 27.55Lc (foreground color: #2b8a3e, background color: #252e29, font size: 9.0pt (12px), font weight: 400). Expected minimum APCA lightness contrast of 60Lc

HTML

<a href="#" style="display: inline-block; border: 5px solid #EFF0F1; border-color: #2b8a3e01; margin: 0 1px 4px 0; background: #EFF0F1; background: #2b8a3e15; border-radius: 3px; color: #2b8a3e; font-family: arial, sans-serif; font-size: 12px; line-height: 12px; text-decoration: none; white-space: nowrap;">

Target

.stacks-preview.mb24:nth-child(7) > .stacks-preview--example > .mb8 > a[href="#"]:nth-child(2)

Summary

Fix all of the following:

Element has insufficient APCA custom level contrast of 27.55Lc (foreground color: #2b8a3e, background color: #252e29, font size: 9.0pt (12px), font weight: 400). Expected minimum APCA lightness contrast of 60Lc

HTML

<a href="#" style="display: inline-block; border: 5px solid #EFF0F1; border-color: #2b8a3e01; margin: 0 1px 4px 0; background: #EFF0F1; background: #2b8a3e15; border-radius: 3px; color: #2b8a3e; font-family: arial, sans-serif; font-size: 12px; line-height: 12px; text-decoration: none; white-space: nowrap;">

Target

.stacks-preview.mb24:nth-child(7) > .stacks-preview--example > .mb8 > a[href="#"]:nth-child(3)

Summary

Fix all of the following:

Element has insufficient APCA custom level contrast of 27.55Lc (foreground color: #2b8a3e, background color: #252e29, font size: 9.0pt (12px), font weight: 400). Expected minimum APCA lightness contrast of 60Lc

HTML

<a href="#" style="display: inline-block; border: 5px solid #EFF0F1; border-color: #F4802401; margin: 0 1px 4px 0; background: #EFF0F1; background: #F4802415; border-radius: 3px; color: #F48024; font-family: arial, sans-serif; font-size: 12px; line-height: 12px; text-decoration: none; white-space: nowrap;">

Target

.stacks-preview.mb24:nth-child(7) > .stacks-preview--example > div:nth-child(2) > a[href="#"]:nth-child(1)

Summary

Fix all of the following:

Element has insufficient APCA custom level contrast of 46.24Lc (foreground color: #f48024, background color: #362d27, font size: 9.0pt (12px), font weight: 400). Expected minimum APCA lightness contrast of 60Lc

HTML

<a href="#" style="display: inline-block; border: 5px solid #EFF0F1; border-color: #F4802401; margin: 0 1px 4px 0; background: #EFF0F1; background: #F4802415; border-radius: 3px; color: #F48024; font-family: arial, sans-serif; font-size: 12px; line-height: 12px; text-decoration: none; white-space: nowrap;">

Target

.stacks-preview.mb24:nth-child(7) > .stacks-preview--example > div:nth-child(2) > a[href="#"]:nth-child(2)

Summary

Fix all of the following:

Element has insufficient APCA custom level contrast of 46.24Lc (foreground color: #f48024, background color: #362d27, font size: 9.0pt (12px), font weight: 400). Expected minimum APCA lightness contrast of 60Lc

HTML

<a href="#" style="display: inline-block; border: 5px solid #EFF0F1; border-color: #F4802401; margin: 0 1px 4px 0; background: #EFF0F1; background: #F4802415; border-radius: 3px; color: #F48024; font-family: arial, sans-serif; font-size: 12px; line-height: 12px; text-decoration: none; white-space: nowrap;">

Target

div:nth-child(2) > a[href="#"]:nth-child(3)

Summary

Fix all of the following:

Element has insufficient APCA custom level contrast of 46.24Lc (foreground color: #f48024, background color: #362d27, font size: 9.0pt (12px), font weight: 400). Expected minimum APCA lightness contrast of 60Lc

HTML

<a href="#" style="border: 5px solid #2b8a3e01; background: #2b8a3e15; border-radius: 3px; color: #2b8a3e; font-family: arial, sans-serif; font-size: 12px; line-height: 12px; text-decoration: none; white-space: nowrap;">tag-name</a>

Target

figure:nth-child(12) > a[href="#"]

Summary

Fix all of the following:

Element has insufficient APCA custom level contrast of 27.55Lc (foreground color: #2b8a3e, background color: #252e29, font size: 9.0pt (12px), 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

<a href="#" style="display: inline-block; border: 5px solid #eff0f1; margin: 0 1px 4px 0; background: #eff0f1; border-radius: 3px; color: #535a60; font-family: arial, sans-serif; font-size: 12px; line-height: 12px; text-decoration: none; white-space: nowrap;">meta-topic</a>

Target

.mb8:nth-child(2) > a[href="#"]:nth-child(1)

Summary

Fix any of the following:

Element has insufficient color contrast of 6.13 (foreground color: #535a60, background color: #eff0f1, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 7:1

HTML

<a href="#" style="display: inline-block; border: 5px solid #f9ecee; margin: 0 1px 4px 0; background: #f9ecee; border-radius: 3px; color: #C91D2E; font-family: arial, sans-serif; font-size: 12px; line-height: 12px; text-decoration: none; white-space: nowrap;">status-completed</a>

Target

.mb8:nth-child(2) > a[href="#"]:nth-child(2)

Summary

Fix any of the following:

Element has insufficient color contrast of 4.93 (foreground color: #c91d2e, background color: #f9ecee, font size: 9.0pt (12px), font weight: normal). 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

<a href="#" style="display: inline-block; border: 5px solid #eff0f1; margin: 0 1px 4px 0; background: #eff0f1; border-radius: 3px; color: #535a60; font-family: arial, sans-serif; font-size: 12px; line-height: 12px; text-decoration: none; white-space: nowrap;">meta-topic</a>

Target

.mb8:nth-child(2) > a[href="#"]:nth-child(1)

Summary

Fix any of the following:

Element has insufficient color contrast of 6.13 (foreground color: #535a60, background color: #eff0f1, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 7:1

HTML

<a href="#" style="display: inline-block; border: 5px solid #f9ecee; margin: 0 1px 4px 0; background: #f9ecee; border-radius: 3px; color: #C91D2E; font-family: arial, sans-serif; font-size: 12px; line-height: 12px; text-decoration: none; white-space: nowrap;">status-completed</a>

Target

.mb8:nth-child(2) > a[href="#"]:nth-child(2)

Summary

Fix any of the following:

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

HTML

<a href="#" style="display: inline-block; border: 5px solid #EFF0F1; border-color: #2b8a3e01; margin: 0 1px 4px 0; background: #EFF0F1; background: #2b8a3e15; border-radius: 3px; color: #2b8a3e; font-family: arial, sans-serif; font-size: 12px; line-height: 12px; text-decoration: none; white-space: nowrap;">

Target

.stacks-preview.mb24:nth-child(7) > .stacks-preview--example > .mb8 > a[href="#"]:nth-child(1)

Summary

Fix any of the following:

Element has insufficient color contrast of 4.55 (foreground color: #2b8a3e, background color: #040b05, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 7:1

HTML

<a href="#" style="display: inline-block; border: 5px solid #EFF0F1; border-color: #2b8a3e01; margin: 0 1px 4px 0; background: #EFF0F1; background: #2b8a3e15; border-radius: 3px; color: #2b8a3e; font-family: arial, sans-serif; font-size: 12px; line-height: 12px; text-decoration: none; white-space: nowrap;">

Target

.stacks-preview.mb24:nth-child(7) > .stacks-preview--example > .mb8 > a[href="#"]:nth-child(2)

Summary

Fix any of the following:

Element has insufficient color contrast of 4.55 (foreground color: #2b8a3e, background color: #040b05, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 7:1

HTML

<a href="#" style="display: inline-block; border: 5px solid #EFF0F1; border-color: #2b8a3e01; margin: 0 1px 4px 0; background: #EFF0F1; background: #2b8a3e15; border-radius: 3px; color: #2b8a3e; font-family: arial, sans-serif; font-size: 12px; line-height: 12px; text-decoration: none; white-space: nowrap;">

Target

.stacks-preview.mb24:nth-child(7) > .stacks-preview--example > .mb8 > a[href="#"]:nth-child(3)

Summary

Fix any of the following:

Element has insufficient color contrast of 4.55 (foreground color: #2b8a3e, background color: #040b05, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 7:1

HTML

<a href="#" style="border: 5px solid #2b8a3e01; background: #2b8a3e15; border-radius: 3px; color: #2b8a3e; font-family: arial, sans-serif; font-size: 12px; line-height: 12px; text-decoration: none; white-space: nowrap;">tag-name</a>

Target

figure:nth-child(12) > a[href="#"]

Summary

Fix any of the following:

Element has insufficient color contrast of 4.55 (foreground color: #2b8a3e, background color: #040b05, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 7:1