Skip to main content
Andrea Verlicchi

Making the web faster and more sustainable

Changing text color for contrast based on background lightness

If you had to change the color of some fixed-positioned text based on the lightness of its scrolling background, how would you do that? CSS filters, blend modes? But what if you had to support all browsers, including Internet Explorer? Here are a couple of ways to do that using CSS clip and clip-path.

Here's the result using clip - wide browser support

And here's the result using clip-path - modern browsers only

What happens here that the content is:

Being the content in position fixed, the content sticks to our browser window, but is't clipped by the moving clipping elements.

This solutions has 2 problems, though:

Can you think of a better solution? If you do, please add it to the comments!