表单下方的帮助文字用了 #aaa,室内看着还行,到户外屏幕上几乎和背景融成一片,用户根本没发现那里还有一段说明。乍看像缓存或者权限的锅,追下去往往不是。

.hint{color:#595959;font-size:13px}
<!-- #fff 底色上 #595959 对比度约 7:1 -->

追下去是这么回事:浅灰配白底的对比度只有二点几比一,远低于正文要求的 4.5 比一,字号又偏小,强光下看不清,改颜色比改布局省事得多,成本很低。

「文字对比度不足」相关的日志我一般连着看前后五分钟,单看一条报错经常判断不出是哪一步失败。测试环境和线上的差别,往往就在版本号和那几行被忽略的配置上。

线上出问题先对时间点,跟发布、备份、任务执行的时刻排一排,能省掉一半功夫。

具体做法是,帮助文字的颜色不要浅于标准里那一档中灰,别用浅灰凑;把文字色和背景色两个值丢进在线对比度工具里算一遍;辅助信息靠字号和行距来区分层级,别一味把颜色调浅。

验收就看一点,截图后用取色器量一遍色值,正文和提示文字都要过 4.5 比一才放心。

作者 9823189