我在页面折叠下方有一些文本，其不透明度设置为0.3，直到用户将其滚动到视图中。然后将其设置为不透明度1。
当我在谷歌Chrome浏览器上用Lighthouse检查我的网站时，我在可访问性部分看到了这个错误：Low-contrast text is difficult or impossible for many users to read.有办法解决这个问题吗？
前言：我假设您在整个答案中将不透明度从0.3转换为1。如果你不设置不透明度变化的动画，只需将其完全删除，它会增加页面的重量、复杂性和潜在的问题，而不会带来任何好处。
灯塔
不，没有办法修复并保持原样。
一个可能的选项是在文本离开屏幕时完全隐藏文本，然后在文本进入视口时将不透明度设置为0.3，然后将其淡入(假设您淡入，您没有指定要淡入，但否则为什么要麻烦更改不透明度？(。
这可能会诱使灯塔把它做好(可能是因为它在测试期间决定何时查看页面的其余内容，它仍然可能会引起问题(。
另一件需要检查的事情是，项目是否也在使用transform或类似的方式移动，以便在transition期间不会与另一个项目重叠，因为这可能会导致颜色对比度问题报告。
归根结底，这是一个让测试机构满意的变通方法，所以我无论如何都不会推荐它，只是一个建议只要你确信它在褪色后有足够高的对比度，那么它就会很好，你可以忽略这个错误
可访问性
从可访问性的角度来看，只要确保prefers-reduced-motion媒体查询处于活动状态，动画就不会播放。
还要确保，如果它有任何JavaScript触发器(即它不是纯CSS(，当您的JavaScript失败时，它将默认为的不透明度为1，或者对于不使用JavaScript浏览的用户。
测试
Lighthouse在引擎盖下使用Axe，因此完全加载带有文本的页面"；褪色"；然后运行我链接的chrome扩展。如果它通过了，那么应该很好(再说一遍，自动化测试从来都不是完美的(。