Автоконтрастный цвет шрифта к фону

Question

У меня есть фон поля. Дно зеленое, верх серый. В верхней части фона есть текст. Есть ли способ, чтобы текст "почувствовал", какого цвета фон, и подкрасил шрифт, чтобы сделать его контрастным?

Например, текст над серым небом станет ярче, а текст над зеленым полем станет темнее, чтобы сделать его более заметным.

Возможно, я дошел до этого довольно далеко, но любые предложения приветствуются. (Обратите внимание, я не ищу ответ, чтобы вручную изменить цвета шрифта.)

Answer 1

Больше как эксперимент, чем иначе:

Установить текст с наследованием фона, чтобы получить фон базы; затем прикрепите его к тексту и примените к нему несколько фильтров:

.test {
    width: 800x;
    height:220px;
    font-size: 200px;
    background-image: url(bosque.jpg); 
    color: white;
    position: relative;
}

.inner {
    position: relative;
    background-image: inherit;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-filter: invert() sepia();
}

играть на скрипке

(Работает только в webkit)

Проверьте также это:

оживленное безумие

контрастная анимация

ОБНОВЛЕНИЕ: у нас есть новые способы справиться с этим. Посмотрите демо, используя mix-blend-mode: разность

div {
  font-size: 300px;
  color: gray;
  mix-blend-mode: difference;
}
body {
  background-image: url(http://placekitten.com/900/600);
}

<div>TEST</div>