色彩与字体 · 第 4 课,共 4 课

确保可访问性与可读性

可访问性不是合规要求——它是确保每个买家都能获取你的品牌信息的基础。

一位55岁的德国采购经理,在一家年采购额超过5000万欧元的中型企业工作了30年。他的工作之一是从中国寻找新的供应商。某天,他在谷歌上搜索到了一家浙江的精密零件制造商,网站打开后,他的第一反应是皱眉头。页面的正文文字是一种浅灰色,字号也只有11像素。他把笔记本屏幕的亮度调到最高,把脸凑近了屏幕,还是看不太清楚。他尝试放大页面——文字变大了,但布局也乱了,导航栏叠在了一起,产品图片变得残缺不全。他放弃了这家供应商,转向了下一家搜索结果中文字更大、对比度更高的竞争对手网站。

这不是一个极端案例。B2B出口的采购决策者中,45岁以上的专业人士占了相当大的比例。随着年龄增长,人的视力和对比敏感度都会自然下降——40岁以后,晶状体开始变硬,调节能力减弱,对低对比度文字的辨识能力明显下降。而很多中国出口企业的网站恰恰喜欢使用"看起来很现代"的浅灰色细字体——这种设计在设计师的27英寸Retina显示器上看起来确实很精致,但在普通工作笔记本上、在低亮度环境下或对一位55岁的采购经理来说,它就是不可读的。可访问性不是一种锦上添花的加分项,而是确保信息能被目标受众获取的基础条件——如果一个网站上的字买家都看不清,再好的品牌形象也无从建立。

WCAG的核心原则与实操

Web内容无障碍指南(WCAG)为网页的可访问性提供了国际标准。对于出口企业来说,不需要完全掌握WCAG的全部条款,但需要理解几个直接影响买家体验的核心指标。对比度——WCAG AA标准要求普通文本的对比度至少为4.5:1,大文本(18像素以上加粗或24像素以上常规)至少为3:1。什么是"4.5:1"?简单说就是文字不能和背景太接近。浅灰色(#999999)在白色背景上的对比度大约为2.8:1——这低于AA标准,意味着相当一部分读者会感到阅读困难。一个实用建议:在色板上确定文字色时,尽量使用黑色(#000000)或非常深的灰色(#333333或#222222),不要使用浅灰色作为正文颜色。

字体大小——正文的最小字号建议为16像素(相当于12pt)。WCAG没有强制规定最小字号,但通用经验是:14像素以下的文字在移动设备上对大多数用户来说都偏小。出口企业的网站尤其是B2B网站,用户经常在不同设备间切换查看——笔记本电脑、Pad、手机。正文使用16像素或以上可以作为保证在各种屏幕上都可读的基准。对于CJK文字系统(中文、日文、韩文),合理的字号基线建议更高——汉字笔画比拉丁字母更密集,同等字号下汉字的信息密度更高,更容易产生视觉疲劳。中文网站正文推荐字号为16到18像素。

行高与间距——行高(行间距)对中文阅读尤其重要。英文文本的推荐行高通常是字体大小的1.5倍(即line-height: 1.5),而中文文本因为每个汉字是方块字,行与行之间需要更大的间距来区分——推荐1.6到1.8倍。段落间距至少为行间距的1.5倍,让读者能清晰地感知段落的起止。按钮和可点击元素——确保按钮和链接的最小可点击区域达到44×44像素(WCAG推荐的触摸目标尺寸)。出口网站的买家经常在移动端浏览,够不上这个尺寸的按钮在拇指操作时非常容易点错。不要只用颜色来区分链接和普通文字——红绿色盲是最常见的色觉障碍类型(约影响8%的男性和0.5%的女性),只靠颜色来标识链接会使一部分人群无法识别。在链接文字下方保留下划线或使用不同的字体粗细作为辅助标识。

为B2B出口买家优化可读性

出口企业的目标受众有一些特殊的阅读特征,值得在设计可读性时专门考虑。第一,非母语阅读——大多数国际买家使用英语阅读,而英语不是他们的母语。这意味着他们的阅读速度和对字体变化的容忍度都低于母语读者。对非母语阅读者来说,清晰、传统、可预测的文字排版比"新颖独特"的排版更重要。使用标准字形(如Arial、Helvetica、Noto的常规体),保持充分的间距,避免使用装饰性字体作正文——这些都是在为买家节省认知负荷。

第二,多设备浏览场景——采购经理在办公桌上用大屏幕看产品详情,在展会中用手机快速查看公司信息,在飞机上利用Pad离线浏览产品目录。确保品牌网站在所有设备上都有可读的文字,不仅仅是为PC设计。在移动设备上,字号不能小于16像素,行距不能太小,按钮要足够大。第三,信息密度与格式——出口企业网站经常需要展示大量技术参数和产品规格。密集的数据表格需要良好的可读性设计:使用交替行背景色来提高逐行扫描的准确性,保留足够的单元格内边距,确保最小的数据字号不低于14像素。

第四,可访问性的竞争价值——当您所在的行业中,多数竞争对手的网站存在可读性问题时,一个可访问性友好的网站本身就成了一种差异化竞争优势。那位55岁的德国采购经理的经历不是个例——在B2B领域,很多资深采购人员的视力都处在自然下降的阶段,他们会对那些"看得很累"的供应商快速失去耐心。如果他们能在您的网站上轻松找到所需信息,而在竞争对手的网站上看得眼睛酸,这笔生意就自然流向了您。可访问性不是额外成本,而是被严重低估的商业竞争力。最终的衡量标准很简单:让一位55岁、使用普通笔记本电脑在正常办公室照明条件下的采购经理能轻松阅读您网站上的所有文字。如果他们能做到,您的可访问性就达标了。

现在就做
  1. 使用WebAIM的在线对比度检查工具,测试您网站上主要文字颜色与背景色的对比度——确保正文达到4.5:1的AA标准。
  2. 在您的手机上打开您的网站——检查正文文字在移动设备上是否不需要双指放大就能清晰阅读(目标:16像素以上)。
  3. 请一位45岁以上的朋友或同事,在正常办公环境下打开您的网站,让他们诚实反馈阅读体验——特别注意他们是否需要凑近屏幕或调整亮度。
  4. 检查您网站上的所有可点击元素——链接、按钮、导航项——是否能在触摸屏上轻松点击(最小目标区域44×44像素)。

常见问题

这是一个常见的误解。可访问性和美观之间不存在对立关系。高对比度、大字号和清晰排版是可以同时做到美观和可访问的——看看苹果、Stripe、Linear这些以设计著称的公司的网站,它们都使用了高对比度的文字和充足的间距。所谓的"时尚感"不应以牺牲可读性为代价。实际上,可访问性设计的基本原则——清晰的层级、足够的对比度、一致的间距——本身就是优秀视觉设计的组成部分。如果提高对比度就让你觉得网站"不好看了",那么问题可能是品牌色彩方案本身需要调整,而不是可访问性要求太苛刻。

如果你只说中文市场可以忽略本文——但作为出口企业,你的网站买家来自全球,WCAG标准对任何语言都适用。中文用户同样会受对比度低、字号小的影响——实际上,中文汉字的笔画密集程度更高,同等字号下比拉丁字母更容易阅读困难。中文网站的可读性问题同样严重:大量外贸网站使用11-12像素的中文正文、浅灰色字配浅色背景,对40岁以上的读者来说几乎是视觉折磨。WCAG标准是语言无关的——它关注的是视觉信息的可获取性,而不是语言内容。

取决于网站当前的状态。如果问题集中在颜色对比度和字号上,这两项可以通过修改CSS文件来调整——可能只需要半天到一天的工作。好的消息是,可访问性改善中投入产出比最高的往往是这些基础参数的调整。如果问题涉及更复杂的层面(如无文字标签的图标按钮、键盘导航缺失、表单验证没有错误提示),修复时间会更长。建议从"快速见效"的改动开始:提高对比度、增大正文字号、增加间距。这三点覆盖了80%的可读性问题,且改造成本最低——通常只需要在CSS中修改几个数值。剩下的20%可以在后续版本迭代中逐步完善。