11

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

Поставили задачу: сделать на сайте версию для слабовидящих. Один из пунктов - инверсия цвета, то есть выводим белый текст на черном фоне. Я прописал черный background у body, поправил css для прочих контейнеров, все хорошо, за исключением одного но. В админке у некоторых страниц в редакторе WYSIWYG явно прописан черный цвет для текста (в атрибуте style). В результате этот текст не виден на странице.

Я хочу найти решение, которое позволит решить проблему, не изменяя код страниц.

Например, чтобы javascript автоматически находил такой текст и менял его цвет на белый. Вопрос в том, как найти такие элементы.

Пока я вижу только вариант рекурсивного прохода по всем элементам DOM с запоминанием background родителя и проверкой цвета самого элемента.

Но может, есть способ проще, какое-нибудь решение в пару строк на jquery?

Иными словами, нужно добиться, чтобы в примере во втором div > p текст был виден:

.orig {
  background-color: #fff;
}

.invert {
  background-color: #000;
}
<h2>Оригинал</h2>
<div class="orig"><p style="color: black">Текст</p></div>

<h2>Инверсия</h2>
<div class="invert"><p style="color: black">Текст</p></div>

4
  • Это можно сделать в очень ограниченном виде. Если элементы абсолютно позиционированы - будут проблемы. Также не получится учесть картинки (ну или эта задача будет довольно сложной) 16 мар 2017 в 14:57
  • Может быть, обрабатывать только элементе, которые создаёт WYSIWYG. Вы знаете селектор родителя этого контейнера, остается пройтись или "насильно" через !important менять цвет у потомков. 16 мар 2017 в 15:01
  • @tutankhamun эти ограничения приемлемы. Я могу ограничить поиск только контейнерами, где нет абсолютного позиционирования и картинок в background, собственно, основной контент страницы удовлетворяет этим требованиям.
    – cronfy
    16 мар 2017 в 15:02
  • @blatube.com цвет текста прописан через style, разве можно его поменять через !important? Насколько я знаю, что прописано в style, то уже не поменяешь css'ом.
    – cronfy
    16 мар 2017 в 15:04

5 ответов 5

9

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

Код частично скопипастил с определителя контрастности Лии Веру.

Что происходит в этом коде: функция getLuminance() возвращает relative luminance; функция getContrastRatio() возвращает contrast ratio из введенных туда данных о цвете фона и текста. Проходим по каждому параграфу внутри блока .invert, определяем contrast ratio и если он меньше 7 (таково требование WCAG) — делаем текст белым, а если больше 7, то оставляем как есть.

UPD: переписал код для определения цвета фона не у родителя, а у самого элемента, для этого надо прописать параграфу в CSS background-color: inherit и переменной bg присваивать значение собственного цвета фона: bg = $(item).css('background-color').

UPD: итоговый вариант, позволяющий делать что угодно с элементами, имеющими недостаточную контрастность и без использования background-color: inherit.

Источники:

Lea Verou, contrast ratio.

Формула подсчёта relative luminance: https://www.w3.org/TR/2008/REC-WCAG20-20081211/#relativeluminancedef.

Формула подсчета contrast ratio: https://www.w3.org/TR/2008/REC-WCAG20-20081211/#contrast-ratiodef.

$(function() {
  var color, bg, textLuminance, parentLuminance, cr;

  $('.invert p').each(function(index, item) {
    color = $(item).css('color'),
    bg = $(item).css('background-color');

    textLuminance = getLuminance(color);
    parentLuminance = getLuminance(bg);
    
    cr = getContrastRatio(textLuminance, parentLuminance);
    
    if(cr <= 7) $(item).css('color', '#fff');
  });

  function getContrastRatio(l1, l2) {
    l1 += .05,
    l2 += .05;
    
    var ratio = l1 / l2;

    if (l2 > l1) {
      ratio = 1 / ratio;
    }

    return ratio = Math.round(ratio, 1);
  }

  function getLuminance(color) {
    var rgb = color.slice(4, -1).split(',').map(Number);

    for (var i = 0; i < 3; i++) {
      var rgbI = rgb[i];

      rgbI /= 255;

      rgbI = rgbI < .03928 ? rgbI / 12.92 : Math.pow((rgbI + .055) / 1.055, 2.4);

      rgb[i] = rgbI;
    }

    return .2126 * rgb[0] + .7152 * rgb[1] + 0.0722 * rgb[2];
  }
});
.orig {
  background-color: #fff;
}

.invert {
  background-color: #000;
}

.invert p {
  padding: 5px;
  background-color: inherit;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<h2>Оригинал</h2>
<div class="orig">
  <p style="color: black">Текст</p>
</div>

<h2>Инверсия</h2>
<div class="invert">
  <p>Обычный текст без инлайновых стилей</p>
</div>

<div class="invert">
  <div style="background-color: #fff">
  <div style="background-color: #ff0">
  <div>
  <p style="color: black">Черный Текст</p>
  </div>
  </div>
  </div>
</div>

<div class="invert">
  <p style="color: brown; background: darkgrey">Коричневый Текст</p>
</div>

<div class="invert">
  <p style="color: blue">Синий Текст</p>
</div>

<div class="invert">
  <p style="color: yellow">Желтый Текст</p>
</div>

<div class="invert">
  <p style="color: orange">Оранжевый Текст</p>
</div>

10
  • Вот это просто отлично! Здорово! Осталось научиться определять реальный backgound-color элемента, потому что он может быть задан у предка. Но, видимо, придется-таки писать для этого рекурсивную функцию, так как насколько я понял, более простого способа определить реальный фон не существует.
    – cronfy
    17 мар 2017 в 10:47
  • см. обновленный ответ. 17 мар 2017 в 11:03
  • inherit background-color для p нельзя использовать, это приведет к неприятным сайд-эффектам, когда у какого-то предка background - картинка, а не просто цвет. jsfiddle.net/38ve0gdv Хотя для конкретно моего случая вариант подойдет, в контенте нет контейнеров с картинками в фоне. Но для общего случая, думаю, можно взять ф-ю отсюда stackoverflow.com/a/41663840/1775065 , только отсекать варианты, когда у ближайшего предка с непрозрачным фоном в качестве фона используется картинка.
    – cronfy
    17 мар 2017 в 12:32
  • background-color: inherit наследует цвет фона родителя, потому естественно, что если он задан вместе с картинкой, как в вашем примере, то этот цвет будет унаследован. Приведенная вами в качестве примера функция не делает чего-либо особенного, .css('background-color') вот делает то же самое. Ну и что касается отсечения фона-картинки, тут вы по-простому уже точно не сделаете, лично мне не сильно хочется писать еще и функцию для определения среднего цвета картинки — тут вы уже пытаетесь обработать все случаи со сферическим конём в вакууме ) А как это нагрузит клиент даже не хочу думать. 17 мар 2017 в 12:47
  • Верно, работа с фоном-картинкой определенно выходит за рамки задачи. Такие случаи придется просто отсекать. А вот приведенная ф-я отличается от простого css("background-color"), смотрите: jsfiddle.net/r4bpvqxh/2 (я намеренно сделал без Inherit, потому что, как писал выше, к него есть ненужные сайд-эффекты).
    – cronfy
    17 мар 2017 в 13:13
7

Может быть так:

$('p').each(function(){
  var
    $this = $(this),
    wrap = $this.parent('div'),
    color = $(this).css('color'),
    bg = wrap.css('backgroundColor');
  
  console.log(color + ' ' + bg);
  
  if(color === bg) {
    $this.css({'color':'#ffffff'});
  }
});
.orig {
  background-color: #fff;
}

.invert {
  background-color: #000;
}
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
  
<h2>Оригинал</h2>
<div class="orig"><p style="color: black">Текст</p></div>

<h2>Инверсия</h2>
<div class="invert"><p style="color: black">Текст</p></div>

либо так:

$('p').each(function(){
  var
    $this = $(this),
    wrap = $this.closest('.invert'),
    color = $(this).css('color'),
    bg = wrap.css('backgroundColor');
  
  console.log(color + ' ' + bg);
  
  if(color === bg) {
    $this.css({'color':'#ffffff'});
  }
});
.orig {
  background-color: #fff;
}

.invert {
  background-color: #000;
}
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
  
<h2>Оригинал</h2>
<div class="orig"><p style="color: black">Текст</p></div>

<h2>Инверсия</h2>
<div class="invert">
  <div>
    <div>
      <div><p style="color: black">Текст</p></div>
    </div>
  </div>
</div>

2
  • 1
    @cronfy, добавила вариант
    – SVE
    16 мар 2017 в 20:24
  • Это решение не подходит, потому что привязывается к конкретному классу .invert. Черный фон, как и черный цвет текста, может задаваться любым классом или в атрибутах style. P. S. решение найдено, см. принятый ответ.
    – cronfy
    21 мар 2017 в 18:32
4

Может с фильтром invert?

.orig {
  background-color: #fff;
}

.invert {
  background-color: #000;
}

.invert p {
  filter: invert(100%);
}
<h2>Оригинал</h2>
<div class="orig"><p style="color: black">Текст</p></div>

<h2>Инверсия</h2>
<div class="invert"><p style="color: black">Текст</p></div>

6
  • А черный цвет на черном фоне чего делает? 16 мар 2017 в 17:16
  • @Vadizar потерялись проценты, теперь норм. 16 мар 2017 в 17:21
  • Я думал насчет этого варианта, но иногда возникают нечитабельные сочетания. 16 мар 2017 в 17:23
  • Спасибо. Понимаете, в чем фишка. Глобально решение не сработает. Нельзя задать всем p в контейнере invert. Потому что некоторые (на самом деле большинство) уже нормально написаны белым по черному. С invert они станут невидимыми. В принципе, ваше решение тождественно color: white. Задача в том, чтобы найти именно те p, в которых текст написан черным по черному, и вот уже им прописать invert или color: white и т. п. Но при этом не трогать те, где текст написан красным по черному, например.
    – cronfy
    16 мар 2017 в 17:31
  • Понял. Тогда любое цсс-решение тут вообще не в дугу, а операции с DOM - это будет издевательством над производительностью. Думаю, вам надо таки перекручивать вашу серверную часть и выпиливать все инлайновые стили. 16 мар 2017 в 17:38
3

Любопытно.
Можно при изменении текстовой ноды (MutationObserver) проверять её цвет, сравнивать его с чёрным и, если слишком тёмный, делать его светлее.
При сохранении, обходить дерево (TreeWalker), ставить тексту принудительно цвет.

9
  • При изменении/сохранении где? Предполагается, что скрипт будет работать на публичном фронтенде, и будет запускаться по document.ready.
    – cronfy
    16 мар 2017 в 15:31
  • Вы же контролируете создание в WYSIWYG. Там и проверяйте изменения. Второй путь (при загрузке обходить DOM и менять цвет) - крайний и очень плохой способ (DOM вообще лучше не трогать лишний раз, а тут всё обходить).
    – user207618
    16 мар 2017 в 15:34
  • Так с тем, что создано в WYSIWYG приходится работать постфактум. Оно уже есть, много страниц. Даже если я запрещу это в WYSIWYG (хотя это мне видится гораздо более сложной задачей), с уже созданными страницами нужно что-то сделать.
    – cronfy
    16 мар 2017 в 15:37
  • Уже созданные можно скормить парсеру (мне нравится cheerio), обойти дерево, поменять что нужно и сохранить. А в новых нужно не запрещать WYSIWYG, а контролировать его: меняется в нём цвет, вы перехватываете это и, если текст слишком тёмный, откатываете на белый (и выводите табличку с напоминанием что нельзя использовать тёмные цвета). Или запретить подобные цвета в WYSIWYG.
    – user207618
    16 мар 2017 в 15:44
  • 1
    @Other вы правда не видите, что ваш ответ не решает основной вопрос? Или чего-то не вижу я. Допустим, у нас есть парсер, и даже есть код в редакторе, который контролирует изменения. Мы нашли элемент. Как узнать, написан в этом элементе цвет черным по черному или нет?
    – cronfy
    16 мар 2017 в 16:35
1

Если хотите сделать быстро и просто, то сделайте на нативном CSS с помощью свойства mix-blend-mode:

p {
  color: #fff !important;;
  mix-blend-mode: difference;
}
<h2>Оригинал</h2>
<div style="background-color: #fff;"><p>Текст</p></div>

<h2>Инверсия</h2>
<div style="background-color: #000;"><p style="color: black">Текст</p></div>

<h2>mix-blend-mode</h2>
<div style="background-color: #000;"><p>Текст</p></div>

13
  • Не уверен, что понял, как это работает, потому что для моего случая у меня не получилось сделать рабочий вариант: jsfiddle.net/1qqc8v5z/1 Нужно, чтобы в div.invert > p текст был виден. Что я не так сделал?
    – cronfy
    16 мар 2017 в 16:26
  • @cronfy ваша ошибка в том, что вы через style указали стили цвета для p. Никогда так не делайте. 16 мар 2017 в 16:40
  • Это не я, честное слово.
    – cronfy
    16 мар 2017 в 16:41
  • @cronfy добавил пример. 16 мар 2017 в 16:42
  • 3
    Слышал. Я хочу найти решение, которое позволит мне решить проблему, не изменяя код страниц. Если это невозможно, тогда да, буду применять другие варианты, они понятны. Наверное, я вообще зря написал про админку и редактор. Извините.
    – cronfy
    16 мар 2017 в 17:04

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.