CSS colour visibility issue

Question

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

enter image description here

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?

Why do you need HTML for this? I've clearly outlined the problem in the image... — Barney, Feb 20 '13 at 12:24
maybe this helps: [http://stackoverflow.com/questions/2541481/get-average-color-of-image-via-javascript][1] [1]: http://stackoverflow.com/questions/2541481/get-average-color-of-image-via-javascript — andsoa, Feb 20 '13 at 12:27
if we can see the HTML we'll know what elements are available for styling. — dnagirl, Feb 20 '13 at 12:31
Why don't you just use Javascript and apply different styles. — Jacob, Feb 20 '13 at 12:31
Why do you need HTML for this? -- Its a convenient way to try to gain upvoted without actually offering nay help — DavidB, Feb 20 '13 at 12:32

tobspr · Answer 1 · 2013-02-20T12:28:46.590

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)

edited Feb 20 '13 at 12:28

answered Feb 20 '13 at 12:23

tobspr

8,200
5
33
46

This is a nice method, but the pagination doesn't isn't quite visible enough on darker images unfortunately. – Barney Feb 20 '13 at 12:27
What if the background is at the same color tone as the opacity? You still lose visibility of pagination. – otinanai Feb 20 '13 at 13:05
Then you could give the font a light background (background-color: rgba(0,0,0,0.2) for example). – tobspr Feb 20 '13 at 13:13
Our use text-shadow, as described above – tobspr Feb 20 '13 at 13:14
That's not a proper solution if images are loaded dynamically and you can't test case for every image that is about to load. – otinanai Feb 20 '13 at 13:29

insertusernamehere · Answer 2 · 2013-02-20T12:40:43.207

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.

score 1 · Accepted Answer · answered Feb 20 '13 at 13:00

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/

answered Feb 20 '13 at 13:00

otinanai

3,987
3
25
43

This is actually what I ended up doing :) – Barney Feb 20 '13 at 16:55

score 0 · Answer 4 · edited Feb 20 '13 at 12:50

0

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

edited Feb 20 '13 at 12:50

insertusernamehere

23,204
9
87
126

answered Feb 20 '13 at 12:44

Seetpal singh

3,505
1
15
12

CSS colour visibility issue

4 Answers4