颜色对比来确保我的暗模式电子邮件可访问？
Posted: Sun Mar 23, 2025 6:36 am
暗黑模式在每个电子邮件客户端上的呈现方式有哪些不同？
暗模式可以以三种默认方式呈现电子邮件：
无颜色变化 部分颜色反转 全色反转
苹果邮件 Outlook Web 应用程序 Gmail 应用程序 (iOS)
Outlook 2021 (Windows)
Office 365 (Windows)
Windows Mail
让我们看看下面截图中每个示例：
无颜色变化 部分颜色反转 全色反转
当然，这从来都不简单——你不能只用一种暗模式来解决这个问题，因为每个电子邮件客户端的控制程度都不同：
几乎完全控制 部分控制（使用 hack） 没有控制
苹果邮件 Gmail（移动版）
Outlook Web App
Outlook（移动版） Outlook 桌面版
Gmail 桌面版
（当你没有实现任何暗黑模式代码时，苹果不会有任何变化。一旦你实现了它，你就可以做各种各样的
魔法
） （全部和部分反转） （完全反转）
针对暗黑模式观众改进你的电子邮件
浏览 Litmus 的暗模式资源中心，寻找增强订阅者的可读性和用户体验的方法。
CSS 和条件编码如何使用 CSS 在不同客户端的电子邮件中应用不同的暗黑模式样式？
将此元数据添加到您的标签可确保在您的电子邮件中为已启用暗黑模式的订阅者启用该模式。 <head>
<meta name="color-scheme" content="light dark"> <meta name="supported-color-schemes" content="light dark">
在为暗黑模式编码时，如何确保不支持的客户端的回退样式？
如果客户端不支持暗模式，最好的方法是测试图像和颜色的显示方式并进行必要的调整以保持订阅者友好的体验和用户界面。
我们建议创建一个 Litmus Builder 文件，其中包含品牌颜色的表格，以查看它们在各种深色模式下的呈现情况。这样您就可以微调任何转换效果不佳的颜色 - 例如，某些黄色最终可能会看起来不美观或浑浊。
我可以在电子邮件中使用 CSS 变量来更好地支持暗模式吗？这会对旧客户端产生什么影响？
美国不支持 CSS 变量（Apple Mail 除外）。但是，美国以外的许多电子邮件客户端都支持 CSS 变量。最好检查一下受众的电子邮件客户端市场份额，以确定使用 CSS 变量是否适合您的具体情况。（我个人没有使用过 CSS 变量，所以我无法从经验上谈论它们。）
性能和优化暗黑模式如何影响电子邮件的加载时间，我该如何优化它？
这应该会产生相对较小的负面影响。添加深色模式样式不会显著增加代码大小，添加深色模式版本的图片也不会影响加载时间。只有相关图片才会加载 — 深色模式图片不会在浅色模式下加载，反之亦然。
在暗黑模式电子邮件中使用条件加载的最有效方法是什么？
电子邮件不支持条件加载。通常，条件编码是指 Outlook 桌面版的技术，它不提供可控制的暗黑模式——尽管这也不完全正确。
使用 VML 条件编码时，有两种方法可以处理 Outlook 中的暗黑模式：
在 Outlook 的暗色模式下保持文本颜色一致 [片段] – Nicole Merlin
修复暗模式的 VML 按钮背景颜色 [片段] – Wilbert Heinen
尽管如此，我们还是尽量避免使用 VML，因为Sarah Gallardo指出 VML 存在可访问性问题。此外，最新版本的 Outlook（以及所有后续版本）将不支持 VML，因此最好提前考虑。但是，如果您仍在为使用旧版本（如 Outlook 2013）的受众编写代码，那么这并没有多大帮助。
使用 SVG 可以改善暗黑模式电子邮件的性能和外观吗？
美国的电子邮件客户端对 SVG 的支持非常有限。如果您的受众使用美国以外的电子邮件客户端，那么那里会提供更多支持，您可以使用它们。Litmus 不会在电子邮件中使用 SVG。
无障碍设施我应该使用什么
您应该始终努力满足WCAG AAA 级合规性，以确保您的电子邮件可供最广泛的受众访问。然而，我们生活在一个不完美的世界，所以如果无法实现 AAA，我们只能满足于通过 WCAG AA 级。
WebAIM 对比度检查器等工具可以帮助您评估颜色对比度。要检查默认的暗色模式颜色是否符合这些标准，请使用颜色选择器浏览器扩展程序从暗色模式预览中抓取颜色，然后通过对比度检查器运行它们。
为了提高电子邮件的可读性，在深色背景上处理浅色文本的最佳方法是什么？
确保浅色文本不会太细。如果您的基础字体太细，则在深色模式下将其加粗（如果您的品牌要求您坚持使用细字体）。避免在纯黑色背景（#000000 ）上使用纯白色（ #FFFFFF ） 。这不仅会带来可访问性挑战，而且某些电子邮件客户端可能会覆盖您的设置并在深色模式下反转这些颜色，即使您明确指定了它们。
故障排除为什么在某些客户端的暗模式下我的电子邮件文本颜色会意外变化？
要进行故障排除，请问自己以下问题：
客户端可以控制颜色吗？如果没有，你唯一能做的就是为文本选择不同的颜色。
您是否添加了相应的暗模式CSS（@media（prefers-color-scheme：dark）或[data-ogsc]？
您是否添加了元标记和 CSS 来表明您有暗黑模式样式？将其添加到
您使用的文本颜色是纯白色还是纯黑色？选择稍微不同的颜色（我们在 Litmus 上使用#FEFEFE和#0E0E0E ）。
如何解决暗模式下背景图像无法正确显示的问题？
您的背景图片颜色是否反转了？如果可以，请尝试不同的图片格式。这可能会解决问题。如果没有，您可能需要选择一张在明暗模式下都能很好地显示的图片。
您的背景图片没有显示出来吗？背景图片并不是 台湾电话 在所有地方都受支持。确保实施任何暗黑模式电子邮件技巧以使其显示出来，然后将这些技巧复制到暗黑模式版本中。
为什么我的暗黑模式电子邮件无法在 Outlook 应用中按预期呈现？
因为这是 Outlook — 电子邮件开发会考验您的耐心。但认真地讲，请确保您的暗黑模式样式在每个 CSS 选择器之前都包含和。[data-ogsc][data-ogsb]
如果您使用多个选择器，则必须对每个选择器重复此操作：
检查以确保你正在使用 [data-ogsc]颜色和图像以及[data-ogsb]背景颜色。如果你尝试更改背景颜色，[data-ogsc]它可能会不起作用。
确保将浅色模式和深色模式图片都包裹在 <a> 中。如果它们没有链接，通常不会发生交换。
如何调试仅在特定设备上的暗黑模式下出现的 CSS 问题？
Litmus。专注于您遇到问题的特定设备，以避免在所有设备和客户端上运行不必要的预览。如果客户端是 Apple Mail 或 iOS，您可以在这些客户端上运行预览之前使用Litmus 中的暗黑模式切换来大致了解暗黑模式。
暗模式可以以三种默认方式呈现电子邮件：
无颜色变化 部分颜色反转 全色反转
苹果邮件 Outlook Web 应用程序 Gmail 应用程序 (iOS)
Outlook 2021 (Windows)
Office 365 (Windows)
Windows Mail
让我们看看下面截图中每个示例：
无颜色变化 部分颜色反转 全色反转
当然，这从来都不简单——你不能只用一种暗模式来解决这个问题，因为每个电子邮件客户端的控制程度都不同：
几乎完全控制 部分控制（使用 hack） 没有控制
苹果邮件 Gmail（移动版）
Outlook Web App
Outlook（移动版） Outlook 桌面版
Gmail 桌面版
（当你没有实现任何暗黑模式代码时，苹果不会有任何变化。一旦你实现了它，你就可以做各种各样的
魔法
） （全部和部分反转） （完全反转）针对暗黑模式观众改进你的电子邮件
浏览 Litmus 的暗模式资源中心，寻找增强订阅者的可读性和用户体验的方法。
CSS 和条件编码如何使用 CSS 在不同客户端的电子邮件中应用不同的暗黑模式样式？
将此元数据添加到您的标签可确保在您的电子邮件中为已启用暗黑模式的订阅者启用该模式。 <head>
<meta name="color-scheme" content="light dark"> <meta name="supported-color-schemes" content="light dark">
在为暗黑模式编码时，如何确保不支持的客户端的回退样式？
如果客户端不支持暗模式，最好的方法是测试图像和颜色的显示方式并进行必要的调整以保持订阅者友好的体验和用户界面。
我们建议创建一个 Litmus Builder 文件，其中包含品牌颜色的表格，以查看它们在各种深色模式下的呈现情况。这样您就可以微调任何转换效果不佳的颜色 - 例如，某些黄色最终可能会看起来不美观或浑浊。
我可以在电子邮件中使用 CSS 变量来更好地支持暗模式吗？这会对旧客户端产生什么影响？
美国不支持 CSS 变量（Apple Mail 除外）。但是，美国以外的许多电子邮件客户端都支持 CSS 变量。最好检查一下受众的电子邮件客户端市场份额，以确定使用 CSS 变量是否适合您的具体情况。（我个人没有使用过 CSS 变量，所以我无法从经验上谈论它们。）
性能和优化暗黑模式如何影响电子邮件的加载时间，我该如何优化它？
这应该会产生相对较小的负面影响。添加深色模式样式不会显著增加代码大小，添加深色模式版本的图片也不会影响加载时间。只有相关图片才会加载 — 深色模式图片不会在浅色模式下加载，反之亦然。
在暗黑模式电子邮件中使用条件加载的最有效方法是什么？
电子邮件不支持条件加载。通常，条件编码是指 Outlook 桌面版的技术，它不提供可控制的暗黑模式——尽管这也不完全正确。
使用 VML 条件编码时，有两种方法可以处理 Outlook 中的暗黑模式：
在 Outlook 的暗色模式下保持文本颜色一致 [片段] – Nicole Merlin
修复暗模式的 VML 按钮背景颜色 [片段] – Wilbert Heinen
尽管如此，我们还是尽量避免使用 VML，因为Sarah Gallardo指出 VML 存在可访问性问题。此外，最新版本的 Outlook（以及所有后续版本）将不支持 VML，因此最好提前考虑。但是，如果您仍在为使用旧版本（如 Outlook 2013）的受众编写代码，那么这并没有多大帮助。
使用 SVG 可以改善暗黑模式电子邮件的性能和外观吗？
美国的电子邮件客户端对 SVG 的支持非常有限。如果您的受众使用美国以外的电子邮件客户端，那么那里会提供更多支持，您可以使用它们。Litmus 不会在电子邮件中使用 SVG。
无障碍设施我应该使用什么
您应该始终努力满足WCAG AAA 级合规性，以确保您的电子邮件可供最广泛的受众访问。然而，我们生活在一个不完美的世界，所以如果无法实现 AAA，我们只能满足于通过 WCAG AA 级。
WebAIM 对比度检查器等工具可以帮助您评估颜色对比度。要检查默认的暗色模式颜色是否符合这些标准，请使用颜色选择器浏览器扩展程序从暗色模式预览中抓取颜色，然后通过对比度检查器运行它们。
为了提高电子邮件的可读性，在深色背景上处理浅色文本的最佳方法是什么？
确保浅色文本不会太细。如果您的基础字体太细，则在深色模式下将其加粗（如果您的品牌要求您坚持使用细字体）。避免在纯黑色背景（#000000 ）上使用纯白色（ #FFFFFF ） 。这不仅会带来可访问性挑战，而且某些电子邮件客户端可能会覆盖您的设置并在深色模式下反转这些颜色，即使您明确指定了它们。
故障排除为什么在某些客户端的暗模式下我的电子邮件文本颜色会意外变化？
要进行故障排除，请问自己以下问题：
客户端可以控制颜色吗？如果没有，你唯一能做的就是为文本选择不同的颜色。
您是否添加了相应的暗模式CSS（@media（prefers-color-scheme：dark）或[data-ogsc]？
您是否添加了元标记和 CSS 来表明您有暗黑模式样式？将其添加到
您使用的文本颜色是纯白色还是纯黑色？选择稍微不同的颜色（我们在 Litmus 上使用#FEFEFE和#0E0E0E ）。
如何解决暗模式下背景图像无法正确显示的问题？
您的背景图片颜色是否反转了？如果可以，请尝试不同的图片格式。这可能会解决问题。如果没有，您可能需要选择一张在明暗模式下都能很好地显示的图片。
您的背景图片没有显示出来吗？背景图片并不是 台湾电话 在所有地方都受支持。确保实施任何暗黑模式电子邮件技巧以使其显示出来，然后将这些技巧复制到暗黑模式版本中。
为什么我的暗黑模式电子邮件无法在 Outlook 应用中按预期呈现？
因为这是 Outlook — 电子邮件开发会考验您的耐心。但认真地讲，请确保您的暗黑模式样式在每个 CSS 选择器之前都包含和。[data-ogsc][data-ogsb]
如果您使用多个选择器，则必须对每个选择器重复此操作：
检查以确保你正在使用 [data-ogsc]颜色和图像以及[data-ogsb]背景颜色。如果你尝试更改背景颜色，[data-ogsc]它可能会不起作用。
确保将浅色模式和深色模式图片都包裹在 <a> 中。如果它们没有链接，通常不会发生交换。
如何调试仅在特定设备上的暗黑模式下出现的 CSS 问题？
Litmus。专注于您遇到问题的特定设备，以避免在所有设备和客户端上运行不必要的预览。如果客户端是 Apple Mail 或 iOS，您可以在这些客户端上运行预览之前使用Litmus 中的暗黑模式切换来大致了解暗黑模式。