email/components/buttons

ID:
email/components/buttons
Automated score:
98.2
View JSON file

2 violations: HC Light: 1 HC Dark: 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 class="s-btn s-btn__white" href="#" style="background: #ffffff; border: 1px solid #ffffff; font-family: arial, sans-serif; color: #0077cc; font-size: 17px; line-height: 17px; text-align: center; text-decoration: none; padding: 13px 17px; display: inline-block; border-radius: 4px;">

Target

.bg-black-600.stacks-preview--example > .s-btn__white.s-btn[href="#"]

Summary

Fix any of the following:

  • Element has insufficient color contrast of 4.65 (foreground color: #0077cc, background color: #ffffff, font size: 12.8pt (17px), font weight: normal). Expected contrast ratio of 7:1

HTML

<a class="s-btn s-btn__outlined" href="#" style="background: #ffffff; border: 1px solid #0077cc; font-family: arial, sans-serif; font-size: 17px; line-height: 17px; color: #0077cc; text-align: center; text-decoration: none; padding: 13px 17px; display: inline-block; border-radius: 4px; white-space: nowrap;">

Target

.stacks-preview--example > .s-btn__outlined.s-btn[href="#"]

Summary

Fix any of the following:

  • Element has insufficient color contrast of 4.65 (foreground color: #0077cc, background color: #ffffff, font size: 12.8pt (17px), font weight: normal). Expected contrast ratio of 7:1

HTML

<a class="s-btn s-btn__white" href="#" style="background: #ffffff; border: 1px solid #ffffff; font-family: arial, sans-serif; color: #0077cc; font-size: 17px; line-height: 17px; text-align: center; text-decoration: none; padding: 13px 17px; display: block; border-radius: 4px;">Ask question</a>

Target

.stacks-preview.mb24:nth-child(4) > .stacks-preview--example > .gx12.ai-center.d-flex > .p12.bg-black-600.flex--item > .s-btn__white.s-btn[href="#"]

Summary

Fix any of the following:

  • Element has insufficient color contrast of 4.65 (foreground color: #0077cc, background color: #ffffff, font size: 12.8pt (17px), font weight: normal). Expected contrast ratio of 7:1

HTML

<a class="s-btn s-btn__outlined" href="#" style="background: #ffffff; border: 1px solid #0077cc; font-family: arial, sans-serif; font-size: 17px; line-height: 17px; color: #0077cc; text-align: center; text-decoration: none; padding: 13px 17px; display: block; border-radius: 4px; white-space: nowrap;">

Target

.stacks-preview.mb24:nth-child(4) > .stacks-preview--example > .gx12.ai-center.d-flex > .flex--item:nth-child(3) > .s-btn__outlined.s-btn[href="#"]

Summary

Fix any of the following:

  • Element has insufficient color contrast of 4.65 (foreground color: #0077cc, background color: #ffffff, font size: 12.8pt (17px), font weight: normal). Expected contrast ratio of 7:1

HTML

<a class="s-btn s-btn__white" href="#" style="background: #ffffff; border: 1px solid #ffffff; font-family: arial, sans-serif; color: #0077cc; font-size: 13px; line-height: 13px; text-align: center; text-decoration: none; padding: 10px; display: block; border-radius: 3px;">Ask question</a>

Target

.stacks-preview.mb24:nth-child(7) > .stacks-preview--example > .gx12.ai-center.d-flex > .p12.bg-black-600.flex--item > .s-btn__white.s-btn[href="#"]

Summary

Fix any of the following:

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

HTML

<a class="s-btn s-btn__outlined" href="#" style="background: #ffffff; border: 1px solid #0077cc; font-family: arial, sans-serif; font-size: 13px; line-height: 13px; color: #0077cc; text-align: center; text-decoration: none; padding: 10px; display: block; border-radius: 3px; white-space: nowrap;">

Target

.stacks-preview.mb24:nth-child(7) > .stacks-preview--example > .gx12.ai-center.d-flex > .flex--item:nth-child(3) > .s-btn__outlined.s-btn[href="#"]

Summary

Fix any of the following:

  • Element has insufficient color contrast of 4.65 (foreground color: #0077cc, background color: #ffffff, 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 class="s-btn s-btn__white" href="#" style="background: #ffffff; border: 1px solid #ffffff; font-family: arial, sans-serif; color: #0077cc; font-size: 17px; line-height: 17px; text-align: center; text-decoration: none; padding: 13px 17px; display: inline-block; border-radius: 4px;">

Target

.bg-black-600.stacks-preview--example > .s-btn__white.s-btn[href="#"]

Summary

Fix any of the following:

  • Element has insufficient color contrast of 4.65 (foreground color: #0077cc, background color: #ffffff, font size: 12.8pt (17px), font weight: normal). Expected contrast ratio of 7:1

HTML

<a class="s-btn s-btn__outlined" href="#" style="background: #ffffff; border: 1px solid #0077cc; font-family: arial, sans-serif; font-size: 17px; line-height: 17px; color: #0077cc; text-align: center; text-decoration: none; padding: 13px 17px; display: inline-block; border-radius: 4px; white-space: nowrap;">

Target

.stacks-preview--example > .s-btn__outlined.s-btn[href="#"]

Summary

Fix any of the following:

  • Element has insufficient color contrast of 4.65 (foreground color: #0077cc, background color: #ffffff, font size: 12.8pt (17px), font weight: normal). Expected contrast ratio of 7:1

HTML

<a class="s-btn s-btn__white" href="#" style="background: #ffffff; border: 1px solid #ffffff; font-family: arial, sans-serif; color: #0077cc; font-size: 17px; line-height: 17px; text-align: center; text-decoration: none; padding: 13px 17px; display: block; border-radius: 4px;">Ask question</a>

Target

.stacks-preview.mb24:nth-child(4) > .stacks-preview--example > .gx12.ai-center.d-flex > .p12.bg-black-600.flex--item > .s-btn__white.s-btn[href="#"]

Summary

Fix any of the following:

  • Element has insufficient color contrast of 4.65 (foreground color: #0077cc, background color: #ffffff, font size: 12.8pt (17px), font weight: normal). Expected contrast ratio of 7:1

HTML

<a class="s-btn s-btn__outlined" href="#" style="background: #ffffff; border: 1px solid #0077cc; font-family: arial, sans-serif; font-size: 17px; line-height: 17px; color: #0077cc; text-align: center; text-decoration: none; padding: 13px 17px; display: block; border-radius: 4px; white-space: nowrap;">

Target

.stacks-preview.mb24:nth-child(4) > .stacks-preview--example > .gx12.ai-center.d-flex > .flex--item:nth-child(3) > .s-btn__outlined.s-btn[href="#"]

Summary

Fix any of the following:

  • Element has insufficient color contrast of 4.65 (foreground color: #0077cc, background color: #ffffff, font size: 12.8pt (17px), font weight: normal). Expected contrast ratio of 7:1

HTML

<a class="s-btn s-btn__white" href="#" style="background: #ffffff; border: 1px solid #ffffff; font-family: arial, sans-serif; color: #0077cc; font-size: 13px; line-height: 13px; text-align: center; text-decoration: none; padding: 10px; display: block; border-radius: 3px;">Ask question</a>

Target

.stacks-preview.mb24:nth-child(7) > .stacks-preview--example > .gx12.ai-center.d-flex > .p12.bg-black-600.flex--item > .s-btn__white.s-btn[href="#"]

Summary

Fix any of the following:

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

HTML

<a class="s-btn s-btn__outlined" href="#" style="background: #ffffff; border: 1px solid #0077cc; font-family: arial, sans-serif; font-size: 13px; line-height: 13px; color: #0077cc; text-align: center; text-decoration: none; padding: 10px; display: block; border-radius: 3px; white-space: nowrap;">

Target

.stacks-preview.mb24:nth-child(7) > .stacks-preview--example > .gx12.ai-center.d-flex > .flex--item:nth-child(3) > .s-btn__outlined.s-btn[href="#"]

Summary

Fix any of the following:

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