12

Как с помощью 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

10

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

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

Что происходит в этом коде: функция 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 you have read our privacy policy.

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