# 开启“高对比度文字”时应用文字显示模糊

#### 问题现象

开启“高对比度文字”时应用文字显示模糊。

图一：未开启“高对比度文字”。

图二：开启“高对比度文字”。

#### 背景知识

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

#### 问题定位

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%');
      }
    }
    ```
    

#### 分析结论

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%');
  }
}
```

效果图如下：