It was recently pointed out to me that Googlebot may try and filter out content that seems to be cheating the system.

For example, something like white text on a white background. In that scenario viewers would not be able to see the text, but crawlers might.

It appears Google does try and filter out that sort of dishonest content, which seems like the correct choice since that sort of content is purely to cheat SEO and not for the sake of users.

I noticed that this behavior gets a little interesting when used with a linear-gradient. See below for some observations and conclusions I drew.

High Contrast - No Problem

background: #000;
color: #fff;

A black background with white text renders fine and Googlebot renders it without issue.

As Viewed By Humans

high contrast web rendering example
high contrast web rendering example

As Viewed By Googlebot

high contrast web rendering example as viewed by google
high contrast web rendering example as viewed by google

No Contrast - Googlebot Ignored

background: #fff;
color: #fff;

A white background with white text is not rendered by Googlebot. Note that a human would see an empty gap where the invisible content is occupying space in the DOM. Googlebot, alternatively, does not render the content at all.

As Viewed By Humans

no contrast web rendering example
no contrast web rendering example

As Viewed By Googlebot

no contrast web rendering example as viewed by google
no contrast web rendering example as viewed by google

Gradient - Googlebot Ignored

background: linear-gradient(to right, #000, #111);
color: #fff;

A gradient background, even if it results in a high contrast result, is ignored by Googlebot. It seems Googlebot does not like the idea of a linear-gradient at all in this case, because it treats this very dark background the same as it did for white text on a white background.

As Viewed By Humans

high contrast gradient web rendering example
high contrast gradient web rendering example

As Viewed By Googlebot

high contrast gradient web rendering example as viewed by google
high contrast gradient web rendering example as viewed by google

Gradient With Fallback - Works Great

background: #000 linear-gradient(to right, #000, #111);
color: #fff;

Unlike the gradient background above, here we define a fallback of #000, and now Googlebot renders the content without issue. It would appear that Googlebot will accept a valid gradient as long as there is a solid fallback color.

Note, I tried using a #fff background and the content did not render

I would conclude that Googlebot is completely ignoring the linear-gradient. My linear-gradient example with no fallback fails because Googlebot defaults to a white background in that case, and the white text fails to render.

With the dark fallback background, Googlebot will render the content.

As Viewed By Humans

high contrast gradient with solid fallback web rendering example
high contrast gradient with solid fallback web rendering example

As Viewed By Googlebot

high contrast gradient with solid fallback web rendering example as viewed by google
high contrast gradient with solid fallback web rendering example as viewed by google