在反应本机中测试文本对比度

Question

不太确定，应该开个玩笑。 但是如何确保在屏幕上找到的文本是可见的呢？ 例如，有我的短文件： (设置文字颜色与bg相同，但通过)

以文本格式发送给您，如果您需要 copy/paste

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 >)
})

Answer 1

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

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