email/guidelines/getting-started

ID:
email/guidelines/getting-started
Automated score:
96.4
URL:
https://stackoverflow.design/email/guidelines/getting-started
View JSON file

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

<div class="flex--item fs-body3 fc-light">
                            Gmail
                        </div>

Target

.btr-sm > .z-selected.lh-xs.jc-space-between > .ai-center.d-flex > .fs-body3.fc-light.flex--item

Summary

Fix any of the following:

  • Element has insufficient color contrast of 5.66 (foreground color: #525960, background color: #e3e6e8, font size: 12.8pt (17px), font weight: normal). Expected contrast ratio of 7:1

HTML

<strong>73</strong>

Target

.btr-sm > .z-selected.lh-xs.jc-space-between > .fs-body3.fc-light.flex--item > strong

Summary

Fix any of the following:

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

HTML

<div class="flex--item fs-body3 fc-light">
                            Yahoo
                        </div>

Target

.mb4.px12.bg-black-100:nth-child(3) > .z-selected.lh-xs.jc-space-between > .ai-center.d-flex > .fs-body3.fc-light.flex--item

Summary

Fix any of the following:

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

HTML

<div class="flex--item fs-body3 fc-light">
                            Apple Mail
                        </div>

Target

.mb4.px12.bg-black-100:nth-child(4) > .z-selected.lh-xs.jc-space-between > .ai-center.d-flex > .fs-body3.fc-light.flex--item

Summary

Fix any of the following:

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

HTML

<div class="flex--item fs-body3 fc-light">
                            Microsoft Outlook
                        </div>

Target

.mb4.px12.bg-black-100:nth-child(5) > .z-selected.lh-xs.jc-space-between > .ai-center.d-flex > .fs-body3.fc-light.flex--item

Summary

Fix any of the following:

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

HTML

<div class="flex--item fs-body3 fc-light">
                            iPhone
                        </div>

Target

.mb4.px12.bg-black-100:nth-child(6) > .z-selected.lh-xs.jc-space-between > .ai-center.d-flex > .fs-body3.fc-light.flex--item

Summary

Fix any of the following:

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

HTML

<div class="flex--item fs-body3 fc-light">
                            Windows Live Mail
                        </div>

Target

.mb4.px12.bg-black-100:nth-child(7) > .z-selected.lh-xs.jc-space-between > .ai-center.d-flex > .fs-body3.fc-light.flex--item

Summary

Fix any of the following:

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

HTML

<div class="flex--item fs-body3 fc-light">
                            iPad
                        </div>

Target

.mb4.px12.bg-black-100:nth-child(8) > .z-selected.lh-xs.jc-space-between > .ai-center.d-flex > .fs-body3.fc-light.flex--item

Summary

Fix any of the following:

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

HTML

<strong>&lt; 1</strong>

Target

.mb4.px12.bg-black-100:nth-child(8) > .z-selected.lh-xs.jc-space-between > .fs-body3.fc-light.flex--item > strong

Summary

Fix any of the following:

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

HTML

<div class="flex--item fs-body3 fc-light">
                            Samsung Mail
                        </div>

Target

.mb4.px12.bg-black-100:nth-child(9) > .z-selected.lh-xs.jc-space-between > .ai-center.d-flex > .fs-body3.fc-light.flex--item

Summary

Fix any of the following:

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

HTML

<strong>&lt; 1</strong>

Target

.mb4.px12.bg-black-100:nth-child(9) > .z-selected.lh-xs.jc-space-between > .fs-body3.fc-light.flex--item > strong

Summary

Fix any of the following:

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

HTML

<div class="flex--item fs-body3 fc-light">
                            Android Mail
                        </div>

Target

.mb4.px12.bg-black-100:nth-child(10) > .z-selected.lh-xs.jc-space-between > .ai-center.d-flex > .fs-body3.fc-light.flex--item

Summary

Fix any of the following:

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

HTML

<strong>&lt; 1</strong>

Target

.mb4.px12.bg-black-100:nth-child(10) > .z-selected.lh-xs.jc-space-between > .fs-body3.fc-light.flex--item > strong

Summary

Fix any of the following:

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

HTML

<div class="flex--item fs-body3 fc-light">
                            Mail.Ru
                        </div>

Target

.mb24 > .z-selected.lh-xs.jc-space-between > .ai-center.d-flex > .fs-body3.fc-light.flex--item

Summary

Fix any of the following:

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

HTML

<strong>&lt; 1</strong>

Target

.mb24 > .z-selected.lh-xs.jc-space-between > .fs-body3.fc-light.flex--item > strong

Summary

Fix any of the following:

  • Element has insufficient color contrast of 6.79 (foreground color: #525960, background color: #f9fafa, font size: 12.8pt (17px), font weight: bold). 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

<div class="flex--item fs-body3 fc-light">
                            Gmail
                        </div>

Target

.btr-sm > .z-selected.lh-xs.jc-space-between > .ai-center.d-flex > .fs-body3.fc-light.flex--item

Summary

Fix any of the following:

  • Element has insufficient color contrast of 5.97 (foreground color: #c8ccd0, background color: #424548, font size: 12.8pt (17px), 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="/email/components/buttons">buttons</a>

Target

a[href$="buttons"]

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="/email/components/images">images</a>

Target

a[href$="images"]

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="/email/components/tags">tags</a>

Target

a[href$="tags"]

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="/email/patterns/columns/">responsive columns</a>

Target

.fc-medium > a[href$="columns/"]

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="/email/components/buttons">buttons</a>

Target

a[href$="buttons"]

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="/email/components/images">images</a>

Target

a[href$="images"]

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="/email/components/tags">tags</a>

Target

a[href$="tags"]

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="/email/patterns/columns/">responsive columns</a>

Target

.fc-medium > a[href$="columns/"]

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