[{"data":1,"prerenderedAt":283},["ShallowReactive",2],{"blog-post-/blog/zh-cn/how-to-pick-accessible-ui-colors":3,"related-posts-/zh-CN/blog/how-to-pick-accessible-ui-colors":282},{"id":4,"title":5,"author":6,"body":7,"category":261,"date":262,"description":263,"extension":264,"featured":265,"image":266,"meta":267,"navigation":268,"path":269,"readingTime":270,"seo":271,"stem":272,"tags":273,"tools":279,"__hash__":281},"content/blog/zh-CN/how-to-pick-accessible-ui-colors.md","如何在 2026 年选择无障碍 UI 配色","Anything Tools Team",{"type":8,"value":9,"toc":249},"minimark",[10,14,18,21,30,35,38,41,57,60,64,67,93,96,99,103,106,123,126,130,133,136,147,152,155,158,175,178,182,190,193,210,213,216,234,237,240,243],[11,12,5],"h1",{"id":13},"如何在-2026-年选择无障碍-ui-配色",[15,16,17],"p",{},"选择界面颜色，不只是品牌审美问题。它会直接影响可读性、操作判断、错误预防，以及产品是否让人觉得可靠。",[15,19,20],{},"如果按钮看起来漂亮，但文字难以辨认，那这套配色就没有完成它的任务。真正好的无障碍配色，应该先让界面更清晰，再谈装饰感。",[15,22,23,24,29],{},"如果你想先快速试色并转换颜色格式，可以直接使用 ",[25,26,28],"a",{"href":27},"/design/color-picker","Anything Tools 颜色选择器","。",[31,32,34],"h2",{"id":33},"先看对比度再谈好不好看","先看对比度，再谈“好不好看”",[15,36,37],{},"很多团队会先定一个品牌主色，然后把它尽量用到所有地方。这往往会出问题，因为一个强调色很难同时适合正文、背景、边框、标签、状态提示和禁用态。",[15,39,40],{},"更稳妥的方式，是先从用户最常读、最常操作的界面区域开始：",[42,43,44,48,51,54],"ul",{},[45,46,47],"li",{},"正文与主背景",[45,49,50],{},"次级文字与浅色面板",[45,52,53],{},"按钮与链接",[45,55,56],{},"成功、警告、错误状态",[15,58,59],{},"普通文本通常需要满足足够稳妥的对比度，才能符合 WCAG 的可读性预期。对于按钮、标签和提示状态，即使不是正文，也必须让用户一眼分清“可点”“已选中”“有风险”。",[31,61,63],{"id":62},"不要只找一个完美色值而是建立一套小型色彩系统","不要只找一个完美色值，而是建立一套小型色彩系统",[15,65,66],{},"无障碍界面更容易维护的关键，不是“找到一个神奇的 HEX”，而是给每个颜色角色明确职责。常见做法是先定义一小组 token：",[42,68,69,72,75,78,81,84,87,90],{},[45,70,71],{},"页面背景",[45,73,74],{},"主文字",[45,76,77],{},"次级文字",[45,79,80],{},"边框",[45,82,83],{},"主操作色",[45,85,86],{},"成功色",[45,88,89],{},"警告色",[45,91,92],{},"错误色",[15,94,95],{},"当这些角色清楚后，你就能围绕它们延伸深浅层级，而不是每做一个页面就重新猜一次。",[15,97,98],{},"重点不是颜色越多越好，而是一致性越高越好。",[31,100,102],{"id":101},"一定要在真实组件里测试而不是只看色块","一定要在真实组件里测试，而不是只看色块",[15,104,105],{},"颜色单独看没问题，不代表放进产品里也没问题。真正应该测试的是：",[42,107,108,111,114,117,120],{},[45,109,110],{},"带文字的主按钮",[45,112,113],{},"带占位符的输入框",[45,115,116],{},"表单下方的错误提示",[45,118,119],{},"被选中的标签页",[45,121,122],{},"禁用状态的操作按钮",[15,124,125],{},"很多可访问性问题都出在“组合”上，而不是单个颜色本身。例如浅灰文字放在纯白背景上还勉强可读，放进浅色卡片或搭配细边框后，就会明显发虚。",[31,127,129],{"id":128},"调色时尽量用-hsl-或成体系的色阶","调色时尽量用 HSL 或成体系的色阶",[15,131,132],{},"如果团队只是在多个随机 HEX 值之间来回试，后续维护会非常困难。更实用的方式，是按色相、饱和度、明度来有意识地调整。",[15,134,135],{},"这样你就更容易回答这些实际问题：",[42,137,138,141,144],{},[45,139,140],{},"这个警告色应该更深一点，还是更低饱和一些？",[45,142,143],{},"边框是不是和卡片背景太接近了？",[45,145,146],{},"hover 状态需要明显加深，还是只要轻微变化就够？",[15,148,149,151],{},[25,150,28],{"href":27}," 在这一步很方便，因为它支持在 HEX、RGB、HSL 之间快速切换，也能顺手看配色关系和深浅变化。",[31,153,154],{"id":154},"最常见的无障碍配色错误",[15,156,157],{},"下面这些问题在产品里反复出现：",[42,159,160,163,166,169,172],{},[45,161,162],{},"为了“现代感”把正文做得太灰",[45,164,165],{},"只靠颜色表达错误或成功状态",[45,167,168],{},"红绿搭配对色觉缺陷用户不友好",[45,170,171],{},"焦点边框太弱，键盘导航时几乎看不见",[45,173,174],{},"把文字放到渐变或染色背景上，却没有重新检查对比度",[15,176,177],{},"一个很实用的原则是：只要这个状态重要，就不要只靠颜色。可以同时结合字重、图标、标签或形状变化。",[31,179,181],{"id":180},"把配色写成可复用规则工程实现才不会跑偏","把配色写成可复用规则，工程实现才不会跑偏",[15,183,184,185,189],{},"很多配色在设计稿里是对的，真正上线后却失真，原因往往不是设计不好，而是 token 没有被清楚记录。建议把每个颜色的用途和限制写明白。如果团队会把设计 token 放进配置文件或交接文档里，也可以顺手用 ",[25,186,188],{"href":187},"/dev/json-formatter","Anything Tools JSON Formatter"," 整理颜色对象，减少工程接入时的误读。",[15,191,192],{},"一份实用的颜色文档通常至少包括：",[42,194,195,198,201,204,207],{},[45,196,197],{},"token 名称",[45,199,200],{},"精确色值",[45,202,203],{},"适用背景",[45,205,206],{},"可用于文字还是只适合装饰",[45,208,209],{},"hover 与 active 变体",[31,211,212],{"id":212},"一个足够轻量的浏览器工作流",[15,214,215],{},"对大多数团队来说，下面这套流程就够用了：",[217,218,219,222,225,228,231],"ol",{},[45,220,221],{},"先确定品牌色或起始界面色。",[45,223,224],{},"生成相邻色阶和协调配色。",[45,226,227],{},"在真实按钮、卡片、输入框中测试。",[45,229,230],{},"去掉对比度太弱的组合。",[45,232,233],{},"把最终 token 整理成可复用格式。",[15,235,236],{},"这样做比每个页面单独调色更快，也更容易随着产品规模增长继续维护。",[31,238,239],{"id":239},"结论",[15,241,242],{},"无障碍 UI 配色的目标，是让用户更轻松地读懂界面、完成判断和操作。也就是说，文字要清楚，状态要明显，重点要稳定可见。",[15,244,245,246,248],{},"把颜色当成界面结构，而不是装饰层，会让产品质量更稳。如果你想快速开始建立这套结构，可以先用 ",[25,247,28],{"href":27}," 搭出候选配色，再放进真实组件里验证。",{"title":250,"searchDepth":251,"depth":251,"links":252},"",2,[253,254,255,256,257,258,259,260],{"id":33,"depth":251,"text":34},{"id":62,"depth":251,"text":63},{"id":101,"depth":251,"text":102},{"id":128,"depth":251,"text":129},{"id":154,"depth":251,"text":154},{"id":180,"depth":251,"text":181},{"id":212,"depth":251,"text":212},{"id":239,"depth":251,"text":239},"设计","2026-03-29T00:00:00.000Z","一份实用指南，教你如何用更好的对比度、状态区分和浏览器工作流选择更易读的 UI 配色。","md",false,"/blog/how-to-pick-accessible-ui-colors.png",{},true,"/blog/zh-cn/how-to-pick-accessible-ui-colors",8,{"title":5,"description":263},"blog/zh-CN/how-to-pick-accessible-ui-colors",[274,275,276,277,278],"无障碍设计","颜色选择器","UI 设计","WCAG","设计系统",[27,280],"/design/color-converter","Al5nZ4-CSTM60NFgX9aWWKlgYASXyBLD4WwJh0gS9T4",[],1781687095681]