颜色对比度不达标怎么改，又不破坏品牌色

在我们抽查的 20 个中国品牌欧洲站里，对比度不足是唯一 20 个都有的问题。它影响的不只是视障用户：在室外用手机、屏幕亮度调低、年纪大一些的用户，都会看不清浅色文字。

WCAG 的要求

对比度按两种颜色的相对亮度计算，从 1:1（完全相同）到 21:1（白底黑字）。下面图里的数值都是按 WCAG 公式算出来的。

品牌色放在白底上

以一个常见的亮橙色 #FF7A00 为例，放在白底上只有 2.61:1，用作正文和小字都不合格：

做法是把品牌色分成两档：原色用在大标题、色块、背景这些不要求 4.5:1 的地方；正文、价格、链接用加深的那档。这样页面整体颜色几乎不变。

按钮

白字放在亮橙色按钮上，对比度和橙字放白底一样，只有 2.61:1。两个改法都能保留橙色：

• 按钮底色不变，文字改成深色：6.69:1。
• 文字保持白色，按钮底色改成加深的橙色：4.54:1。

灰色说明文字

价格旁边的“含税”、运费说明、评价数量，常用很浅的灰色。#999999 在白底上只有 2.85:1，#767676 是白底上刚好合格的灰（4.54:1）：

输入框和图标

输入框的边框、复选框、图标按钮属于 1.4.11 的非文本对比度，要求 3:1。很多主题用 #E5E5E5 这样的极浅边框，在白底上只有 1.26:1，看不清输入框在哪；换成 #939393 这一档（3.07:1）就够了。焦点框的颜色同样要和背景有足够对比。

在主题里怎么改

1. 先列出网站实际用到的文字颜色和背景颜色组合，逐个算对比度。我们的在线检测会直接列出不合格的元素。
2. 在 Shopify 主题编辑器的“主题设置 → 颜色”里调整配色方案；主题没有提供的，在主题代码的 CSS 变量里改。
3. 按钮、价格、链接这些反复出现的组件先改，一次覆盖全站。
4. 改完再检测一遍，确认对比度问题清零。

对比度之外的检查项见 WCAG 2.1 AA 检查清单。