Контрастер цвета JavaScript

ProgramBox

Контрастер цвета JavaScript

Post author:admin
Запись опубликована:20 мая, 2023
Post category:Вопросы по программированию

#javascript #css #colors #contrast

#javascript #css #Цвет #контраст

Вопрос:

Я ищу метод, с помощью которого мы могли бы программно выбрать наилучший цветовой контраст для применения к тексту поверх 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’s.

1. Взгляните на этот плагин jQuery github.com/joggink/jquery-colorcontrast который, кажется, реализует указанную функцию. Будьте осторожны (в настоящее время) плагин не выполняет итерацию; вам нужно вызвать ‘each’ самостоятельно

Ответ №2:

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

1. 1 за полезный ресурс, хотя я не уверен, что он конкретно отвечает на вопрос!

2. Спасибо за ссылку, но там не сказано, как я могу на самом деле получить цвет под текстом!

3. Ах, да. Теперь я вижу, что забежал вперед. Вы должны использовать Javascript, DHTML и DOM. В Javascript найдите объект, цвет текста которого вам нужно изменить; извлеките атрибут background-color из этого объекта; а затем перейдите к выбору цвета для текста тега. Это ближе к ответу, который вы ищете?

4. @Julien Genestoux — Что касается изображений: лично мне никогда бы даже в голову не пришло пытаться интегрировать цвета на фотографии, чтобы создать своего рода составной цвет фона, на фоне которого можно отображать текст тега контрастным цветом. Вместо этого я бы всегда помещал белую каплю поверх фотографии и отображал черный текст тега на этой белой капле. Просто мое мнение; без сомнения, существуют классные алгоритмы, которые вычислят хорошее приближение к среднему цвету фона. Орех, просто говоря за себя, я бы не стал пытаться сделать такую вещь.

Ответ №3:

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

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

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

Ответ №4:

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

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

Со страницы:

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

1. Извините, но это не ответ на вопрос. Да, это было бы, если бы я мог определить цвет под моим текстом, но я не могу. Как я могу?

2. Вы можете определить текущий цвет фона элемента с помощью JavaScript: $(‘.myclass’).css(‘background-color’) с помощью этого значения вы можете рассчитать уровень контрастности любого другого цвета. Я предполагаю, что вы хотите использовать jQuery, поскольку вы упомянули, что ищете его.

3. 2 проблемы: как мне определить «myid»? Что, если это изображение?

4. Если ваш фон представляет собой изображение, я бы не пытался автоматизировать обработку цветов на стороне клиента (с помощью canvas) — я бы рассмотрел решение на стороне сервера, поскольку у него будет меньше проблем с кроссбраузерностью и он будет лучше масштабироваться.

Ответ №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 в качестве входных данных.

Ответ №6:

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

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

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