Цветной контраст JavaScript

Я ищу технику, в которой мы могли бы программно выбрать лучший цветовой контраст для применения к тексту через HTML-элементы разных (непредсказуемых) цветов фона.

Поскольку элементы HTML будут иметь разные цвета, мы ищем технику, которая сможет определить, каков цвет содержимого, лежащего за текстом, а затем адаптировать цвет текста, чтобы использовать тот, который имеет лучший контраст.

Я уверен, что это не может быть только CSS, я искал решения JQuery, но не смог найти никого... у кого есть ключ?

[ОБНОВЛЕНИЕ]: Основываясь на первых ответах, я думаю, мне нужно перефразировать. Представьте, что я создаю службу обмена изображениями, и я хочу, чтобы люди могли пометить сами фотографии. Изображения могут быть любого цвета. Как я могу подобрать правильный цвет тегов для каждого другого изображения?

Ответ 1

Я думаю, что это может спасти любых будущих исследователей немного времени, это отлично работает для меня. Подключите красные зеленые и синие значения к функции и выведет "темный текст" или "светлый текст".

var darkOrLight = function(red, green, blue) {
  var brightness;
  brightness = (red * 299) + (green * 587) + (blue * 114);
  brightness = brightness / 255000;

  // values range from 0 to 1
  // anything greater than 0.5 should be bright enough for dark text
  if (brightness >= 0.5) {
    return "dark-text";
  } else {
    return "light-text";
  }
}

Используя некоторый код из http://particletree.com/notebook/calculating-color-contrast-for-legible-text/ из ответа @David.

Ответ 2

Посмотрите http://www.0to255.com. Только мгновенный взгляд на градиенты, представленные на сайте, зажгут вас. Вам придется загадывать, но только около 20 секунд. Это отличный сайт для таких проблем и потрясающий источник идей для программных решений. И там нет математики: просто подключите несколько байтов для rgb vals и идите.

Ответ 3

Это мой ресурс fav для вычислить "читаемость" (контрастность) двух цветов.

W3C предлагает коэффициент контрастности не менее 5: 1 между текстом и фоном за текстом http://www.w3.org/TR/2007/WD-WCAG20-TECHS-20070517/Overview.html#G18

На странице:

Показатель соответствия, показанный выше, соответствует наивысшей норме соответствия. Уровень уровня WCAG 2.0 и предлагаемый уровень соответствия требованиям 508 уровня основывается на достижении коэффициента контрастности 3: 1 для текста с размером 18 пунктов (14 точек, если выделено полужирным шрифтом) или больше или 4,5: 1 для текста с размером меньше, чем 18 очков. Уровень соответствия уровня AAA уровня 2.0 WCAG встречается, когда достигается контрастность 7: 1 для текста менее 18 пунктов и 4,5: 1 для текста 18 точек (14 точек, если выделено жирным шрифтом) или больше.

Ответ 4

В CSS теперь есть свойство, называемое mix-blend-mode (в настоящее время только в черновике), которое можно использовать для достижения чего-то похожего на то, что вы хотите.

.contrasting-text {
    mix-blend-mode: difference;
}

CodePen собрал кого-то, демонстрируя это: https://codepen.io/thebabydino/pen/JNWqLL

Ответ 5

В одной строке это решает проблему:

function getContrast50($hexcolor)
{ 
  return (hexdec($hexcolor) > 0xffffff/2) ? 'white':'black'; 
}

Если контрастность нужно обратить вспять, то просто белый с черным, и это трюк. В php.