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

#### 问题现象

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

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

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/59/v3/w_RAwK5LTPaJ1rpmA1qnjQ/zh-cn_image_0000002628593590.png?HW-CC-KV=V1&HW-CC-Date=20260709T133938Z&HW-CC-Expire=86400&HW-CC-Sign=BB6DA3E747899D44C4DA48F69050EDFDCB4E1E49C6264F3867B2D00F593F7472 "点击放大")

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

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/9/v3/zS7bFAF4Sk6bWHfebxMnvg/zh-cn_image_0000002628753482.png?HW-CC-KV=V1&HW-CC-Date=20260709T133938Z&HW-CC-Expire=86400&HW-CC-Sign=A303A1D97F8C61ABC697F9CC76EC91990388FAF951977191749E5192F7A30968 "点击放大")

#### 背景知识

*   [TextInput](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-basic-components-textinput)组件为单行文本输入框组件。其[placeholderColor](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-basic-components-textinput#placeholdercolor)属性可设置placeholder文本颜色。
*   设备依据字体的三原色来判断应用是希望字体为浅色还是深色，从而在高对比度模式下将字体作为外黑内白（或是外白内黑）来增加对比度效果。三原色之和大于594（#C6C6C6），才会显示为外黑内白，否则为外白内黑。

#### 问题定位

1.  使用DevEco Testing查看问题组件，该组件为TextInput组件。
    
    ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/7a/v3/_x0qgjOqSOeN4xK86qHejw/zh-cn_image_0000002658952795.png?HW-CC-KV=V1&HW-CC-Date=20260709T133938Z&HW-CC-Expire=86400&HW-CC-Sign=7B8B0FB10588033EB828E93A73588714982F90227D47C31B441D46A5D39DE24E "点击放大")
    
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%');
  }
}

效果图如下：

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/c4/v3/ADIm6G_ERW2pAocOt__48A/zh-cn_image_0000002658832833.png?HW-CC-KV=V1&HW-CC-Date=20260709T133938Z&HW-CC-Expire=86400&HW-CC-Sign=5810A701C2DC27C57F613BCD8DDA5179B1EA5759C68430F1CF770D15A99D89D6 "点击放大")