Проблема с видимостью цвета CSS

Я предлагаю вам использовать другой подход к дизайну, а не использовать JS. Попробуйте добавить border со светлым оттенком серого, который будет работать на любом фоне. Посмотрите эту демонстрацию:

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

Например, вы можете использовать 50% rgba:

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

Это сделает шрифт белым и установит непрозрачность на 50%. Вы можете получить тот же эффект с помощью:

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

Обратите внимание, что первый метод по-прежнему поддерживается не во всех браузерах.

Чтобы нумерация страниц не скрывалась на белом фоне, вы можете использовать тень текста:

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

(См. здесь)

Если вы можете сохранить значение с изображением, вы можете использовать атрибут data-*:

// 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>

Затем вы можете обновить функцию слайда (это всего лишь псевдокод):

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');
    }
}

А класс invert имеет просто более яркую цветовую схему, которая хорошо смотрится на более темных изображениях.

Дайте тексту серую тень. Это будет работать отлично.