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

Question

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

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

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

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

Answer 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/ из @ ответа Дэвида.

Answer 2

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

Answer 3

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

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

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

Answer 4

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

W3C предлагает, чтобы между текстом и фоном за текстом существовало соотношение контрастности не менее 5:1 http://www.w3.org/TR/2007/WD-WCAG20-TECHS-20070517/Overview.html

Со страницы:

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

Answer 5

Вот еще один подход, который я получил от GitHub, где они применяются к цвету меток задачи. На самом деле он зависит от пользовательских свойств CSS с некоторыми вычислениями.

      .hx_IssueLabel {
    --label-r:0;
    --label-g:0;
    --label-b:0;

    --lightness-threshold:0.453;
    --perceived-lightness:calc(((var(--label-r) * 0.2126) + (var(--label-g) * 0.7152) + (var(--label-b) * 0.0722)) / 255);
    --lightness-switch:max(0, min(calc((var(--perceived-lightness) - var(--lightness-threshold)) * -1000), 1));

    background:rgb(var(--label-r), var(--label-g), var(--label-b));
    color:hsl(0, 0%, calc(var(--lightness-switch) * 100%));
}

Вам нужно будет установить канал RGB отдельно в пользовательских свойствах для цвета фона, тогда цвет текста изменится с черного на белый, изменив канал яркости в цвете HSL. Яркость рассчитывается алгоритмом, который получает RGB в качестве входных данных.

Answer 6

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

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

Если необходимо изменить контраст, просто смешайте белый с черным, и это поможет. В php.