CSS - background foreground contrast text color

Question

I have a bar column which is colored by percentage value.

Part of the text is not visible to the user since it is white and falls in the white section. If i select it i can see it but not otherwise-

Is there way in css to show the text in contrast to the background color? Maybe half the text is in white and half the text is in black, so it would be visible to the user.

Answer 1

I would do something like this:

.progressbarContainer
{
    position: relative;
    width: 100px;
    height: 15px;
    background: #ff00ff;
}
.backText
{
    position: absolute;
    left: 0;
    color: black;
}
.frontText
{
    position: absolute;
    left: 0;
    color: red;
}
.progressbar
{
    position: absolute;
    width: 14.34%;
    height: 100%;
    background: blue;
    overflow: hidden;
}

<div class="progressbarContainer">
    <div class="backText">
        14.34%
    </div>
    <div class="progressbar">
    <div class="frontText">
        14.34%
    </div>
    </div>

</div>

JSFiddle