Accessible email worked example — before / after
FICTIONAL newsletter “Örnek Mağaza — Ekim kampanyası”. axe-core 4.13.0 in headless Chromium, tags: wcag2a, wcag2aa, wcag21a, wcag21aa, wcag22a, wcag22aa. Rendering in real email clients was NOT tested.
axe-core violations (WCAG 2.x A/AA rules)
| axe rule | What it checks | WCAG tags | Before (nodes) | After (nodes) |
|---|
color-contrast | Elements must meet minimum color contrast ratio thresholds | wcag2aa, wcag143 | 16 | 0 |
document-title | Documents must have <title> element to aid in navigation | wcag2a, wcag242 | 1 | 0 |
html-has-lang | <html> element must have a lang attribute | wcag2a, wcag311 | 1 | 0 |
image-alt | Images must have alternative text | wcag2a, wcag111 | 9 | 0 |
link-name | Links must have discernible text | wcag2a, wcag244, wcag412 | 8 | 0 |
| Total (rules / nodes) | 5 / 35 | 0 / 0 |
|---|
axe “incomplete” (needs manual review): before [{'rule': 'bypass', 'nodes': 1}]; after []. Best-practice (non-WCAG) rules flagged: before ['landmark-one-main', 'page-has-heading-one', 'region']; after ['landmark-one-main', 'region'] — landmark rules are not meaningful inside an email body, which the client wraps in its own page.
Other measured items
| Measured item | Before | After |
|---|
| HTML size (bytes, Gmail clips at ~102 KB) | 5543 | 12137 |
| <html lang> / dir | None / None | tr / ltr |
| <title> present | no | yes |
| Preheader | no | yes |
| Layout tables with role=presentation | 0 of 10 | 6 of 6 |
| Real headings (h1–h3) | 0 | 6 |
| Images: total / missing alt / alt="" decorative | 9 / 9 / 0 | 8 / 0 / 4 |
| Links with generic or empty name | 14 of 14 | 0 of 12 |
| Text colour pairs failing 4.5:1 (3:1 large), light | 8 of 9 | 0 of 16 |
| Same, with prefers-color-scheme: dark | 8 of 9 | 0 of 16 |
| Smallest text (px) | 9 | 14 |
| Width at 320 px viewport (px; >320 = sideways scroll) | 600 | 320 |
| Images off: offer facts readable (6 checked) | 0 of 6 | 6 of 6 |
| Plain-text part (multipart/alternative) | no | yes |
Contrast pairs — before (light)
| Text | Background | px | Ratio | Needed | Sample |
|---|
| #cccccc | #ffffff | 9 | 1.61:1 | 4.5:1 | Örnek Mağaza A.Ş. (FICTIONAL / KURGUSAL |
| #f2a65a | #ffffff | 12 | 2.02:1 | 4.5:1 | buraya tıklayın |
| #f2a65a | #ffffff | 11 | 2.02:1 | 4.5:1 | Devamı |
| #aaaaaa | #ffffff | 10 | 2.32:1 | 4.5:1 | E-postayı görüntüleyemiyor musunuz? |
| #e8833a | #ffffff | 24 bold | 2.71:1 | 3:1 | Sonbahara sıcak bir başlangıç |
| #e8833a | #ffffff | 11 | 2.71:1 | 4.5:1 | 149 TL |
| #999999 | #ffffff | 12 | 2.85:1 | 4.5:1 | Merhaba, Ekim ayı boyunca seçili ürünler |
| #999999 | #ffffff | 11 | 2.85:1 | 4.5:1 | Seramik kupa |
| #333333 | #ffffff | 18 bold | 12.63:1 | 4.5:1 | Haftanın ürünleri |
Contrast pairs — after (light)
| Text | Background | px | Ratio | Needed | Sample |
|---|
| #9a3412 | #f9fafb | 24 bold | 6.99:1 | 3:1 | Haftanın ürünleri |
| #9a3412 | #f9fafb | 16 | 6.99:1 | 4.5:1 | Seramik kupayı inceleyin |
| #9a3412 | #ffffff | 14 | 7.31:1 | 4.5:1 | Bu e-postayı tarayıcıda görüntüleyin |
| #9a3412 | #ffffff | 24 bold | 7.31:1 | 3:1 | Sonbahara sıcak bir başlangıç |
| #9a3412 | #ffffff | 16 | 7.31:1 | 4.5:1 | Kampanya koşullarını okuyun |
| #ffffff | #9a3412 | 18 bold | 7.31:1 | 4.5:1 | Kampanya ürünlerini görün |
| #9a3412 | #ffffff | 16 bold | 7.31:1 | 4.5:1 | Abonelikten çıkın |
| #4b5563 | #ffffff | 14 | 7.56:1 | 4.5:1 | Örnek Mağaza A.Ş. (FICTIONAL / KURGUSAL |
| #ffedd5 | #7c2d12 | 16 bold | 8.18:1 | 4.5:1 | EKİM KAMPANYASI |
| #ffedd5 | #7c2d12 | 16 | 8.18:1 | 4.5:1 | 31 Ekim'e kadar geçerli · 500 TL üzeri ü |
| #ffffff | #7c2d12 | 40 bold | 9.37:1 | 3:1 | Tüm ev ürünlerinde %40 indirim |
| #ffffff | #7c2d12 | 18 | 9.37:1 | 4.5:1 | İndirim kodu: |
| #ffffff | #7c2d12 | 20 bold | 9.37:1 | 3:1 | EKIM40 |
| #1f2937 | #f9fafb | 18 bold | 14.05:1 | 4.5:1 | Seramik kupa |
| #1f2937 | #f9fafb | 16 | 14.05:1 | 4.5:1 | 149 TL |
| #1f2937 | #ffffff | 16 | 14.68:1 | 4.5:1 | Merhaba, Ekim ayı boyunca seçili ev ürün |
Contrast pairs — after (prefers-color-scheme: dark)
| Text | Background | px | Ratio | Needed | Sample |
|---|
| #fdba74 | #1f2937 | 24 bold | 8.7:1 | 3:1 | Haftanın ürünleri |
| #fdba74 | #1f2937 | 16 | 8.7:1 | 4.5:1 | Seramik kupayı inceleyin |
| #fdba74 | #111827 | 14 | 10.52:1 | 4.5:1 | Bu e-postayı tarayıcıda görüntüleyin |
| #fdba74 | #111827 | 24 bold | 10.52:1 | 3:1 | Sonbahara sıcak bir başlangıç |
| #fdba74 | #111827 | 16 | 10.52:1 | 4.5:1 | Kampanya koşullarını okuyun |
| #111827 | #fdba74 | 18 bold | 10.52:1 | 4.5:1 | Kampanya ürünlerini görün |
| #fdba74 | #111827 | 16 bold | 10.52:1 | 4.5:1 | Abonelikten çıkın |
| #fed7aa | #431407 | 16 bold | 11.56:1 | 4.5:1 | EKİM KAMPANYASI |
| #fed7aa | #431407 | 16 | 11.56:1 | 4.5:1 | 31 Ekim'e kadar geçerli · 500 TL üzeri ü |
| #d1d5db | #111827 | 14 | 12.04:1 | 4.5:1 | Örnek Mağaza A.Ş. (FICTIONAL / KURGUSAL |
| #f3f4f6 | #1f2937 | 18 bold | 13.34:1 | 4.5:1 | Seramik kupa |
| #f3f4f6 | #1f2937 | 16 | 13.34:1 | 4.5:1 | 149 TL |
| #ffffff | #431407 | 40 bold | 15.65:1 | 3:1 | Tüm ev ürünlerinde %40 indirim |
| #ffffff | #431407 | 18 | 15.65:1 | 4.5:1 | İndirim kodu: |
| #ffffff | #431407 | 20 bold | 15.65:1 | 3:1 | EKIM40 |
| #f3f4f6 | #111827 | 16 | 16.12:1 | 4.5:1 | Merhaba, Ekim ayı boyunca seçili ev ürün |
Contrast computed from Chromium computed styles (text colour vs nearest opaque ancestor background, WCAG 2.x relative-luminance formula). Text drawn inside images is not measurable this way — in the before version the whole offer is inside an image.