# 开启“高对比度文字”时文字显示异常如何解决

#### 问题现象

*   场景一：开启“高对比度文字”时应用文字显示模糊。
    
    图一：未开启“高对比度文字”。
    
    图二：开启“高对比度文字”。
    
*   场景二：使用Text组件和MutableStyledString设置描边文字大标题（白字黑描边+黄色底）时，预览效果与实际效果不同，异常文本出现外黑内白的现象。

#### 背景知识

*   TextInput组件为单行文本输入框组件。其placeholderColor属性可设置placeholder文本颜色。
*   设备依据字体的三原色来判断应用是希望字体为浅色还是深色，从而在高对比度模式下将字体作为外黑内白（或是外白内黑）来增加对比度效果。三原色之和大于594（#C6C6C6），才会显示为外黑内白，否则为外白内黑。
*   Text组件和MutableStyledString用于设置富文本和描边文字样式，开启“高对比度文字”后系统会自动调整文字显示效果。

#### 问题定位

#### 场景一

1.  使用DevEco Testing查看问题组件，该组件为TextInput组件。
    
2.  查看该TextInput组件的设置，placeholder文本颜色设置为#d6d6d6，三原色之和大于594，开启“高对比度文字”时显示为外黑内白。且组件背景色设置为#f1f3f5灰色，导致文字颜色与背景色相近，显示模糊。
    
    ```
    @Entry
    @Component
    struct Index {
      build() {
        Column() {
          TextInput({ placeholder: '请输入搜索内容' })
            .fontSize(14)
            .placeholderColor('#d6d6d6') // 三原色之和大于594
            .fontWeight(FontWeight.Bold)
            .backgroundColor('#f1f3f5') // 组件背景色较浅
            .placeholderFont({
              size: 14,
              weight: 400
            })
            .caretColor('#000000')
            .height(40)
            .enableKeyboardOnFocus(true)
            .width('80%')
            .margin({ top: 20 });
        }
        .height('100%')
        .width('100%');
      }
    }
    ```
    

#### 场景二

1.  检查设备设置，进入设置>关怀和无障碍，发现“高对比度文字”开关处于开启状态。
2.  开启“高对比度文字”后，系统会将白色描边文字自动转换为外黑内白效果以增加对比度，导致预览效果（白字黑描边+黄色底）与实际效果不一致。
3.  关闭“高对比度文字”设置后，文字恢复正常的白字黑描边+黄色底显示效果。

#### 分析结论

*   场景一：placeholder文本颜色设置为#d6d6d6，三原色之和大于594，开启“高对比度文字”时显示为外黑内白，导致文字颜色与背景色相近，显示模糊。
*   场景二：设备开启了“高对比度文字”设置，系统自动将浅色文字转换为外黑内白效果以增加对比度，导致描边文字的预览效果与实际显示效果不一致。

#### 修改建议

#### 场景一：合理设置文字颜色

组件背景色较浅时文字三原色之和小于等于594，组件背景色较深时文字三原色之和大于594。

```
@Entry
@Component
struct TextinputExample {
  build() {
    Column() {
      TextInput({ placeholder: '请输入搜索内容' })
        .fontSize(14)
        .placeholderColor('#c5c5c5') // 三原色之和小于等于594
        .fontWeight(FontWeight.Bold)
        .backgroundColor('#f1f3f5') // 组件背景色较浅
        .placeholderFont({
          size: 14,
          weight: 400
        })
        .caretColor('#000000')
        .height(40)
        .enableKeyboardOnFocus(true)
        .width('80%')
        .margin({ top: 20 });
    }
    .height('100%')
    .width('100%');
  }
}
```

效果图如下：

#### 场景二：关闭高对比度文字设置

进入设备设置>关怀和无障碍，关闭“高对比度文字”开关，描边文字即可恢复正常显示效果。