９７黄色对比：一次网页校色完整复盘
９７黄色对比不能只看两张孤零零的色卡。本篇用一个网页优惠提示条的校色案例，按需求确认、建立候选色、场景测试、可读性检查和交付标注五步推进。重点不是选出“最好看的黄”，而是找出在真实页面里更合适的那一个。
步骤一：把模糊需求翻译成色值
案例设定是电商页面要做一条浅黄色优惠提示，需求文字只有“用９７黄色，别太刺眼”。这里不能直接开画。先列出两种最可能的解释：A为#FFFF97，即RGB（255，255，151）；B为#FFFF61，即RGB（255，255，97）。再加入参照组C：标准黄#FFFF00。三块色样尺寸、背景和显示亮度保持一致，避免面积效应干扰判断。
步骤二：放进真实组件逐项对比
把三种黄分别铺到同一提示条中，内容包含价格、普通说明、链接和关闭按钮。C组视觉冲击最强，但会抢走商品主图注意力；B组仍有明显促销感，适合短时活动；A组更像信息底色，连续浏览时压力较小。只看色卡时A可能显得平淡，放进页面后却更容易与红色价格、蓝色链接和平共处。
步骤三：测试文字与设备表现
下一步不是问团队“喜欢哪款”，而是检查任务是否完成。三组都搭配#222222深色正文，并在手机正常模式、护眼模式和普通办公显示器上查看。浅黄背景不适合直接使用白色小字，这不是审美问题，而是信息识别问题。测试还要覆盖低亮度环境，因为用户把屏幕调暗后，B与C更容易糊成一片亮色。
步骤四：定稿并留下可追溯记录
这个场景最终应优先选择A组#FFFF97：它符合“不刺眼”的要求，又能与白色页面拉开边界；若提示条承担限时促销任务，可改用B组。交付时不能只写“９７黄色”，而要记录背景HEX、文字HEX、使用组件和禁用搭配，并附三组对比截图。这样下次改版时，团队知道当初为什么选它，而不是重新进行一轮凭感觉投票。
常见问题
做９７黄色对比时为什么要加入标准黄？
参照色能建立视觉标尺。没有#FFFF00这类基准，团队容易把两个相近的浅黄色差异说得过大。
色彩对比需要几台设备？
最低建议覆盖一台常用手机和一台普通办公显示器；重要项目再增加经过校色的专业屏及目标打印样。
网页浅黄背景能配白字吗？
通常不建议。浅黄与白色明度接近，小字号尤其难读，应优先使用深灰、深蓝或深棕文字，并用对比度工具复核。