JavaScript цветовой контраст - PullRequest
Новая
       31

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

11 голосов
/ 13 апреля 2011

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

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

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

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

Ответы [ 5 ]

13 голосов
/ 12 марта 2012

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

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 голосов
/ 13 апреля 2011

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

1 голос
/ 06 июня 2017

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

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

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

0 голосов
/ 19 сентября 2012

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

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

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

0 голосов
/ 13 апреля 2011

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

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

со страницы:

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

...