我有一些文本位于页面折叠下方，其不透明度设置为 0.3，直到用户将其滚动到视图中。然后它被设置为不透明度 1。
在 Google Chrome 上使用 Lighthouse 检查我的网站时，我在可访问性部分下收到此错误：Low-contrast text is difficult or impossible for many users to read. 有没有办法解决这个问题？
【问题讨论】：
标签： accessibility lighthouse contrast
前言：我假设您在整个答案中将不透明度从 0.3 转换为 1。如果您没有为不透明度更改设置动画，只需将其完全删除，它会增加页面重量、复杂性和潜在问题，而无济于事。
不，没有办法修复它并保持原样。
可能选项是在文本离开屏幕时完全隐藏文本，然后在它进入视口的第二秒将不透明度设置为 0.3，然后将其淡入（假设您将其淡入，你没有指定你这样做，否则你为什么还要费心改变不透明度呢？）。
这可能会欺骗 lighthouse 使其正确（可能是由于它决定何时在测试期间查看页面的其余内容，这可能仍然会导致问题）。
要检查的另一件事是，该项目是否也在使用 transform 或类似方式移动，在 transition 期间它不会与另一个项目重叠，因为这可能会导致颜色对比问题报告。
归根结底，这是取悦测试机构的一种解决方法，所以无论如何我都不会推荐它，而只是一个建议。 只要您确信淡入后对比度足够高，就可以了，您可以忽略此错误。
从可访问性的角度来看，如果prefers-reduced-motion 媒体查询处于活动状态，请确保动画不会播放。
还要确保如果它有任何 JavaScript 触发器（即它不是纯 CSS），那么对于 当您的 JavaScript 失败或不使用 JavaScript 浏览的用户，它将默认为不透明度 1 .
Lighthouse 在后台使用Axe，因此完全加载带有完全“淡入”文本的页面，然后运行我链接的 chrome 扩展。如果它通过了，那么您应该没问题（再次强调，自动化测试永远不会完美）。
【讨论】：