在 react-native 中测试文本对比度答案

【问题标题】：Testing text contrast in react-native在 react-native 中测试文本对比度
【发布时间】：2020-08-31 04:00:23
【问题描述】：

其实不确定，应该是开玩笑的。但是如何确保在屏幕上找到的文本是可见的？有我的短文件，例如：（设置文字颜色和bg一样，但是通过了）

如果您想复制/粘贴，请以文本格式发送给您

export default () => (
  <SafeAreaView style={ style.container }>
    <Text style={ style.text }>loading..</Text>
  </SafeAreaView>
)

test('In Loading screen, there is "loading" visible label', () => {
  const { getByText } = render(
    <Loading />
  )

  getByText(/loading/) // exact 1 (not 0, not >)
})

【问题讨论】：

标签： react-native testing jestjs accessibility react-testing-library

【解决方案1】：

测试最有可能通过，因为从技术上讲，文本在页面上并且可以被工具检测到。但是由于背景颜色与前景（文本）颜色相同，因此人类不会在页面上看到它 - 颜色对比度将为 1:1，而对于大号或粗体文本和 UI，颜色对比度为 3:1 和常规文本为 4.5:1。

对于自动化测试，Jest-aXe 可能很方便，此外，它还与 React 测试库兼容。
对于对比度的手动测试，可以使用Colour Contrast Analyser 等工具。

【讨论】：