I’m working on a site for a client that has some very light decorative text in the background. Can’t share the original but I recreated it below.
Google lighthouse is showing me an error of insufficient contrast ratio for this text.
This text is purely decorative and isn’t adding any value and doesn’t hold any important information.
So my question is, is there a way to set this text as decorative like it is possible with images? Or any other workaround to avoid this error and bad lighthouse rating? Thank you!
Convert it to an image and use it as a background is an option.
It is an option but I have tons of these on the main site so it would unnecessarily increase loading speed and increase number of requests. It’s also not the most practical thing if the client wants to change the text later on.
There are no other options then.
Some updates, I found two solutions:
First option is to give the element negative z index if you can.
Second one is to set background color, gradient or overlay and clip it to text instead of using text color.
It won’t work perfectly on every element, I had 5 instances of this text on one page with negative z index and 3 of them still got marked with insufficient contrast ratio. Then I also applied the text clipping and it worked, so you can try a combination of these solutions.