我来修正下
已在 app/assets/index.css:8 修正颜色令牌:
- --brand: #167a39
- --brand-hover: #126b33
- --danger: #c43131
- --text-subtle: #6b6b6b
- --info: #0965ad
已核算这些颜色对白底、页面底及各 soft 背景的文字对比度,最低为 4.83:1,满足 WCAG AA 正常文本的 4.5:1 要求
收到, 全部停手,不做任何改动
当前状态(可以放心让官方补丁落地)官方这套值我粗算了一遍
令牌 官方值 白底对比度(粗算) --brand#167a39约 5.4:1 ✓ --brand-hover#126b33约 6.6:1 ✓ --danger#c43131约 5.5:1 ✓ --text-subtle#6b6b6b约 5.3:1 ✓ --info#0965ad约 6.0:1 ✓ 全部过 4.5:1,方向没问题(等你说继续,我用脚本出精确值)。
但有一个缺口,建议一并反馈官方
官方清单里没有
--focus-ring。核心现在仍然是:--focus-ring: rgba(46,204,113,.3); /* 按「旧」品牌绿 #2ecc71 的 rgb 算出来的 */品牌换成
#167a39之后会有两个问题:- 色不一致——焦点环还是旧的浅绿,与新的品牌绿对不上(该值本质上派生自品牌 rgb);
- 不达标——30% 透明度合成到白底约为
#c0f0d4,对比度约 1.27:1,远低于 WCAG 2.2 SC 1.4.11 对非文本焦点指示要求的 3:1。顺带一提,旧的rgba(46,204,113,.3)本来就不达标,这次正好一起改。
建议官方把它改成基于新品牌 rgb 的值,例如
rgba(22,122,57,.75)(与我之前那版思路一致,只是 rgb 换成官方的)。最后由 one 编辑于 2026-09-26 14:19🎉
--brand 修改为 #07c160 微信标准。低于 WCAG AA 正常文字所需的 4.5:1。它适合用作品牌色、图标或配深色文字
将焦点环调整为 WCAG AA 焦点指示标准:
- 浅色界面:--focus-ring: #126b33,对白底 6.61:1、页面底 6.01:1
- 色系插件暗色模式:#34D984,对暗色页面底 10.17:1、面板底 9.33:1
--brand 同步为 GitHub 绿 #1F883D - --brand-hover: #1A7F37
该颜色对白底为 4.52:1,符合 AA给官方的建议:
--focus-ring的调整还有三处需要确认本轮按 WCAG 2.2 SC 1.4.11(非文本对比度 ≥3:1)调整焦点环,方向没问题。但核对
app/assets/index.css后发现,这个令牌在核心里有 5 处消费,其中 4 处不是"焦点环",因此建议再确认以下三点。一、
--focus-ring同时承担"焦点环"与"柔光晕"两种语义位置 用法 实际相邻色 index.css:2138outline: 2px solid var(--focus-ring); outline-offset: 2px页面底色(好评) index.css:284.search-page-link:hover { box-shadow: 0 0 0 3px var(--focus-ring) }hover 态,并非焦点 index.css:1301.prompt-input:focus同上元素自身边框 index.css:1557.search-page-query:focus-within同上元素自身边框 index.css:2228input[type=checkbox]:focus-visible同上元素自身边框 问题 (a):
box-shadow: 0 0 0 3px是 0 偏移、0 模糊,光晕紧贴元素自身的 border box;而这 4 处元素同时设了border-color: var(--brand)。不透明的#126b33与--brand: #167a39对比度仅约 1.22:1,两者会糊成"一圈更粗的绿边框",光晕层次消失。官方给出的 6.61:1 是"环 vs 白底",未覆盖"环 vs 元素自身品牌色边框"这一相邻关系。问题 (b):半透明在这 4 处是有意为之的柔光晕;改为不透明 hex 后,hover 态(
index.css:284)会出现生硬的实心粗环。建议 A(保留单令牌):维持 alpha 形式,用新品牌 rgb 把不透明度提到刚好过 3:1——
rgba(22,122,57,.75)→ 白底 ≈ 3.36:1、页面底#f4f4f4≈ 3.18:1- 留余量用
.8→ ≈ 3.67:1 / ≈ 3.47:1
建议 B(拆语义,更彻底):拆成两个令牌——
--focus-ring(不透明,仅供outline焦点环)与--focus-halo(半透明,供 4 处box-shadow光晕)。二、暗色值建议"按调色板派生",不要写死
#34D984核心没有内建深色模式,暗色界面由 theme_plus 提供,而它有 8 套调色板(glacier 蓝
#5b9bff、indigo 靛#8b93ff、pine 青#35c7a4、amber 琥珀#e8a93f、clay 陶#e87752、rose 玫#f0779f、graphite#79aede、stone#7dbfa3)。写死单一绿色,在上述非绿色调色板的暗色模式下会与品牌色撞色。另需注意 theme_plus 目前是派生写法:
theme_plus/plugin.php:565 '--focus-ring' => 'rgba(var(--theme-plus-brand-rgb),.34)'.34的不透明度在暗底上达不到 3:1,这行本来就需要改。建议:暗色改为按调色板派生(各调色板暗色品牌值本身已足够亮),并把不透明度提到能过 3:1,而不是全站写死
#34D984。三、相邻背景只覆盖了两种
官方只给了"白底 / 页面底"。浅色模式里还有深色面:
--inverse: #0f172a(index.css:1319的.toast、index.css:1432一处!important深色条)。不透明的#126b33在其上仅约 2.70:1,不达 3:1。若有可聚焦控件落在深色面上仍不达标,建议一并给一个深色面用的取值。四、附带:插件侧其实不需要导出
showToast排查"插件能否在不改核心的前提下使用主题化提示"时发现,
showToast的实现只是操作页面里已有的全局节点:app/assets/index.js:1-9—— 取document.getElementById('toast')、设textContent、取消hidden、1.8 秒后隐藏index.php:2075——<div class="toast" id="toast" hidden></div>由核心全局渲染index.css:1310——.toast样式
所以插件直接驱动这个既有节点即可获得与核心完全一致的主题化提示,零核心改动、零重复样式。若官方认同,建议在插件开发文档里写明这一用法,就不必为插件新增
window.showToast这类导出(同理,确认框可走核心原生的a[data-confirm]/form[data-confirm])。核对方式:以上对比度按 WCAG 2.x 相对亮度公式(sRGB 线性化)计算。已用官方给出的
#126b33vs 白底 = 6.61:1 反向校验过公式,与官方结果完全一致,故上述数值可直接采信。已拆分焦点令牌:
- --focus-ring: #126b33:仅用于 outline 焦点环
- --focus-halo: rgba(31,136,61,.28):用于四处 box-shadow 柔光晕
暗色模式同步使用 #34D984 作为焦点环、rgba(52,217,132,.25) 作为光晕,并处理了由暗色切回浅色时的变量回收。
已确认核心样式为 1 处 outline 使用 --focus-ring,4 处 box-shadow 使用 --focus-halo;PHP 语法与差异检查通过。