Как изменить цвет элемента после эмуляции Chrome renderer?

#javascript #google-chrome #google-chrome-devtools #accessibility #puppeteer

#javascript #google-chrome #google-chrome-devtools #Специальные возможности #кукловод

Вопрос:

Chrome представил опцию для своего средства визуализации (в инструментах разработчика) для эмуляции недостатков зрения, таких как дальтонизм. Однако эти «фильтры» не изменяют CSS или вычисляемые стили, к которым я могу получить доступ через JavaScript.

Есть ли способ программно получить отображаемый цвет элементов и текста после применения фильтра дефицита зрения, такого как Tritanopia в Chrome?

Ссылка на обновление разработчика Chrome для этой функции: что нового в DevTools (Chrome 83)

Я пробовал:

  • Доступ Element.style через js на странице.
  • Использование getComputedStyle .
  • Разное. Методы кукловода.

Ответ №1:

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

Быстрый и грязный способ (не программно)

Лучше всего использовать анализатор цветового контраста от paciello group или аналогичное программное обеспечение, которое существует вне браузера и принимает фактические значения цвета пикселей после применения фильтров.

Очевидно, я знаю, что это не программно.

Программно

Вы могли бы создать что-то самостоятельно.

Вероятно, вы найдете эту страницу о симуляции дальтонизма в JS очень полезной, поскольку она объясняет, как выполнять преобразования цветов RGB для имитации дальтонизма. Затем все, что вам нужно сделать, это создать наложение средства выбора цвета (или что-то, во что вы можете ввести шестнадцатеричное значение и получить соответствующий цвет).

Альтернативным способом сделать это может быть добавление цветового фильтра SVG, который имитирует дальтонизм, на страницу, а затем просто использовать обычный плагин выбора цвета.

Возможно, добавьте запрос на эту функцию, поскольку это упростит жизнь!

Комментарии:

1. Спасибо за ваше предложение 🙂 Однако использование фильтров CSS или SVG, похоже, не изменяет значение, которое я могу получить программно. Знаете ли вы способ прочитать измененный цвет через javascript?

2. первая ссылка под названием «эта страница по симуляции дальтонизма в JS» содержит все необходимое для создания собственной. Нет способа прочитать измененный цвет с помощью JS , боюсь, из-за того, как применяются цветовые фильтры, единственным способом добиться этого было бы воспроизвести цветовые фильтры, а затем вычислить конечный цвет, чтобы вы могли получить конечный цвет. Вопрос действительно в том, почему вам нужно решить это программно, поскольку может быть лучший способ достичь вашей конечной цели.

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

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

5. Большое спасибо за ссылки! Похоже, это путь вперед.