CSS colour visibility issue

Question

This is going to seem like a very odd question, but I have the following problem:

As you can see, when the image is a darker colour, the pagination doesn't show clearly.

I want to change the pagination colour dependant on the image colour beneath.

Is this possible with rgb/css? Alternately with Javascript?

Answer 1

I suggest you make a different design approach rather than using JS. Try adding a border with light shade of grey that will work in every background. See this demo:

http://jsfiddle.net/fqZf4/3/

Answer 2

You could use a 50% rgba for example:

element {
color: rgba(255,255,255,0.5);
}

This will make the font white and set the opacity to 50%. You could get the same effect with:

element {
opacity: 0.5;
color: rgb(255,255,255);
}

Notice the first method is still not supported in all Browsers.

To prevent the pagination to hide on white background, you could use a text shadow:

element {
text-shadow: 0px 1px 3px #000;
}

(See here)

Answer 3

If you can store a value with the image you can use the data-*-attribute:

// images that are dark gets the new attribute
<img src="" alt="">
<img src="" alt="" data-invert="true">

// let's say this is you pagination
<nav id="pagination">
    // your pagination elements
</nav>

Than you can update your slide function (this is just pseudocode):

function slide() {
    // lets say you know the current image and there's an array of images
    var current = 1;
    if ('true' == images.eq(current).attr('data-invert') {
        $('pagination').addClass('invert');
    } else {
        $('pagination').removeClass('invert');
    }
}

And the class invert has simply a brighter color scheme that looks good on darker images.

Answer 4

Give grey text shadow to your text. It will work perfectly.