Page Comparison

Alt text is a short description displayed in place of an image when content is read by a screen reader, or images are being blocked. Include descriptive and concise alt text for all images, enabling screen readers to describe them to visually impaired users. The email loses all meaning without alt text when the image does not load.

Best Practices

• Alt text should be concise and descriptive.

• Avoid duplicating text already present in the email body.

• Limit the use of decorative graphics and images. Rely on text-based content rather than embedding all content in an image, such as a flyer. This approach avoids issues for users whose email clients block images or use screen readers.

• If an image contains text (e.g., banners or event flyers), ensure the text is also included in the email body or alt text.

How to Add Alt Text in Emails

1. Open the Email:

   • Navigate to Marketing > Email in your HubSpot account.

   • Open an existing email or create a new one using the Drag-and-Drop Editor.

2. Add or Select the Image:

   • Click on the image module where you want to add alt text.

   • If the image hasn’t been uploaded, click Replace to add an image.

3. Add Alt Text:

   • Find the Alt text field in the Image Settings panel on the right.

   • Enter a concise and descriptive alt text that conveys the purpose of the image.

     • Example: “Student holding books at Maricopa Community College.”

4. Save Your Changes:

   • Once added, click Done or Save to ensure the alt text is applied.

Ensuring proper color contrast in email design is crucial for accessibility, as it enhances readability for all users, including those with visual impairments. The Web Content Accessibility Guidelines (WCAG) provide specific standards to help designers achieve this.

• WCAG recommends using a contrast ratio of at least 4.5:1 for standard text (and 3:1 for larger text) to assist those with visual impairments.

• Provide enough white space around elements to prevent crowding, helping users visually differentiate and navigate content easily.

Tips for Implementing Color Contrast in Emails:

🔤 Text and Background Colors:

Avoid medium-to-light greys on white backgrounds or mid-toned, highly saturated colors, and foreground and background colors similar in luminance. 

Best Practices:

• Use lighter colors on light backgrounds or darker colors on dark backgrounds only for headings, where larger font sizes compensate for lower contrast.

• Ensure sufficient contrast between text and background to improve readability.

🟧 Button Colors

Use accessible contrast ratios for all button states: hover, focus, and active. To simplify testing, limit button color variations across states.

Best Practices:

• Increasing the button size or font size.

• Avoid relying solely on color or opacity changes.

🔗 Link Colors

Ensure link colors in both their default and hover/focus states meet contrast guidelines:

• Against the background.

• Compared to the surrounding text for a clear distinction.

🖌️ Beyond Colors

To emphasize content:

• Use underlines, highlights, bolding, or italics for links.

• Add icons (e.g., arrows, checkmarks, or stars) to buttons.

• Include meaningful graphical indicators or emojis to supplement text where appropriate.

🖼️ Graphics and Imagery

• Keep visuals clean and uncluttered using a limited, WCAG-compliant color palette.

• Avoid placing text over busy images.

• Always provide alt text for images, as many email clients may not initially render them.

🌑 Dark Mode Emails

Dark mode is growing in popularity on desktop and mobile. Some email clients automatically invert colors, which can create readability issues.

Best Practices:

• Test emails in dark mode across multiple email clients to identify display issues.

• Pay attention to:

  • Text and background contrasts.

  • Button contrasts in both light and dark modes.