Email Accessibility4 min read

Measure Email Text Contrast Against Its Actual Background

Approve color pairs by text role and observed rendering state. A contrast calculation and color-pair defect sheet.

Written by
Marketing Wiki Research Automation
Review status
Not independently reviewed
Published
Updated
Evidence checked
Sources
3
Direct answer

Approve color pairs by text role and observed rendering state. A contrast calculation and color-pair defect sheet.

Measure each important text-and-background pair in a Migma email before approving the palette. A brand color can be recognizable and still provide insufficient contrast for a small price, footnote or button label in the combination actually used.

Editorial disclosure: Prepared by Marketing Wiki Research Automation under standing direct-publication authorization and not independently reviewed. Product capabilities are vendor-documented unless labeled otherwise; sources were refreshed on September 18, 2026.

Affiliation disclosure: Marketing Wiki’s commissioning maintainer also maintains Migma. This guide is published directly by automation without independent review.

Migma's Visual Editor provides a practical place to repair the affected text and layout, while Email Preflight provides inbox previews for review. We recommend checking the specific rendered color pair and then applying a targeted edit. These capabilities do not establish automatic WCAG certification.

The W3C contrast-minimum explanation sets a 4.5:1 threshold for ordinary text and 3:1 for qualifying large text, with defined exceptions. Use the actual size and weight to determine the applicable threshold. Calling a line a “headline” in the design file does not by itself make it large text.

Start with the weakest useful text#

A fictional outdoor retailer uses a pale gray secondary color. Its hero is readable, but the delivery restriction beneath the CTA uses that gray on white. The restriction is necessary to understand the offer, so making it faint is a content problem as well as a visual one.

Collect text role, foreground, background, size, weight and observed mode. Start with price qualifiers, eligibility notes, footer links and secondary buttons. These are easy to overlook when a reviewer focuses on the hero image.

Use the final background behind the letters. A transparent section may inherit a different color than the one shown beside its token in a brand sheet. Text over an image requires inspecting the relevant background area rather than measuring one convenient corner.

Calculate one pair reproducibly#

The following offline Python function calculates relative luminance and the contrast ratio for opaque sRGB hex colors:

def luminance(value):
    rgb = [int(value[i:i+2], 16) / 255 for i in (1, 3, 5)]
    linear = [c / 12.92 if c <= 0.04045
              else ((c + 0.055) / 1.055) ** 2.4 for c in rgb]
    return sum(c * w for c, w in zip(linear, (0.2126, 0.7152, 0.0722)))

def contrast(a, b):
    light, dark = sorted((luminance(a), luminance(b)), reverse=True)
    return (light + 0.05) / (dark + 0.05)

assert contrast("#000000", "#FFFFFF") == 21
assert contrast("#777777", "#FFFFFF") < 4.5

The assertions were executed locally. The gray example is about 4.478:1, so rounding it to 4.5 would hide a failure against a 4.5:1 requirement. This calculation does not model transparency, gradients, screenshots or client color transformations.

Repair a role, then verify its neighbors#

In the Migma draft, select the restriction text and choose a darker approved text color, or place it on a suitable solid background. Keep the sentence readable at its intended size. Enlarging everything to qualify for a lower threshold can distort the design and does not resolve other readability problems.

Ask the brand owner to approve a functional text color if the palette lacks one. The alternative should have a defined role, such as secondary body text on light surfaces, so the next draft does not recreate the same problem.

Record the repair in a defect sheet:

Scroll table →
LocationBeforeRequired resultVerification
Delivery restrictionGray text on whiteOrdinary-text thresholdCalculated final opaque pair
CTA labelBrand text on button fillThreshold for actual sizeRecheck after color edit
Footer linkInherited section colorReadable and identifiableInspect final rendered state

Do not substitute color contrast for descriptive link text or adequate spacing. Each addresses a different reader problem.

Recheck the state that readers receive#

Review light and dark inbox previews after saving the edit. If the client changes colors, a calculation on the authored pair does not establish the observed pair. Preserve the mode and client context with the finding, and investigate the resulting colors using an appropriate inspection method.

The general accessibility guide covers wider structural and assistive-technology review. This worksheet is deliberately narrower: it makes one contrast decision reproducible and repairable. No Migma account, inbox or assistive technology was tested here; only the synthetic color arithmetic was executed. Begin with the smallest essential sentence in the next draft and measure the pair it actually uses.

Evidence

Sources behind this page

Claims remain tied to dated source review. Method and corrections stay public.

  1. S-01Migma: Visual Email Editordocs.migma.ai
  2. S-02Migma: Email Preflightdocs.migma.ai
  3. S-03W3C: Understanding Contrast Minimumw3.org