游戏无障碍设计指南

使文本/UI 和背景之间具有高对比度

《刺客信条:起源》(Assassin's Creed Origins)的文本和准星的对比度太低了。UI/菜单上充斥着白色背景的淡黄色图像。希望这个问题得到修复 |: — cherryrae, 发布于 Twitter

除文本大小外,对比度是最常被抱怨的 UI 问题之一。一些常见的视觉障碍尤其会导致对比度敏感性下降,而患有色盲症等其它视觉障碍的玩家也会受到对比度的影响。

适宜的对比度也有益于受到环境限制的玩家,例如他们可能是在移动设备上、在阳光直射下或在质量较差的显示器上玩游戏。

理想情况下,应将文本和 UI 元素置于纯色高对比度的背景上,如果无法做到,可使用明显的轮廓和阴影来与背景区分开。网络行业已经制定了可测试的屏幕对比度限制标准,该标准也适用于游戏——即前景与背景的对比度比率至少为 4.5:1。

注意:高对比度的文本会引发癫痫是一个常见的误解。通过保持对比度、增大字号、减少行间距或确保合理的段落间距,可以解决 Harding 测试失败的情况。


优秀案例:《荣耀战魂》(For Honor)的 UI 对比度

橙色和蓝色的队伍图标同时带有黑色和白色描边,浅色的 UI 元素则带有深色描边,使得它们在任何背景色下都清晰可辨


优秀案例:《欢乐战争》(Happy Wars)的游戏说明

文本与背景对比度高,字母描边,关键词以黄色突出显示,两个按钮用于查看前后文本


优秀案例:《伯特伦·费德历险记》(Bertram Fiddle)中的字幕

字号够大,字体清晰易读,字幕与背景的颜色对比也十分突出/图片: rumpus


工具:Snook 对比度检查器 (旨在满足“Web 内容无障碍指南 2 AA 级标准”,即 WCAG 2 AA)

FCCTigaAwards

关于本指南

这份指南是由多个工作室、专家和学者组成的团队共同努力的结果——制作一份简明易懂的、对开发者友好的参考资料,目的是让游戏产品尽可能触及更广泛的玩家群体,避免因为不必要的缘由,将部分潜在玩家排除在外。

快速留言