无障碍图片不是另做一份交付物，而是同一批图片让更多人能看清——包括所有在户外用手机的人。
图上文字的对比度
标准阈值：
- 4.5:1 用于正常字号文字。
- 3:1 用于大字（约 24 像素以上，粗体约 19 像素以上）。
- 3:1 用于有含义的非文字元素——图标、图表线条、表单边框。
照片带来的复杂之处在于背景逐像素变化。要以文字后方最亮的区域来衡量，而不是平均值。如果文字所在的任何位置对比度不达标，就加压暗层、实心面板或投影，而不是去微调字体颜色。
颜色绝不能独自承载信息
约每 12 名男性和每 200 名女性中就有一人存在色觉缺陷，最常见的是红绿色盲。一张仅靠红绿区分数据系列的图表，对他们完全不可读——在灰度打印和未校准的显示器上同样不可读。
以下修正对所有人都提升清晰度：
- 在图表线条上直接标注，而不是用颜色对应的图例。
- 每个系列使用不同的形状或标记，而不只是不同颜色。
- 不同的线型——实线、虚线、点线。
- 填充区域使用图案或纹理。
- 改变明度，而不只是色相——两种明度相近的颜色在灰度下会融为一体。
一个快速测试：把图形转成灰度。如果仍能区分各系列，那它对几乎所有读者都成立。
烧进图片里的文字
图片里的文字无法被用户放大、无法被选中或翻译、在小屏幕上不会重排，而且除非在别处重复，否则对搜索引擎不可见。规则：
- 只要页面在你控制之下，就优先用真实的 HTML 文字叠在背景图上。
- 如果文字必须在图片里（社交卡片、表情包、截图），就在 alt 文本或邻近正文中重复关键内容。
- 绝不要把关键信息——价格、截止日期、联系方式——只放在图片里，无论是邮件还是网页。
真正有用的 alt 文本
- 描述图片在当前语境中的作用，而不是事无巨细地描述外观。商品图的 alt 应该说明这是什么商品，而不是"白色背景上的照片"。
- 装饰性图片写空的 alt 属性，让读屏软件跳过。完全不写 alt 是另一回事，而且更糟——读屏软件可能会念出文件名。
- 图表和信息图需要在文字中给出*数据或结论*，而不是"柱状图"三个字。把摘要写进周围正文，图片作为它的图示。
- 不要以"图片："开头——辅助技术已经会宣告这是一张图片。
- 保持简洁：一句清楚的话胜过一整段。
做到这些，你的图片就同时服务于读屏软件、搜索引擎、烈日下的手机屏幕，以及关闭了图片的用户——四类受众，一套规则。