Changing text color for contrast based on background lightness

• 02 June 2017
• techniques,
• css

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:

• wrapped by a box with class clipper which clips its content
• copied inside every container :(
• positioned with position: fixed

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:

• there's a bug in IE and Edge which makes the content's block children invisible. It works with inline elements, though, but it's a hack
• we need to copy the content inside every container

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

• Previous: Responsive images, an HTML 5.1 standard
• Next: Using CSS variables as a spacing unit