
按钮颜色鲜艳,不代表上面的字一定看得清。双人区域中蓝、红、绿有明确含义,但文字、边框、选中态和背景需要一起检查。《拼棋派对》保留了既有深色玩法配色,同时处理系统主题变化和部分棋盘的深浅显示。
本篇以当前1.0.19的样式函数为依据,讨论怎样检查真实背景上的对比度。图示包含此前主题适配证据,不把历史截图当作本轮所有页面都已完成深浅主题验收。
本文目录
系统主题与产品配色的边界
EntryAbility从Configuration读取colorMode,并将isDarkMode写到AppStorage。配置更新时继续同步;系统栏内容色也按主题设置。页面可以据此调整需要切换的局部样式。
但主页面的pageBg、panelBg、textPrimary当前返回固定深色主题色。不能看到isDarkMode字段就宣称所有面板会自动变成浅色。系统主题感知与每个组件采用主题色,是两件独立的事。
typescript
private pageBg(): string { return '#05070B'; }
private panelBg(): string { return '#F00D1624'; }
private textPrimary(): string { return '#F4F8FF'; }
private textMuted(): string { return '#CBD6E8'; }
固定深色游戏区本身可以是设计选择,前提是页面内部颜色成套使用。若只把文字切到深色而保留深色面板,系统浅色模式下反而会难读。主题切换应以实际背景为依据。
明确文字、面板和状态色
项目用辅助函数集中定义面板、次级文字、边框和选中颜色,页面Builder再调用。这比各个Text依赖系统默认字体色更可控。按钮也应同时设置背景与文字,而不是只指定鲜艳背景。
绿色#92F536主要操作按钮采用深色文字#081018;蓝色和红色用于双方身份时,同样要检查字与底的组合。绿色边框和绿色填充不是同一对比条件,不能共用一个"绿色通过"的结论。
| 元素 | 应检查的组合 |
|---|---|
| 普通正文、按钮标签 | 文字与实际合成背景 |
| 选中边框 | 边框与外侧、内侧背景 |
| 空棋格与可走点 | 标记与棋盘背景 |
| 禁用按钮 | 文字、边界和背景的可读性 |
| 成绩与错误提示 | 数值、图标、颜色及语义 |
样式集中也有边界:单个函数正确,不保证每个调用点都放在合适的背景上。应结合具体页面检查。
计算实际背景上的对比度
普通文字至少4.5:1,大号文字、图标、边框和关键状态至少3:1。相对亮度需要先将sRGB转换为线性值,再按通道权重相加,最后比较较亮与较暗值。
typescript
const ratio = (Math.max(luminanceA, luminanceB) + 0.05) /
(Math.min(luminanceA, luminanceB) + 0.05);
这是计算公式,不是直接把十六进制RGB平均。项目的历史检查脚本对多组实色组合计算过比值,但半透明面板和图片背景仍要另外处理。
panelBg中的#F0是透明度。它会与后面的画面合成,不能把面板RGB当作永远不变的最终颜色。自定义图片有亮区和暗区,最差位置才决定文字是否可读。必要时增加足够不透明的文字承载面板,而不是靠描边勉强辨认。
禁用态和自定义背景
成语已经消除的格子、诗词排除的选项、不可撤销按钮都属于状态设计。禁用不等于消失,也不等于把文字变得与背景接近。可以保留明确标签,同时用不响应点击、边界和辅助提示表达限制。
错误不能只用红色,成功不能只用绿色。找茬增加命中符号与文字说明,诗词有具体反馈,棋类有轮次和将军提示。这些信息帮助用户理解发生了什么,也让截图和测试可以核对状态。
PC默认和最大化窗口的正文、标签、控件文字不得低于项目10fp下限。手机和平板还需检查截断、重叠与触摸区域。为了适配短窗口把所有字无限缩小,会用一个问题掩盖另一个问题。
效果与检查方法
下面展示此前平板象棋在系统浅色环境的初始状态,以及后续适配阶段的选中状态,观察文字、棋盘和选中标记的配色。两张图属于不同取证轮次,不是一次实时主题切换;系统浅色时,游戏区仍可采用固定深色配色。

实际检查可以先固定一个页面状态,再切主题,避免不同题目或不同选中态干扰比较。然后补禁用、选中、错误和完成状态,最后检查自定义背景最亮与最暗区域。
本轮没有重新切换全部页面主题,也没有为所有图片背景计算最差比值。当前文章给出源码分析与历史方法,不把少数配色检查扩展成全应用对比度合规结论。
把颜色集中只是起点。让每个状态在真实背景上可读,才能同时服务桌面窗口、手机触摸和文章演示。下一篇继续检查状态保存,避免漂亮页面重启后丢失成绩。
源码入口:EntryAbility.ets 的主题同步,Index.ets 的 textPrimary、textMuted、selectedControlBg 与 selectedControlText。参考HarmonyOS官方文档。