Accessibility error with transparent text before scrolling

Question

I have some text that is below the page fold that has its opacity set to 0.3 until the user scrolls it into view. Then it gets set to opacity 1.

When inspecting my site with Lighthouse on Google Chrome, I get this error under the accessibility section: Low-contrast text is difficult or impossible for many users to read. Is there a way to fix this?

Answer 1

foreword: I have assumed that you transition the opacity from 0.3 to 1 throughout this answer. If you aren't animating the opacity change just remove it entirely, it adds page weight, complexity and potential problems for no benefit.

Lighthouse

no there isn't a way to fix it and keep it the way it is.

A possible option would be to completely hide the text while it is off screen and then set the opacity to 0.3 the second it enters the viewport and fade it in then (assuming you fade it in, you didn't specify that you do but otherwise why would you bother changing the opacity at all?).

That could trick lighthouse into getting it right (possibly, due to how it decides when to look at the rest of the page content during testing it may still cause issues).

One other thing to check is if the item is also moving using transform or similar that it doesn't overlap another item during transition as that possibly lead to a colour contrast issue report.

At the end of the day that is a workaround to please a testing facility, so I wouldn't recommend it anyway but just a suggestion. As long as your are confident it is high enough contrast once faded in then it will be fine and you can ignore this error.

Accessibility

From an accessibility perspective just make sure that the animation does not play if the prefers-reduced-motion media query is active.

Also make sure that if this has any JavaScript triggers (i.e. it isn't pure CSS) that it would default to an opacity of 1 for when your JavaScript fails or for users who browse without JavaScript.

Testing

Lighthouse uses Axe under the hood, so fully load the page with the text fully "faded in" and then run the chrome extension I linked. If it passes then you should be fine (yet again, automated tests are never perfect).