Change text color based on the background color

Question

Is it possible to dynamically change the text color based on the background color using CSS, or JS if it's not possible with CSS? I have a image that comes under the text. My text color is white, but the image has a white shape on. And when text goes above the white shape, I need to change the text color in a darker color.

HTML:

<div class="biography">
            <img src="http://s16.postimg.org/c09zw94jp/author_photo.png" alt="author" class="bio-img">
            <div class="biography-text">
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit <br>
                    Vestibulum pellentesque auctor quam a sollicitudin.<br>
                    Pellentesque accumsan a sem eget dictum.
                </p>
                <p>
                    Morbi dictum lorem tortor, id consequat libero gravida ut.<br>
Nullam dictum sed massa et bibendum.
                </p>
                <p>Praesent sed dui mattis, dictum urna sit amet, imperdiet purus.</p>
                <p> Suspendisse potenti.</p>
            </div>
        </div>

CSS:

body {
  background-color: #7ccbe6;
}
.biography {
    min-height: 410px;
}
.biography .biography-text {
    position: relative;
    margin-top: -420px;
    padding: 82px 130px 0 380px;
    z-index: 1;
}

.biography-text {
    color: #fff;
}

Here's a Codepen to see the better picture.

Answer 1

For this kind of problem I'd use a pure CSS solution to outline the text...

.biography-text {
    color: #fff;
    font-weight: bold;
    letter-spacing: 2px;
    text-shadow: 1px 1px 0 #333,
        -1px -1px 0 #333,
        1px -1px 0 #333,
        -1px 1px 0 #333,
        2px 2px 5px rgba(0,0,0,0.65);
}

Change the letter-spacing and the final directive of the text-shadow property according to your needs.