如何为watchOS Widget View正确定义强调色适配方案？

问题情况 #

在watchOS中，你自定义的带图标和“16h 18'”文本的View，在多数强调色配置下显示正常，但切换到特定强调色时，文本与背景的颜色对比度过低，导致内容难以辨认。你的需求是实现白色背景时显示黑色文字，深色背景时显示白色文字的自适应效果。

当前使用的View代码：

var body: some View {
    HStack() {
        HStack(alignment: .center, spacing: 5) {
            Image.briefcase
                .renderingMode(.template)
                .resizable()
                .scaledToFit()
                .foregroundColor(color.inversed)
                .frame(width: 22, height: 22)
            Text("16h 18'")
                .font(.openSansLight(withSize: 17))
                .multilineTextAlignment(.center)
                .foregroundColor(color.inversed)
                .fixedSize()
        }
        .padding(.leading, 5)
        .padding(.trailing, 5)
        .padding(.top, 1)
        .padding(.bottom, 1)
    }
    .frame(height: 26)
    .background(color)
    .cornerRadius(13)
}

问题根源 #

你使用的color.inversed方法生成的反转色，在部分系统强调色下无法保证足够的文本与背景对比度，导致显示异常。

解决步骤 #

1. 添加Color扩展实现动态对比色 #

给Color添加一个扩展，通过判断背景色的亮度值，自动返回对比度充足的文本颜色：

extension Color {
    /// 根据背景色亮度返回高对比度文本色：亮色背景用黑色，暗色背景用白色
    var contrastTextColor: Color {
        let uiColor = UIColor(self)
        var brightness: CGFloat = 0
        // 获取颜色的亮度值（范围0-1，0为纯黑，1为纯白）
        uiColor.getWhite(&brightness, alpha: nil)
        return brightness > 0.5 ? .black : .white
    }
}

2. 修改View代码中的前景色设置 #

将原代码中所有的.foregroundColor(color.inversed)替换为.foregroundColor(color.contrastTextColor)，修改后的代码如下：

var body: some View {
    HStack() {
        HStack(alignment: .center, spacing: 5) {
            Image.briefcase
                .renderingMode(.template)
                .resizable()
                .scaledToFit()
                .foregroundColor(color.contrastTextColor)
                .frame(width: 22, height: 22)
            Text("16h 18'")
                .font(.openSansLight(withSize: 17))
                .multilineTextAlignment(.center)
                .foregroundColor(color.contrastTextColor)
                .fixedSize()
        }
        .padding(.leading, 5)
        .padding(.trailing, 5)
        .padding(.top, 1)
        .padding(.bottom, 1)
    }
    .frame(height: 26)
    .background(color)
    .cornerRadius(13)
}

效果说明 #

这个方案会根据背景色的亮度自动调整文本颜色：当背景色偏亮（比如白色）时，文本显示黑色；当背景色偏暗时，文本显示白色，确保在所有强调色配置下都有清晰的视觉对比，完全符合你的需求。

内容的提问来源于stack exchange，提问作者kunass2