前端工程师排查颜色依赖问题时，先看哪三类页面

前端排查颜色依赖，最怕两种走法: 一种是只盯设计稿挑颜色，另一种是把整站翻一遍，最后累到怀疑人生。更省力的办法，其实是先抓最容易出事故的三类页面。它们往往不是最花哨的页面，而是最容易把“颜色”当成唯一提示的页面。

第一类先看表单和操作反馈页

先查表单、弹窗、上传、配置保存这类页面。原因很实际: 这里的颜色通常直接承担“你做对了没”“这一步过没过”的信息。前端里最常见的坑，是校验失败只把边框变红，成功只给一条绿色 toast，禁用态和报错态靠不同色值硬分。

这类页面排查时，我会直接看三件事:

1. 报错有没有文字，不只是红色。
2. 成功和失败有没有图标或明确状态词。
3. 焦点、选中、禁用、报错这几种状态，脱离颜色后还能不能区分。

如果你的组件库里 error, success, warning 最终都只是切一个 class 名，那八成还有坑没填完。

第二类看图表和数据报表页

第二类是图表页、看板页、趋势页。很多工程师一开始会觉得这块是设计问题，其实代码里埋雷更多。比如折线图只靠两条红绿曲线区分系列，饼图 legend 只剩色块，热力图默认渐变一铺开，读数的人没法稳稳地做判断。

这里别先争“这个配色是不是够专业”，先看代码有没有做冗余。legend 里有没有名字，tooltip 能不能说清当前系列，选中状态有没有描边、形状、纹理或者位置辅助。要是一个图表组件传进来只是 color: ['#16a34a', '#ef4444']，没有别的表达层，那就不是小优化，是结构性问题。

第三类看状态密集的列表和后台页

真正容易漏的，往往是后台列表、审批页、订单页、监控页。页面上一排 badge、一列状态点、几种不同颜色的 tag，看起来信息很多，实际全靠眼睛猜。用户扫得快时，最容易把“待审核”和“已完成”看串。

这类页面最该查的是复用组件。因为一旦 StatusTag 只有颜色和短词，整个后台都会复制同一套问题。前端排查时可以先从组件入口找，看看哪些 props 只是 type='success' | 'danger'，却没有图标、文案扩展或辅助属性。顺着组件往下查，比一页一页肉眼翻快得多。